/* JPT100J / JPT7080J product pages: controller film (front view), size figure, far-infrared data, safety notes. Claude 2026-11-07.
   Paper ground, hairlines, vermilion accents: the same language as the technology page. */
.pad-mod{--ink:#292929;--mute:#686868;--note:#5f5c57;--line:#dcd9d1;--shu:#c7401f;--shu2:#d6492a;--paper:#f7f6f2;--sans:JPHEATLatin,JPHEATJP,JPHEATHan,sans-serif}
.pad-mod .pdp-eyebrow{color:var(--shu)}
.pad-note{font-size:12px;line-height:1.9;color:var(--note);letter-spacing:.02em}

/* ---- controller film ---- */
.cf{padding:90px 0}
.cf-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px 5%;align-items:start}
.cf-head{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:end;margin-bottom:8px}
.cf-head h2{font-weight:400;font-size:clamp(26px,2.6vw,40px);line-height:1.6;letter-spacing:.04em;margin:14px 0 0}
.cf-head p{font-size:13px;line-height:2.2;color:var(--mute);margin:0}
.cf-stage{position:relative;aspect-ratio:16/9;background:#f1ede6;overflow:hidden}
.cf-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cf-stage::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--shu2);transform:scaleX(var(--cf-progress,0));transform-origin:0 50%}
.cf-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0 0;font-size:11px;color:var(--mute);letter-spacing:.06em}
.cf-bar button{background:transparent;border:0;border-bottom:1px solid #ababab;color:#747474;font:10px var(--sans);letter-spacing:.06em;padding:3px 0 7px;cursor:pointer}
.cf-caption{min-height:2.2em;margin:10px 0 0;font-size:13px;line-height:1.9;color:var(--ink)}
.cf-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:0 16px;margin:26px 0 0;padding:0;list-style:none}
.cf-keys li{border-top:1px solid var(--line);padding:14px 0 0}
.cf-keys button{display:block;width:100%;text-align:left;background:transparent;border:0;padding:0;cursor:pointer;color:var(--ink);font-family:var(--sans)}
.cf-keys i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:-2px;border:1px solid #9b8f8a}
.cf-keys [data-cf-key="power"] i{background:#e04a3f;border-color:#c03a31}.cf-keys [data-cf-key="timer"] i{background:#3c3c3c;border-color:#2a2a2a}.cf-keys [data-cf-key="minus"] i{background:#f0a6b4;border-color:#d98596}.cf-keys [data-cf-key="plus"] i{background:#e87c8c;border-color:#c9606f}
.cf-keys b{font-weight:400;font-size:14px;letter-spacing:.06em}
.cf-keys small{display:block;font-size:11px;line-height:1.8;color:var(--mute);margin-top:6px;letter-spacing:.02em}
.cf-keys button.is-on b{color:var(--shu)}
.cf-keys button.is-on i{box-shadow:0 0 0 3px rgba(214,73,42,.22)}
.cf-steps{display:grid;gap:0;margin:0;padding:0;list-style:none}
.cf-steps button{display:grid;grid-template-columns:92px 1fr;gap:12px;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--line);padding:18px 0 20px;cursor:pointer;color:var(--ink);font-family:var(--sans)}
.cf-steps button span{font-size:10px;letter-spacing:.16em;color:#8f8f8f;padding-top:5px}
.cf-steps button[aria-pressed="true"] span{color:var(--shu)}
.cf-steps h3{margin:0 0 8px;font-weight:400;font-size:17px;letter-spacing:.04em;line-height:1.6}
.cf-steps p{margin:0;font-size:12.5px;line-height:2;color:var(--mute)}
.cf-range{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.cf-range span{display:block;font-size:10px;letter-spacing:.14em;color:#8f8f8f;margin-bottom:8px}
.cf-range strong{display:block;font-weight:300;font-size:30px;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.cf-range strong small{font-size:13px;margin-left:6px;color:var(--mute)}
.cf-range p{margin:6px 0 0;font-size:11px;color:var(--mute)}

/* ---- size figure ---- */
.pad-size{padding:90px 0}
.pad-size-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px 6%;align-items:center}
.pad-size-fig{position:relative;margin:0}
.pad-size-fig img{display:block;width:100%;height:auto}
.pad-size-fig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pad-size-fig svg line{stroke:var(--shu2);stroke-width:2;vector-effect:non-scaling-stroke;stroke-width:1.2px}
.pad-size-fig svg text{font-family:var(--sans);fill:var(--shu);letter-spacing:.04em}
.pad-size-fig svg .pad-size-pill{fill:rgba(247,246,242,.92)}
.pad-size-fig figcaption{margin-top:12px}
.pad-size-copy h2{font-weight:400;font-size:clamp(26px,2.6vw,40px);line-height:1.6;letter-spacing:.04em;margin:14px 0 18px}
.pad-size-copy p{font-size:13px;line-height:2.2;color:var(--mute);margin:0}
.pad-size-dims{display:flex;gap:36px;margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.pad-size-dims span{display:block;font-size:10px;letter-spacing:.14em;color:#8f8f8f;margin-bottom:8px}
.pad-size-dims strong{display:block;font-weight:300;font-size:30px;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.pad-size-dims strong small{font-size:13px;margin-left:6px;color:var(--mute)}

/* ---- far-infrared data (reuses the technology page's figures inside .fir-science) ---- */
.pad-fir{padding:90px 0 80px;background:var(--paper)}
#fir-data .fir-section{padding:70px max(5vw,24px)}
#fir-data .fir-section.single-wrap{padding:0}
#fir-data .pad-fir-intro .fir-heading-row{margin-bottom:0}
#fir-data .fir-wavelength{margin-top:60px}
#fir-data .fir-evidence{margin-top:0;padding-top:70px;padding-bottom:0}
.pad-fir .fir-heading-row{margin-bottom:46px}
.pad-fir .pad-fir-foot{max-width:1400px;margin:36px auto 0;padding-top:26px;border-top:1px solid #d9dfd8;display:grid;grid-template-columns:1fr auto;gap:14px 40px;align-items:baseline}
.pad-fir .pad-fir-foot .pad-note{grid-column:1/-1;margin:0}
.pad-fir .pad-fir-foot .pad-um{margin:0}
.pad-fir-link{display:inline-block;font-size:12px;letter-spacing:.06em;color:var(--shu);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;white-space:nowrap}
.pad-fir figcaption{font-size:12px;color:var(--note);line-height:1.9}

/* ---- utility model, safety ---- */
.pad-um{margin:18px 0 0;font-size:12px;line-height:1.9;color:var(--note)}
.pad-um span{display:inline-block;margin-left:12px;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.pad-safety{padding:40px 0 10px;border-top:1px solid var(--line);margin-top:40px}
.pad-safety h3{margin:0 0 14px;font-weight:400;font-size:14px;letter-spacing:.08em;color:var(--ink)}
.pad-safety ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;max-width:900px}
.pad-safety li{position:relative;padding-left:16px;font-size:12px;line-height:1.9;color:var(--note)}
.pad-safety li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:1px;background:var(--shu2)}

/* ---- the home 01–04 module, untouched by the product theme ---- */
.single-product .technology-story .tech-scroll-story{background:#eceeeb}
.single-product .technology-story .tech-sticky{background:radial-gradient(ellipse at 32% 50%,#fafbf8 0%,#eff1ee 48%,#e7eae6 100%)}

@media(max-width:1000px){.cf-grid{grid-template-columns:1fr}.cf-head{grid-template-columns:1fr;gap:12px}.pad-size-grid{grid-template-columns:1fr}}
@media(max-width:640px){.cf,.pad-size,.pad-fir{padding:60px 0}.cf-keys{grid-template-columns:1fr 1fr;gap:16px}.cf-range,.cf-range.is-3{grid-template-columns:1fr}.pad-size-dims{gap:24px}#fir-data .fir-section{padding:50px 24px}#fir-data .fir-wavelength{margin-top:40px}#fir-data .fir-evidence{padding-top:50px}.pad-fir .pad-fir-foot{grid-template-columns:1fr}}

/* ---- controller scene: the model's hand (photo) → the camera pushes in and straightens → the controller front (photo)
   with the display, lamps and key presses drawn on top. Both layers are driven per frame by controller-scene.js. ---- */
.cs-stage{position:relative;aspect-ratio:3/4;background:#fefefe;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(41,45,42,.06)}
/* a film without an opener sits on the page as a photo of the controller, not as a card: edges melt into the ground */
.cs-stage[data-cs-intro="0"]{background:transparent;box-shadow:none;overflow:visible}
.cs-stage[data-cs-intro="0"] .cs-layer{-webkit-mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,0) 97%);mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,0) 97%)}
.cs-stage[data-cs-intro="0"] .cs-layer .cs-photo{object-fit:contain;filter:drop-shadow(0 22px 26px rgba(41,45,42,.14)) drop-shadow(0 2px 4px rgba(41,45,42,.08))}
.cs-stage[data-cs-intro="0"] .cs-caption{left:4%;right:4%;bottom:2%}
.cs-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cs-stage [data-cs-hand]{will-change:transform,opacity}
.cs-layer{position:absolute;inset:0;transform-origin:50% 42%;opacity:0;will-change:transform,opacity}
.cs-overlay{position:absolute;inset:0;opacity:0;pointer-events:none}
.cs-display{position:absolute;background:#121212;border-radius:2.5%/5%;box-shadow:inset 0 0 0 1px #000,inset 0 4px 10px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;gap:9%}
.cs-digit{width:33%;height:71%;transform:skewX(-7deg)}
.cs-digit svg{width:100%;height:100%;display:block;overflow:visible}
.cs-digit [data-seg]{fill:#232823;transition:fill .08s}
.cs-digit [data-seg].on{fill:#4cff6a;filter:drop-shadow(0 0 2px rgba(76,255,106,.9))}
.cs-lamp{position:absolute;width:2.4%;aspect-ratio:1;border-radius:50%;background:#5dff7f;box-shadow:0 0 5px 2px rgba(93,255,127,.75);transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}
.cs-lamp.on{opacity:1}
.cs-press{position:absolute;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);--p:0}
.cs-press::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,calc(.30*var(--p)));box-shadow:inset 0 2px 4px rgba(0,0,0,calc(.5*var(--p)))}
.cs-press::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 2px rgba(214,73,42,.65),0 0 14px rgba(214,73,42,.35);opacity:var(--p);transform:scale(calc(.9 + .55*var(--p)))}
.cs-lamp--cover{opacity:1;background:var(--off);box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.cs-lamp--cover.on{background:#5dff7f;box-shadow:0 0 5px 2px rgba(93,255,127,.75)}
.cf-range.is-3{grid-template-columns:repeat(3,1fr);gap:18px}
.cf-range span svg{width:18px;height:18px;stroke:var(--shu);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;vertical-align:-5px;margin-right:7px}
.cs-caption{position:absolute;left:6%;right:6%;bottom:5%;margin:0;padding:10px 16px;background:rgba(30,26,24,.72);color:#fff;font-size:15px;line-height:1.7;letter-spacing:.04em;border-radius:3px;backdrop-filter:blur(2px)}
.cs-caption.is-in{animation:cs-cap .45s cubic-bezier(.23,1,.32,1)}
@keyframes cs-cap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cf-grid.cs-grid{grid-template-columns:.62fr 1fr;align-items:start}
.cf-grid.cs-grid .cf-keys{grid-template-columns:1fr 1fr}
/* hero photo: smaller and with air around it */
.single-product .single-hero-grid .single-product-photo{width:86%;margin:0 auto;padding:30px 0}
.single-product .single-hero-grid .single-product-photo>img{max-height:470px}
@media(max-width:1000px){.cf-grid.cs-grid{grid-template-columns:1fr}.cs-stage{max-width:520px;margin:0 auto}}
@media(max-width:640px){.cs-caption{font-size:13px;padding:8px 12px}}