/* V5 mobile viewing layer. Original comparison and scene controls stay intact. */
.media-open-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;min-height:44px;padding:8px 14px;border:1px solid #adb1a5;background:transparent;font-size:13px;line-height:1.5;letter-spacing:.02em;color:var(--ink)}
.media-open-button:hover{background:#292c2908}
.media-open-button>span{font-size:16px}
.comparison-bottom{align-items:center;flex-wrap:wrap}
.comparison-bottom .media-open-button{margin-left:auto}
.room-media-button{position:absolute;top:18px;left:20px;z-index:2;color:#fff;border-color:#ffffff80;background:#1116106b}
.room-media-button:hover{background:#11161099}
.product-stage-open{position:absolute;right:20px;top:14px;z-index:2;background:#eeeee7ed;border-color:#b9beaf}
.product-stage .stage-label{max-width:calc(100% - 148px)}
.product-family .media-open-button{width:100%;margin-top:12px;font-size:12px;padding-inline:6px;gap:6px}
.retrofit-comparison{margin-top:58px}
.retrofit-heading{display:flex;align-items:baseline;justify-content:space-between;gap:22px;margin-bottom:22px}
.retrofit-heading h3{font-size:30px}
.retrofit-heading>p{font-size:13px;color:var(--muted);flex-shrink:0}
.retrofit-photo{position:relative;aspect-ratio:4/3;max-height:680px;overflow:hidden;background:#e7e5dd}
.retrofit-photo>img{width:100%;height:100%;object-fit:contain}
.retrofit-photo figcaption{position:absolute;left:20px;bottom:18px;padding:4px 12px;background:#10141094;color:#fff;font-size:13px;line-height:1.7}
.retrofit-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px}
.retrofit-switch{display:flex;border:1px solid #adb1a5;padding:3px;gap:3px}
.retrofit-switch button{background:transparent;min-width:88px;min-height:42px;padding:8px 17px;font-size:13px;line-height:1.5;color:var(--muted)}
.retrofit-switch button[aria-pressed="true"]{background:var(--charcoal);color:#f6f4ef}
.sufn-selection{margin-top:70px;padding-top:46px;border-top:1px solid var(--line)}
.sufn-heading .eyebrow{margin-bottom:16px}
.sufn-heading h3{font-size:34px}
.sufn-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;margin-top:34px}
.sufn-product{min-width:0}
.sufn-image-button{position:relative;display:block;width:100%;aspect-ratio:1;padding:42px;background:#fff;overflow:hidden}
.sufn-image-button>img{width:100%;height:100%;object-fit:contain;transition:transform .25s ease}
.sufn-image-button:hover>img{transform:scale(1.02)}
.media-inline-label{position:absolute;bottom:17px;right:20px;display:inline-flex;gap:10px;align-items:center;font-size:12px;color:#5c645b;padding:4px 0}
.sufn-product figcaption{padding-top:20px}
.product-brand{font-size:12px;color:var(--muted);letter-spacing:.09em;line-height:1.6}
.sufn-product h4{font-weight:400;font-size:24px;line-height:1.5;margin:7px 0 0;font-family:var(--serif)}
.sufn-product h4 small{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:12px;margin-left:10px;color:var(--muted)}
.sufn-product-copy{font-size:14px;color:var(--muted);line-height:1.9;margin-top:10px;max-width:470px}
.sufn-product-copy:empty{display:none}
.visit-open-button{display:inline-flex;align-items:center;gap:12px;background:transparent;border:1px solid #969f8c;min-height:44px;padding:8px 16px;font-size:13px;line-height:1.5;margin-top:8px}
.visit-open-button:hover{background:#292c2908}
.visit-picker,.media-viewer{position:fixed;inset:0;z-index:120;width:100%;height:100vh;height:100svh;height:100dvh;overscroll-behavior:contain}
.visit-picker[hidden],.media-viewer[hidden]{display:none!important}
.visit-picker{display:flex;align-items:center;justify-content:center;background:#10150fcc;padding:24px max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));overflow:auto}
.visit-picker-content{width:100%;max-width:450px;min-height:0;max-height:100%;overflow:auto;overscroll-behavior:contain;background:var(--paper);padding:28px;box-shadow:0 12px 70px #0004}
.overlay-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.overlay-heading h2{font-size:25px;line-height:1.5}
.overlay-close{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;font-family:Arial,sans-serif;font-size:27px;line-height:1;background:transparent;border:1px solid #868f8066;color:inherit}
.visit-address{font-size:16px;color:var(--muted);line-height:1.8;margin-top:24px}
.visit-copy-address{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:7px 13px;border:1px solid #b3b9aa;background:transparent;font-size:12px;line-height:1.6;margin-top:13px}
.visit-picker-status{font-size:12px;line-height:1.7;color:#53624b;margin-top:9px}
.visit-picker-status:empty{display:none}
.map-providers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}
.map-providers a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;border:1px solid #b3b9aa;background:#fff;font-size:15px;line-height:1.6}
.map-providers a:hover{border-color:#6a7562}
.visit-tip{font-size:12px;line-height:1.8;color:var(--muted);margin-top:18px}
.visit-phone{display:inline-block;min-height:44px;margin-top:12px;padding:8px 0;font-size:14px;line-height:1.8;border-bottom:1px solid #aab2a1}
.media-viewer{display:flex;flex-direction:column;background:#10140f;color:#f6f4ef;overflow:hidden;padding-top:env(safe-area-inset-top,0px);isolation:isolate}
.media-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex:0 0 auto;min-height:64px;padding:10px max(20px,env(safe-area-inset-right,0px)) 10px max(20px,env(safe-area-inset-left,0px))}
.media-viewer-bar>p{font-size:14px;line-height:1.6;letter-spacing:.02em;min-width:0}
.media-viewer .overlay-close{border-color:#ffffff50;background:#ffffff08;color:#f6f4ef}
.media-viewer-stage{position:relative;display:grid;place-items:center;flex:1 1 auto;width:100%;min-height:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.media-viewer-stage[data-media-zoomed="true"]{cursor:move}
#media-viewer-picture{position:relative;width:100%;height:auto;aspect-ratio:var(--media-aspect,16 / 9);overflow:hidden;flex-shrink:0;transform-origin:center center;will-change:transform}
#media-viewer-image{display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
.media-picture-single .media-image-single{width:100%;height:100%;object-fit:contain}
.media-picture-p8 .media-image-p8{position:absolute;top:0;left:var(--media-image-left,0%);width:var(--media-image-width,200.316456%);max-width:none;height:100%;object-fit:fill}
.media-viewer-controls{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;gap:9px;padding:14px max(18px,env(safe-area-inset-right,0px)) max(15px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));border-top:1px solid #ffffff18;background:#10140f}
.media-viewer-options{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;min-height:0}
.media-viewer-options:empty{display:none}
.media-viewer-options button{min-height:44px;min-width:70px;padding:8px 14px;border:1px solid #ffffff38;background:#ffffff05;color:#ced4c8;font-size:13px;line-height:1.5}
.media-viewer-options button[aria-pressed="true"],.media-viewer-options .media-option-selected{color:#fff;border-color:#d1b47c;background:#d1b47c20}
.media-zoom{display:flex;align-items:center;justify-content:center;gap:7px}
.media-zoom button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px 14px;border:1px solid #ffffff38;background:transparent;color:#f6f4ef;font-size:15px;line-height:1.5}
.media-zoom button[data-media-zoom="in"],.media-zoom button[data-media-zoom="out"]{font-size:21px;padding:5px 12px}
.media-zoom button:disabled{opacity:.38;cursor:default}
.media-viewer-status{font-size:12px;line-height:1.6;min-height:19px;color:#d2d6cd;text-align:center}
.media-viewer-tip{font-size:12px;line-height:1.6;color:#9fa897;text-align:center}
body.media-viewer-open .mobile-bottom-nav,body.visit-picker-open .mobile-bottom-nav,body:has(#media-viewer:not([hidden])) .mobile-bottom-nav,body:has(#visit-picker:not([hidden])) .mobile-bottom-nav{visibility:hidden}
@media(max-width:720px){
  body[data-mobile-view="lighting"] #lighting,body[data-mobile-view="smart"] #smart{padding-block:26px 48px}
  #lighting .section-heading,#smart .section-heading{margin-bottom:22px}
  #lighting .section-heading .eyebrow,#smart .section-heading .eyebrow{margin-bottom:10px}
  #lighting .section-heading h2,#smart .section-heading h2{font-size:28px;line-height:1.4}
  #lighting .section-intro,#smart .section-intro{margin-top:14px;font-size:15px;line-height:1.85}
  #lighting .lighting-comparison,#lighting .retrofit-photo,#smart .room-viewer{width:calc(100% + 40px);margin-left:-20px;max-width:none}
  #smart .room-viewer{aspect-ratio:4/3}
  #smart .room-layer{object-fit:cover;object-position:center}
  .comparison-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:12px}
  .comparison-bottom>p:first-child{font-size:12px;line-height:1.8}
  .comparison-bottom .media-open-button{margin:0;padding-inline:11px}
  .room-media-button{left:14px;top:12px;min-height:42px;padding:8px 12px;font-size:12px}
  .product-stage-open{right:14px;top:14px;padding-inline:11px;font-size:12px}
  #smart .room-caption{padding:50px 20px 16px}
  #smart .room-caption p{max-width:100%}
  #smart .controller{padding-top:22px}
  .retrofit-comparison{margin-top:34px}
  .retrofit-heading{display:block;margin-bottom:18px}
  .retrofit-heading h3{font-size:25px;line-height:1.55}
  .retrofit-heading>p{font-size:12px;margin-top:9px;line-height:1.7}
  .retrofit-photo{aspect-ratio:4/3}
  .retrofit-photo figcaption{left:14px;bottom:14px;font-size:12px}
  .retrofit-actions{gap:12px;margin-top:13px}
  .retrofit-switch button{min-width:76px;padding-inline:12px}
  .retrofit-actions .media-open-button{padding-inline:11px}
  .lighting-values{margin-top:32px}
  .sufn-selection{margin-top:42px;padding-top:30px}
  .sufn-heading .eyebrow{margin-bottom:12px}
  .sufn-heading h3{font-size:27px;line-height:1.55}
  .sufn-products{grid-template-columns:1fr;gap:32px;margin-top:25px}
  .sufn-image-button{aspect-ratio:1;padding:36px}
  .sufn-product figcaption{padding-top:16px}
  .sufn-product h4{font-size:23px}
  .sufn-product-copy{font-size:14px;margin-top:8px}
  .visit-picker{padding:calc(18px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
  .visit-picker-content{padding:23px}
  .overlay-heading h2{font-size:23px}
  .map-providers{gap:10px}
  .map-providers a{padding-inline:13px;font-size:14px}
  .media-viewer-bar{min-height:60px;gap:12px;padding:8px max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px))}
  .media-viewer-bar>p{font-size:13px}
  .media-viewer-controls{gap:8px;padding-top:12px}
  .media-viewer-options{gap:7px}
  .media-viewer-options button{min-width:66px;padding-inline:12px}
}
@media(orientation:landscape) and (max-height:560px){
  .media-viewer-bar{min-height:48px;padding-block:4px}
  .media-viewer-bar .overlay-close{width:40px;height:40px}
  .media-viewer-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 20px;padding-top:6px;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
  .media-viewer-options{grid-column:1;grid-row:1;justify-content:flex-start}
  .media-zoom{grid-column:2;grid-row:1}
  .media-viewer-status{grid-column:1;grid-row:2;text-align:left}
  .media-viewer-tip{grid-column:2;grid-row:2;font-size:11px;text-align:right}
}
@media(prefers-reduced-motion:reduce){.sufn-image-button>img{transition:none}}

/* Scene changes link lighting and music; playback has a compact pause control. */
.header-contact{display:grid;grid-template-columns:17px auto;column-gap:7px;row-gap:1px;align-items:center;min-height:49px;padding:7px 14px;background:#eee9dd;color:#514934;border-color:#a69a80;cursor:pointer}
.header-contact .visit-pin{width:17px;height:21px;grid-column:1;grid-row:1/3}
.visit-action-title{font-size:13px;line-height:1.5}
.visit-action-title>span{margin-left:4px;font-size:12px}
.header-contact small{grid-column:2;font-size:10px;line-height:1.4;color:#756c5a;letter-spacing:.02em}
.header-contact:hover{background:#33382e;color:#faf8f1;border-color:#33382e}
.header-contact:hover small{color:#e0dfd2}
.header-contact:focus-visible,.scene-music-toggle:focus-visible{outline:2px solid #b59156;outline-offset:3px}
.room-layer{transition:opacity .95s ease-in-out;will-change:opacity}
.room-caption{z-index:4}
.room-viewer>.image-disclaimer,.room-media-button{z-index:5}
#media-viewer-picture[data-media-kind="smart"] .media-smart-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .95s ease-in-out;will-change:opacity}
#media-viewer-picture[data-media-kind="smart"] .media-smart-layer.is-visible{opacity:1}
.media-smart-layer[hidden]{display:none!important}
.scene-music-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:110px;padding:8px 13px;border:1px solid #87907a;background:transparent;color:var(--ink);font-size:13px;line-height:1.6;flex-shrink:0}
.scene-music-toggle[aria-pressed="true"]{background:#343b30;color:#f8f7ef}
.scene-music-toggle:disabled{opacity:.65;cursor:default}
.controller-panel{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:12px}
.room-music-control{min-height:40px;width:100%}
.room-music-control:not(:disabled):hover{border-color:#514934}
#smart .controller-brand{margin-top:4px}
.music-status-accessible{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.viewer-scene-music{display:flex;align-items:center;justify-content:center;gap:16px}
.viewer-scene-music[hidden]{display:none!important}
.viewer-scene-music .scene-music-toggle{color:#e4e9dc;border-color:#ffffff40;background:#ffffff08;min-height:40px;font-size:12px}
.viewer-scene-music .scene-music-toggle[aria-pressed="true"]{background:#d1b47c20;border-color:#d1b47c;color:#fff}
@media(max-width:720px){
  .header-contact{min-height:47px;padding:6px 10px;column-gap:6px}
  .controller-panel{gap:10px}
  .room-music-control{min-width:96px;min-height:42px;font-size:12px;padding:8px 12px}
  #smart .section-heading{margin-bottom:24px}
}
@media(max-width:350px){.header-contact{padding-inline:8px}.visit-action-title{font-size:12px}.header-contact small{font-size:9px}}
@media(orientation:landscape) and (max-height:560px){
  .viewer-scene-music{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:12px}
  .media-viewer-status{grid-row:3}
  .media-viewer-tip{grid-row:3}
  .viewer-scene-music .scene-music-toggle{min-height:34px;padding-block:4px}
}
@media(prefers-reduced-motion:reduce){.room-layer,#media-viewer-picture[data-media-kind="smart"] .media-smart-layer{transition:none}}