/* Product selection and feature navigation share the existing site typography. */
:root{--category-height:48px;--product-feature-height:48px}
.sports-catalog,.product-page{--category-height:48px;--product-feature-height:48px}
.product-page{padding-top:var(--nav-height);background:#fff}
.nio-unified.sports-catalog .detail-main,.nio-unified.product-page .detail-main{background:#fff;color:#111;overflow:clip}
.range-category-nav{position:sticky;top:var(--nav-height);z-index:151;display:flex;align-items:center;justify-content:space-between;gap:32px;height:var(--category-height);padding:0 var(--page-inset);background:#f7f7f7;border-bottom:1px solid #e6e6e6}
.range-category-nav a{text-decoration:none;color:#111;white-space:nowrap}
.range-overview-link{font-size:20px;line-height:28px}
.range-category-nav>div{display:flex;align-items:stretch;height:100%;gap:40px}
.range-category-nav>div a{display:flex;align-items:center;font-size:15px;min-height:44px;border-bottom:2px solid transparent}
.range-category-nav a[aria-current],.range-category-nav a.is-active{border-bottom-color:#111}
.range-category-nav a:hover{color:#466f73}
.product-detail-nav{position:sticky;top:calc(var(--nav-height) + var(--category-height));z-index:150;display:flex;align-items:center;gap:32px;min-height:var(--product-feature-height);padding:0 var(--page-inset);background:rgba(255,255,255,.98);border-bottom:1px solid #e6e6e6}
.product-nav-name{flex-shrink:0;font-size:18px;line-height:24px;text-decoration:none;white-space:nowrap}
.product-nav-features{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.product-nav-scroll{display:flex;align-items:stretch;gap:28px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1;scroll-padding-inline:8px}
.product-nav-scroll::-webkit-scrollbar{display:none}
.product-nav-scroll>a{flex-shrink:0;display:flex;align-items:center;min-height:var(--product-feature-height);font-size:13px;line-height:20px;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.product-nav-scroll>a.is-active{border-bottom-color:#111;font-weight:600}
.product-nav-scroll>a:hover{color:#466f73}
.product-nav-features>button{flex-shrink:0;display:grid;place-items:center;width:32px;height:44px;border:0;background:none;color:#111;font-size:20px;cursor:pointer}
.product-nav-features>button[hidden]{display:none}
.product-nav-features>button:disabled{opacity:.25;cursor:default}
.product-nav-contact{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-height:36px;padding:7px 14px;font-size:12px;line-height:20px;text-decoration:none;border:1px solid #444;white-space:nowrap}
.product-nav-contact:hover{background:#111;color:#fff}
/* The same links remain inline on desktop and become a disclosure on small screens. */
.product-nav-panel{display:contents}
.product-nav-toggle{display:none}
.range-category-nav a:focus-visible,.product-detail-nav a:focus-visible,.product-detail-nav button:focus-visible{outline:2px solid #262626;outline-offset:3px}
.range-family{position:relative;max-width:1440px;margin:0 auto;padding:112px var(--page-inset) 64px}
.range-anchor{position:absolute;top:0;left:0}
.range-family-copy{max-width:680px;margin:0 auto 64px;text-align:center}
.nio-unified .range-family h2{font-size:40px;line-height:48px;font-weight:400;margin:16px 0 28px}
.range-family-copy>p{max-width:520px;margin:0 auto 32px;font-size:16px;line-height:26px;color:#555}
.nio-unified .range-photo{margin:0;min-width:0}
.range-photo picture{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#f4f5f5}
.range-photo img{display:block;width:100%;height:100%;object-fit:contain}
.range-photo figcaption{font-size:11px;line-height:18px;color:#62666a;margin-top:10px}
.range-product-lead{max-width:1440px;margin:0 auto;padding:64px var(--page-inset) 80px;text-align:center}
.nio-unified .range-product-lead h1{font-size:48px;font-weight:400;line-height:56px;margin:12px 0 16px;text-wrap:balance}
.range-product-lead>p{font-size:23px;line-height:32px;margin-bottom:48px;color:#555}
.range-product-lead figcaption{text-align:left}
.range-section{max-width:1280px;margin:0 auto;padding:104px var(--page-inset);border-top:1px solid #e8e8e8}
.range-section-copy{max-width:780px;margin:auto}
.nio-unified .range-section h2{font-size:40px;line-height:48px;font-weight:400;margin:16px 0 28px;text-wrap:balance}
.range-section-copy>p{max-width:640px;font-size:17px;line-height:28px;color:#555}
.range-paired{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;max-width:1440px}
.range-paired .range-section-copy{margin:0}
.range-paired .range-photo picture{aspect-ratio:4/5}
.range-paired .range-photo img{object-fit:cover}
.range-paired .range-photo:has(img[src*="Product%20Scene"]) picture,.range-paired .range-photo:has(img[src*="Raised%20Kauri"]) picture{aspect-ratio:4/3}
.range-paired .range-photo:has(img[src*="Product%20Scene"]) img,.range-paired .range-photo:has(img[src*="Raised%20Kauri"]) img{object-fit:contain}
.range-paired .range-photo:has(img[src*="Design%20Review"]) picture{aspect-ratio:4/3}
.range-considerations{margin:36px 0 0}
.range-considerations>div{padding:20px 0;border-top:1px solid #ddd}
.range-considerations dt{font-weight:600;font-size:15px;line-height:24px;margin-bottom:8px}
.range-considerations dd{margin:0;font-size:15px;line-height:25px;color:#555}
.range-section .editorial-text-link{display:inline-block;margin-top:32px}
.range-product-contact{padding:104px 24px;text-align:center;background:#f5f6f6}
.nio-unified .range-product-contact h2{font-size:40px;line-height:48px;font-weight:400;text-wrap:balance}
.range-product-contact>p{max-width:540px;margin:24px auto 32px;font-size:16px;line-height:26px;color:#555}
.range-product-contact .editorial-text-link{display:block;width:fit-content;margin:24px auto 0}
html:has(body.sports-catalog){scroll-padding-top:var(--nav-stack)}
html:has(body.product-page){scroll-padding-top:calc(var(--nav-height) + var(--category-height) + var(--product-feature-height))}
html:has(body.product-page) main [id]{scroll-margin-top:0}
@media(min-width:1024px) and (max-width:1279px){
 .product-detail-nav{gap:20px;padding-inline:32px}
 .product-nav-scroll{gap:24px}
 .range-paired{gap:48px}
}
@media(max-width:1023px){
 .range-paired{gap:40px}
 .range-category-nav>div{gap:32px}
 html:has(body.product-page){scroll-padding-top:var(--nav-stack)}
 .product-page .range-category-nav{display:none}
 .product-detail-nav{top:var(--nav-height);display:flex;align-items:center;gap:8px;height:var(--context-nav-height);min-height:var(--context-nav-height);padding:0 16px}
 .product-nav-name{flex:0 0 auto;display:flex;align-items:center;min-height:44px;font-size:14px;line-height:20px;padding:0 4px}
 .product-nav-features{height:100%;gap:0}
 .product-nav-scroll{gap:20px;height:100%}
 .product-nav-scroll>a{min-height:var(--context-nav-height);font-size:14px;line-height:20px}
 .product-nav-contact{min-height:44px;font-size:14px;line-height:20px;padding:6px 10px}
 .product-nav-features>button{width:24px;height:48px;font-size:18px}
 .product-nav-enhanced .product-nav-toggle{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1;min-width:0;min-height:44px;margin-left:auto;padding:0 4px 0 12px;border:0;background:none;color:#111;font:inherit;font-size:14px;line-height:20px;text-align:right;cursor:pointer}
 .product-nav-toggle-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .product-nav-toggle::after{content:'';flex:0 0 7px;width:7px;height:7px;margin:0 3px 4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
 .product-nav-toggle[aria-expanded="true"]::after{transform:rotate(225deg);margin-bottom:0}
 .product-nav-enhanced .product-nav-panel{display:none;position:fixed;top:var(--nav-stack);left:16px;right:16px;max-height:calc(100dvh - var(--nav-stack) - 16px);overflow-y:auto;overscroll-behavior:contain;padding:8px 16px 16px;background:#fff;border:1px solid #ddd;box-shadow:0 8px 20px #0001}
 .product-nav-enhanced.is-open .product-nav-panel{display:block}
 .product-nav-panel .product-nav-features{display:block;height:auto}
 .product-nav-panel .product-nav-features>button{display:none}
 .product-nav-panel .product-nav-scroll{display:block;height:auto;overflow:visible}
 .product-nav-panel .product-nav-scroll>a{min-height:44px;padding:12px 8px;white-space:normal;overflow-wrap:anywhere;border-bottom:1px solid #eee}
 .product-nav-panel .product-nav-scroll>a.is-active{border-bottom-color:#111;background:#f5f5f5}
 .product-nav-panel .product-nav-contact{margin-top:12px;white-space:normal;text-align:center}
 .range-section{padding-block:80px}
 .nio-unified .range-section h2,.nio-unified .range-family h2{font-size:32px;line-height:40px}
}
@media(max-width:767px){
 .sports-catalog,.product-page{--category-height:48px;--product-feature-height:48px}
 .range-category-nav{padding-inline:24px;justify-content:center;gap:0}
 .range-category-nav .range-overview-link{display:none}
 .range-category-nav>div{gap:40px}
 .range-category-nav>div a{font-size:14px}

 .range-family{padding:80px 24px 40px}
 .range-family-copy{margin-bottom:40px;text-align:left}
 .nio-unified .range-family h2{font-size:28px;line-height:36px;margin:12px 0 24px}
 .range-family-copy>p{font-size:15px;line-height:25px;margin-bottom:28px}
 .range-product-lead{padding:48px 24px 64px}
 .nio-unified .range-product-lead h1{font-size:32px;line-height:40px;margin:12px 0}
 .range-product-lead>p{font-size:18px;line-height:27px;margin-bottom:32px}
 .range-section{padding:72px 24px}
 .range-paired{display:flex;flex-direction:column;gap:36px;align-items:stretch}
 .nio-unified .range-section h2{font-size:28px;line-height:36px;margin:12px 0 24px}
 .range-section-copy>p{font-size:16px;line-height:26px}
 .range-paired .range-photo picture{aspect-ratio:4/3}
 .range-paired .range-photo:has(img[src*="Player"]) picture{aspect-ratio:4/5}
 .range-considerations{margin-top:28px}
 .range-considerations dt{font-size:14px}
 .range-considerations dd{font-size:14px;line-height:24px}
 .range-product-contact{padding:80px 24px}
 .nio-unified .range-product-contact h2{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.product-nav-scroll{scroll-behavior:auto}}

@media(max-width:767px){html:has(body.product-page){scroll-padding-top:var(--nav-stack)}}
html:has(body.product-page) main [id]{scroll-margin-top:0}

/* Sports overview: product categories lead directly into the five shared topics. */
.sports-catalog .range-category-nav{gap:28px}
.sports-catalog .range-category-nav>.range-nav-window{display:flex;align-items:center;flex:1;min-width:0;height:100%;gap:8px}
.sports-catalog .range-nav-scroll{display:flex;align-items:stretch;gap:28px;flex:1;min-width:0;height:100%;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:8px;justify-content:flex-end}
.sports-catalog .range-nav-scroll::-webkit-scrollbar{display:none}
.sports-catalog .range-nav-scroll>a{flex-shrink:0;display:flex;align-items:center;min-height:44px;font-size:14px;border-bottom:2px solid transparent;white-space:nowrap}
.sports-catalog .range-nav-scroll>a.is-active{border-bottom-color:#111}
.sports-catalog .range-nav-scroll>a:nth-child(4){border-left:1px solid #ddd;padding-left:28px}
.sports-catalog .range-nav-step{flex-shrink:0;display:grid;place-items:center;width:28px;min-height:44px;padding:0;border:0;background:none;font:20px/1 "IBM Plex Sans",sans-serif;color:#111;cursor:pointer}
.sports-catalog .range-nav-step[hidden]{display:none}
.sports-catalog .range-nav-step:disabled{opacity:.25;cursor:default}
.sports-catalog .range-nav-step:focus-visible{outline:2px solid #262626;outline-offset:2px}
@media(max-width:1279px){.sports-catalog .range-nav-scroll{justify-content:flex-start}}
@media(max-width:767px){
 .sports-catalog .range-category-nav{padding-inline:16px;gap:0}
 .sports-catalog .range-category-nav>.range-nav-window{gap:4px;width:100%}
 .sports-catalog .range-nav-scroll{gap:24px;justify-content:flex-start}
 .sports-catalog .range-nav-scroll>a{font-size:13px}
 .sports-catalog .range-nav-scroll>a:nth-child(4){padding-left:24px}
 .sports-catalog .range-section{border-top:1px solid #e8e8e8}
}

/* Material gallery */
.nio-unified .material-showcase{max-width:none;padding:104px 0 112px;overflow:hidden}
.material-intro{max-width:800px;margin:0 auto 56px;padding:0 24px;text-align:center}
.nio-unified .material-intro h2{margin:16px 0 24px}
.material-intro>p{max-width:580px;margin:auto;font-size:17px;line-height:28px;color:#555}
.material-hero{max-width:1280px;margin:0 auto 88px;width:calc(100% - 2 * var(--page-inset))}
.material-hero picture{display:block;aspect-ratio:16/9;background:#f2f3f3}
.material-hero img{display:block;width:100%;height:100%;object-fit:contain}
.material-hero figcaption,.material-card figcaption{font-size:11px;line-height:18px;color:#62666a;margin-top:10px}
.material-gallery{--material-gap:40px;--material-card-width:clamp(360px,35vw,560px)}
.material-track{display:flex;gap:var(--material-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--page-inset) 8px;scroll-padding-inline:var(--page-inset);overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.material-track::-webkit-scrollbar{display:none}
.material-card{flex:0 0 var(--material-card-width);min-width:0;scroll-snap-align:start}
.material-card figure{margin:0;position:relative}
.material-card figcaption{position:absolute;top:100%;left:0;margin-top:8px}
.material-card-media{aspect-ratio:4/3;overflow:hidden;background:#f1f3f3}
.material-card-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:44% 46%}
.material-photo-pending{display:grid;place-items:center;text-align:center;border:1px solid #e6e9e9;color:#606a6b;padding:24px}
.material-photo-pending>span{font-size:20px;line-height:28px;font-weight:300}
.material-photo-pending small{display:block;margin-top:12px;font-size:12px;line-height:20px;color:#737b7c;font-weight:400}
.nio-unified .material-card h3{font-family:inherit;font-size:20px;line-height:29px;font-weight:400;margin:44px 0 12px}
.material-card:has(figcaption) h3{margin-top:44px}
.material-card>p{font-size:15px;line-height:25px;color:#555;margin:0;max-width:480px}
.material-controls{display:flex;align-items:center;justify-content:space-between;margin:40px var(--page-inset) 0}
.material-position{font-size:12px;line-height:20px;color:#62666a;font-variant-numeric:tabular-nums}
.material-controls>div{display:flex;gap:12px}
.material-controls button{width:44px;height:44px;border:1px solid #cbd0d0;border-radius:50%;display:grid;place-items:center;background:transparent;color:#222;cursor:pointer;padding:10px;transition:background .2s,color .2s}
.material-controls button:hover:not(:disabled){background:#111;color:white;border-color:#111}
.material-controls button:disabled{opacity:.3;cursor:default}
.material-controls svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.material-track:focus-visible,.material-controls button:focus-visible{outline:2px solid #262626;outline-offset:4px}
@media(min-width:1600px){.material-track{padding-inline:max(var(--page-inset),calc((100vw - 1280px)/2));scroll-padding-inline:max(var(--page-inset),calc((100vw - 1280px)/2))}.material-controls{max-width:1280px;margin-inline:auto}}
@media(max-width:1023px){.nio-unified .material-showcase{padding-block:80px}.material-gallery{--material-card-width:42vw;--material-gap:28px}.material-hero{margin-bottom:64px}}
@media(max-width:767px){
 .nio-unified .material-showcase{padding:72px 0 80px}
 .material-intro{text-align:left;margin-bottom:36px;padding-inline:24px}
 .material-intro>p{font-size:16px;line-height:26px}
 .material-hero{width:100%;margin-bottom:48px}
 .material-hero picture{aspect-ratio:16/9}
 .material-hero img{object-fit:contain;object-position:center}
 .material-hero figcaption{margin-inline:24px}
 .material-gallery{--material-card-width:82vw;--material-gap:20px}
 .material-track{padding-inline:24px;scroll-padding-inline:24px}
 .nio-unified .material-card h3{font-size:19px;line-height:27px;margin-top:40px}
 .material-card:has(figcaption) h3{margin-top:40px}
 .material-card>p{font-size:14px;line-height:24px}
 .material-controls{margin:28px 24px 0}
 .material-photo-pending>span{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.material-controls button{transition:none}}

/* Combined design and experience */
.design-experience{position:relative;max-width:1440px}
.range-legacy-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.design-experience-intro{max-width:760px;margin:0 auto 64px;text-align:center}
.design-experience-intro>p{max-width:640px;margin:auto;font-size:17px;line-height:28px;color:#555}
.design-experience-body{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.design-experience-body .range-section-copy{margin:0;min-width:0}
.design-experience-body .range-photo picture{aspect-ratio:4/5}
.design-experience-body .range-photo img{object-fit:cover}
.nio-unified .design-experience h3{font-family:inherit;font-size:32px;line-height:1.4;font-weight:300;margin:0 0 24px;text-wrap:balance}
@media(max-width:1023px){.design-experience-body{gap:40px}.nio-unified .design-experience h3{font-size:28px}}
@media(max-width:767px){
 .design-experience-intro{text-align:left;margin-bottom:36px}
 .design-experience-intro>p{font-size:16px;line-height:26px}
 .design-experience-body{display:flex;flex-direction:column;gap:36px;align-items:stretch}
 .nio-unified .design-experience h3{font-size:26px;line-height:1.4;margin-bottom:20px}
}

/* Site settings use the same gallery rhythm as Material. */
.site-showcase .material-hero img{object-fit:cover;object-position:50% 52%}
.site-showcase .material-card-media img{object-position:center}
.site-follow-up{max-width:680px;margin:56px auto 0;padding:0 24px;text-align:center}
.site-follow-up>p{font-size:14px;line-height:24px;color:#62666a;margin:0}
.site-follow-up .editorial-text-link{margin-top:24px}
@media(max-width:767px){.site-follow-up{margin-top:40px;text-align:left}.site-follow-up>p{font-size:13px;line-height:22px}}

/* Design: landscape overview above the combined experience copy. */
.design-experience-hero{margin-bottom:64px!important}
.design-experience-hero picture{aspect-ratio:16/9}
.design-experience-hero img{object-fit:contain;object-position:center}
.design-experience-body{display:block}
.design-experience-body .range-section-copy{max-width:780px;margin:0 auto}
@media(max-width:767px){.design-experience-hero{margin-bottom:36px!important}}

/* Sports: one design and craftsmanship chapter; detail imagery awaits approved sources. */
.craftsmanship-showcase{position:relative}
.craftsmanship-showcase .material-intro{max-width:860px}
.craftsmanship-showcase .material-intro>p{max-width:660px}
.craftsmanship-showcase .material-intro>p+p{margin-top:20px}
.craftsmanship-showcase .craftsmanship-hero img{object-fit:contain}
.craftsmanship-showcase .material-gallery{--material-card-width:clamp(340px,38vw,500px)}
.craftsmanship-showcase .material-track{align-items:stretch}
.craftsmanship-card{border-top:1px solid #cbd0d0;padding:28px 0 12px}
.craftsmanship-number{display:block;font-size:12px;line-height:20px;color:#62666a;font-variant-numeric:tabular-nums}
.nio-unified .craftsmanship-card h3{margin:20px 0 16px;font-size:24px;line-height:32px}
.craftsmanship-card>p{font-size:16px;line-height:26px}
.craftsmanship-card>.craftsmanship-lead{font-size:18px;line-height:28px;color:var(--ink);margin:0 0 20px}
.craftsmanship-showcase .craftsmanship-experience{width:calc(100% - 2 * var(--page-inset));max-width:1280px;margin:88px auto 0;padding-top:64px;border-top:1px solid #e1e4e4}
.nio-unified .craftsmanship-experience h3{font-family:inherit;font-size:32px;line-height:1.4;font-weight:300;margin:0 0 24px}
.craftsmanship-experience,#material,[id^="material-"]{scroll-margin-top:0}
@media(max-width:767px){
 .craftsmanship-showcase .material-gallery{--material-card-width:82vw}
 .craftsmanship-showcase .material-intro{padding-inline:24px}
 .craftsmanship-showcase .material-intro>p+p{margin-top:16px}
 .craftsmanship-card{padding-top:24px}
 .nio-unified .craftsmanship-card h3{font-size:22px;line-height:30px;margin:16px 0}
 .craftsmanship-card>p{font-size:16px;line-height:26px}
 .craftsmanship-showcase .craftsmanship-experience{width:calc(100% - 48px);margin-top:56px;padding-top:40px}
 .nio-unified .craftsmanship-experience h3{font-size:26px}
}