/* A fixed-ratio visual canvas keeps the battery aligned with its background at every width. */
.na-product-story{--story-progress:0;--story-reveal:1;--story-dark:0;--story-shift:0px;--story-scale:1;position:relative;isolation:isolate;background:#000;color:#fff;width:100%;font-family:var(--na-font)}
.na-shop .na-product-story{width:calc(100vw - var(--na-scrollbar,0px));margin-left:calc((100% - (100vw - var(--na-scrollbar,0px)))/2)}
.na-product-story__stage{position:relative;isolation:isolate;background:#000;box-sizing:border-box}
.na-product-story__visual{position:relative;isolation:isolate;container-type:inline-size;width:100%;aspect-ratio:1680/1100;overflow:hidden;margin-inline:auto}
.na-product-story__road,.na-product-story__shade{position:absolute;inset:0;z-index:0;pointer-events:none}
.na-product-story__road{background:url('../images/product-road.webp') center/cover no-repeat;opacity:calc(1 - var(--story-dark))}
.na-product-story__shade{background:linear-gradient(0deg,#0008,transparent 45%,#0005);opacity:calc(.35*(1 - var(--story-dark)))}
.na-product-story__grid{display:none}
.na-product-story__heading{position:absolute;z-index:1;top:5%;left:12%;width:76%;padding:1.5% 1%;box-sizing:border-box;text-align:center;user-select:text}
.na-product-story__heading h1{margin:0}
.na-product-story__series{margin:0}
.na-product-story__heading .na-corner{pointer-events:none}
.na-product-story__image{position:absolute;z-index:2;top:3%;left:17.5%;width:65%;aspect-ratio:1;transform:translate3d(0,var(--story-shift),0) scale(var(--story-scale));transform-origin:center}
.na-product-story__image,.na-product-story__image *{pointer-events:none!important;user-select:none;-webkit-user-drag:none}
.na-product-story__image .c-media,.na-product-story__image .c-image,.na-product-story__image .c-image__frame{margin:0;width:100%;height:100%}
.na-product-story__image img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 25px #0009)}
.na-product-story__chart{position:absolute;z-index:0;pointer-events:none;left:19%;top:32%;width:62%;aspect-ratio:1040/241;background:url('../images/product-energy-chart.svg') center/contain no-repeat;filter:drop-shadow(0 0 4px #f3000a) drop-shadow(0 0 12px #f3000a);opacity:calc(1 - var(--story-dark))}
.na-product-story__benefits,.na-product-story__metrics{position:absolute;z-index:3;top:38%;width:clamp(200px,22vw,315px);opacity:var(--story-reveal);transform:translateY(calc((1 - var(--story-reveal))*28px))}
.na-product-story__benefits{left:5%}.na-product-story__metrics{right:5%}
.na-product-story h2{font:600 11px/1.4 var(--na-font);letter-spacing:.16em;text-transform:uppercase;color:#cf9a9d;margin:0 0 18px}
.na-product-story__benefit,.na-product-story__metric{display:flex;align-items:flex-start;gap:16px;padding:17px 0;border-top:1px solid #ffffff25}
.na-product-story__benefit h3{margin:0 0 7px}.na-product-story__benefit p{font-size:13px;line-height:1.6;color:#c4babc;margin:0}
.na-product-story__icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;color:#ff454c;border:1px solid #ff444455;background:#270a0d88}.na-product-story__icon svg{width:22px;height:22px}
.na-product-story dl{margin:0}.na-product-story dt{color:#c7babc;font-size:12px}.na-product-story dd{font-size:clamp(20px,2vw,29px);font-weight:700;margin:4px 0 0;line-height:1.2;overflow-wrap:anywhere}
.na-product-story__explore{display:none;position:absolute;z-index:4;bottom:36px;left:50%;transform:translateX(-50%);background:#12050799;border:1px solid #ffffff45;border-radius:30px;padding:12px 24px;color:#fff;font:600 12px var(--na-font);cursor:pointer;white-space:nowrap}.na-product-story__explore span{margin-left:25px}.na-product-story__explore:focus-visible{outline:3px solid #fff;outline-offset:5px}
.na-product-story__progress{display:none;position:absolute;bottom:0;left:0;width:100%;height:2px;background:#ffffff16}.na-product-story__progress span{display:block;height:100%;background:#ff343e;transform-origin:left;transform:scaleX(var(--story-progress))}

.na-product-story:not(.is-animated) .na-product-story__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 5%}
.na-product-story:not(.is-animated) .na-product-story__visual{grid-column:1/-1}
.na-product-story:not(.is-animated) .na-product-story__benefits,.na-product-story:not(.is-animated) .na-product-story__metrics{position:relative;inset:auto;width:auto;max-width:580px;margin:36px 8% 48px;opacity:1;transform:none}
@media(min-width:900px) and (min-height:650px) and (prefers-reduced-motion:no-preference){
.na-product-story.is-animated{height:calc(100svh + 1100px)}
.na-product-story.is-animated .na-product-story__stage{position:sticky;top:var(--story-top,0px);height:calc(100svh - var(--story-top,0px));overflow:hidden}
.na-product-story.is-animated .na-product-story__visual{width:min(100%,calc((100svh - var(--story-top,0px))*1.5272727))}
.na-product-story.is-animated .na-product-story__image{will-change:transform}
.na-product-story.is-animated .na-product-story__explore,.na-product-story.is-animated .na-product-story__progress{display:block}
.na-product-story.is-animated .na-product-story__explore[hidden]{display:none}
}
@media(max-width:1150px){.na-product-story__benefits,.na-product-story__metrics{width:23%}.na-product-story__benefits{left:3%}.na-product-story__metrics{right:3%}.na-product-story__benefit,.na-product-story__metric{gap:10px}}
@media(max-width:899px),(max-height:649px){
.na-product-story:not(.is-animated) .na-product-story__stage{display:block;padding-bottom:1px}
.na-product-story:not(.is-animated) .na-product-story__benefits,.na-product-story:not(.is-animated) .na-product-story__metrics{margin:32px auto;padding:0 22px;width:auto;max-width:580px;box-sizing:border-box}
.na-product-story__metrics dl{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.na-product-story__metric{min-width:0}.na-product-story__benefit p{font-size:14px}.na-product-story__benefit h3{margin:0 0 7px}
}
@media(prefers-reduced-motion:reduce){.na-product-story__image{transform:none}}
@media print{.na-product-story{height:auto!important}.na-product-story__stage{position:relative!important;height:auto!important;overflow:visible}.na-product-story__benefits,.na-product-story__metrics{position:relative;inset:auto;width:100%;opacity:1!important;transform:none}.na-product-story__explore,.na-product-story__progress{display:none!important}}
.na-product-story__extra,.na-product-purchase{padding:50px max(24px,5vw);max-width:1480px;margin:auto}
.woocommerce .na-framework-product .na-product-purchase .summary{float:none;width:100%;margin:0}
.na-product-purchase{border-top:1px solid #ffffff25}

/* Desktop road uses the framework's 1920px outer canvas independently of the product. */
.na-product-story__backdrop{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;aspect-ratio:1680/1100;overflow:hidden;pointer-events:none}
.na-product-story__visual{z-index:1}
@media(min-width:900px) and (min-height:650px){.na-product-story.is-animated .na-product-story__backdrop{width:min(100%,var(--tns-layout-max,1920px));height:100%;aspect-ratio:auto}}

.na-product-breadcrumbs{padding:20px max(24px,5vw);max-width:var(--tns-layout-max,1920px);margin-inline:auto;box-sizing:border-box}
.na-product-breadcrumbs .c-breadcrumbs{margin:0}