/* Sun page additions: the hero turns, a height finder, the full accessory list. */

/* Hero: once its frames are ready, Sun turns in the photo's place, in morning light. */
.hero-turntable{position:absolute;z-index:1;display:block;cursor:grab;touch-action:pan-y;outline:none;
 background:radial-gradient(circle at 50% 56%,#ffe7a0 0,#fff3cf 24%,#fff0 58%)}
.hero-turntable[hidden]{display:none}
.hero-turntable:active{cursor:grabbing}
.hero-turntable:focus-visible{box-shadow:0 0 0 3px #004a6c40;border-radius:18px}
.hero-visual.turntable-ready .hero-product-photo{visibility:hidden}
.sun-intro .hero-turntable{animation:reveal-sun-product 1.15s ease-out 2.25s both}

/* Height finder: slide to a height and the matching frames light up. */
.size-strip:has(.height-finder:not([hidden])){flex-wrap:wrap}
.size-strip:has(.height-finder:not([hidden]))>p{max-width:300px}
.height-finder{flex-basis:100%;max-width:640px}
.height-finder[hidden]{display:none}
.height-finder label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13px;color:var(--muted)}
.height-finder output{font-size:24px;font-weight:560;letter-spacing:-.03em;color:var(--ink)}
.height-finder input[type=range]{width:100%;margin:10px 0 12px;accent-color:var(--sun)}
.height-scale{position:relative;height:68px;border-radius:14px;background:var(--surface)}
.height-scale i{position:absolute;left:calc((var(--a) - 95) / 85 * 100%);width:calc((var(--b) - var(--a)) / 85 * 100%);height:16px;padding-left:8px;border-radius:8px;
 background:#dfe5e8;color:var(--muted);font:600 10px/16px Inter,Arial,sans-serif;font-style:normal;transition:background .25s,color .25s}
.height-scale i:nth-child(1){top:7px}.height-scale i:nth-child(2){top:26px}.height-scale i:nth-child(3){top:45px}
.height-scale i.is-match{background:var(--sun);color:var(--ink)}
.height-marker{position:absolute;top:0;bottom:0;left:calc((var(--h,120) - 95) / 85 * 100%);width:2px;margin-left:-1px;border-radius:1px;background:var(--ink)}
.height-result{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.size-pills span{border-radius:14px;padding:6px 10px;transition:background .25s,box-shadow .25s}
.size-pills span.is-match{background:#fff7df;box-shadow:inset 0 0 0 2px var(--sun)}

/* Full accessory list with fitting conditions. */
.accessory-groups article{padding:20px 0}
.acc-items{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:14px}
.acc-items b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.acc-items span{display:block;margin-top:2px;font-size:13px;line-height:1.6;color:var(--muted)}
.acc-tag{display:inline-block;margin:6px 6px 0 0;padding:3px 10px;border-radius:999px;background:#eef3f6;color:var(--brand);font-size:11px;font-style:normal;font-weight:560}
.acc-limit{background:#fff1e0;color:#8a5200}

/* On wide screens the photo and the accessory groups flow through balanced columns across the full width. */
@media (min-width:1000px){
 .accessories .accessory-editorial{display:block;columns:3 260px;column-gap:48px}
 .accessories .accessory-editorial>figure{break-inside:avoid;margin:0 0 24px}
 .accessories .accessory-editorial figure img{height:auto;aspect-ratio:1800/1162;object-fit:contain}
 .accessory-groups{display:contents}
 .accessory-groups article{display:block;break-inside:avoid}
 .accessory-groups article:last-child{border-bottom:0}
}

/* Readable small text: labels, captions and notes no smaller than 11–12 px. The 3D dial keeps its own sizes. */
main .eyebrow.eyebrow,main .detail-number.detail-number,.core-roll .core-copy .eyebrow.eyebrow{font-size:11px}
.core-photo-label.core-photo-label,.wheel-caption.wheel-caption,.image-note.image-note,.film-label.film-label{font-size:11px}
.tilt-story figure figcaption,.accessory-editorial figure figcaption{font-size:11px}
.hero-visual .hero-caption{font-size:12px}.hero-visual .hero-caption small{font-size:11px}
.hero .hero-foot{font-size:12px}
.hero .btn.btn{font-size:13px}
.hero-floating.hero-floating strong{font-size:12px}
.size-strip.size-strip>p,.size-strip.size-strip .text-link,.size-pills.size-pills small{font-size:12px}
.core-links.core-links a,.film-channel.film-channel,.experience-start.experience-start small{font-size:12px}
.film-play-link.film-play-link small{font-size:11px}
.spec-table.spec-table th small{font-size:11px}
.spec-table.spec-table caption,.spec-note.spec-note{font-size:12px}
.resource .icon.icon{font-size:11px}
.experience-toolbar #experience-close{font-size:12px;min-height:32px;padding:6px 8px}
.feature-dial .dial-first-hint{font-size:11px}

@media (max-width:760px){
 .height-finder output{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
 .sun-intro .hero-turntable{animation:none}
}