/* Final renders: preserve the whole structure and use a dedicated mobile source. */
.hero .photo-window{height:auto;aspect-ratio:16/9}
.hero .photo-window picture{display:block;width:100%;height:100%}
.hero .photo-window img{object-fit:cover;object-position:center;transform:none!important;will-change:auto}
.product .scene-map{aspect-ratio:4/3;background:#e0e3e0;border:1px solid #ffffff14;border-radius:4px}
.product .scene-base{filter:none;object-fit:contain}
.product .detail-leaders{display:block}
.product .detail-leaders line{stroke:#53605e;stroke-width:1px;vector-effect:non-scaling-stroke}
.product .detail-leaders circle{fill:#53605e;stroke:#eef0eb;stroke-width:1px;vector-effect:non-scaling-stroke}
.product .detail-leaders .is-active line{stroke:#91733d;stroke-width:1.5px}
.product .detail-leaders .is-active circle{fill:#91733d}
.product .hotspots button{width:44px;height:44px;min-width:44px;min-height:44px;background:transparent;border:0;box-shadow:none;isolation:isolate;color:#38403e;left:var(--mx);top:var(--my)}
.product .hotspots button::before{content:"";position:absolute;inset:7px;background:#f7f8f3f5;border:1px solid #78817b;border-radius:50%;z-index:-1;transition:background .2s,border-color .2s,box-shadow .2s}
.product .hotspots button[aria-pressed=true]::before{background:#e1d1ad;border-color:#927440;box-shadow:0 0 0 4px #92744018}
.product .hotspots button:hover::before{background:#e8deca;border-color:#927440}
.product .hotspots button span{font-size:12px;font-weight:600}
.product .hotspots button b{left:calc(100% - 1px);font-size:12px;box-shadow:0 2px 10px #26332810}
.product .hotspots button[data-point=drain] b{left:auto;right:calc(100% - 1px)}
.product .hotspots button:focus-visible{outline:2px solid #7c622e;outline-offset:0;border-radius:50%}
.product .detail-focus{position:relative;top:auto;right:auto;width:100%;max-width:none;margin:24px 0 0;padding:12px;box-shadow:none;background:#f0f2ed;border:1px solid #ffffff26;display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:14px;align-items:center}
.product .detail-focus .focus-top{grid-column:2;grid-row:1;padding:0;min-width:0;font-size:13px}
.product .detail-focus #inspect-img{grid-column:1;grid-row:1/3;width:112px;height:100px;object-fit:cover;border-radius:2px}
.product .detail-focus.drain #inspect-img{object-fit:contain}
.product .detail-focus #enlarge{grid-column:2;grid-row:2;min-height:44px;padding:8px 0;font-size:12px;gap:8px;text-align:left}
.product #close-focus{flex-shrink:0;min-width:44px;min-height:44px}
@media(max-width:760px){
 .hero .photo-window{aspect-ratio:3/4}
 .hero .photo-window img{object-fit:contain}
 .product .hotspots button{border:0;box-shadow:none}
 .product .detail-focus{margin-top:20px;grid-template-columns:96px minmax(0,1fr);gap:0 12px}
 .product .detail-focus #inspect-img{width:96px;height:100px}
}
@media(prefers-reduced-motion:reduce){.product .hotspots button::before{transition:none}}
/* Let enlarged labels wrap into additional rows without colliding. */
@media(max-width:760px){
 .product .tabs{display:flex;flex-wrap:wrap;gap:0 16px}
 .product .tabs button{flex:1 1 auto;max-width:100%;overflow-wrap:anywhere}
}
.product .detail-focus #enlarge{min-width:0;overflow-wrap:anywhere}
.product .detail-focus #enlarge span{flex-shrink:0}
.hero .hero-aside .text-link{min-width:0;overflow-wrap:anywhere}