/* Local v12 interaction review. Letter photos retain their full square framing. */
.photo-viewer{position:relative;width:100%;aspect-ratio:1;background:#242831;overflow:hidden;touch-action:pan-y;isolation:isolate}
.photo-viewer>.photo-layer{position:absolute;inset:0;display:block!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;transform:none!important;margin:0;border-radius:0;pointer-events:none;transition:none!important}
.photo-divider{position:absolute;z-index:3;left:clamp(20px,var(--photo-split,0%),calc(100% - 20px));top:0;bottom:0;width:40px;transform:translateX(-50%);cursor:ew-resize;touch-action:none;outline-offset:-4px}
.photo-divider:before{content:'';position:absolute;left:19px;top:0;bottom:0;width:2px;background:#fff9;box-shadow:0 0 5px #0008}
.photo-divider>span{position:absolute;top:48%;left:0;width:40px;height:44px;display:grid;place-items:center;border:1px solid #fff9;background:#07182fdb;border-radius:22px;color:#fff;font-size:20px;letter-spacing:4px;padding-left:4px}
.photo-divider:focus-visible{outline:3px solid #ffad4b}
.photo-controls{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:3px;padding:3px;background:#07182fdd;border-radius:8px;max-width:calc(100% - 12px)}
.photo-controls button{border:1px solid transparent;border-radius:5px;background:transparent;color:#fff;padding:6px 10px;min-height:38px;font-size:.75rem;white-space:nowrap}
.photo-controls button[aria-pressed=true]{background:#275fa5}.photo-controls button:focus-visible{outline:2px solid #ffad4b}
.photo-view-tag{position:absolute;z-index:2;top:10px;font-size:.68rem;color:#fff;background:#07182fc9;padding:4px 7px;border-radius:4px;pointer-events:none}
.photo-day-tag{left:9px}.photo-night-tag{right:9px}.photo-reference{position:absolute;right:10px;bottom:62px;background:#07182fc9;border-radius:4px;padding:3px 6px;font-size:.64rem;color:#e4eaf4;pointer-events:none;z-index:2}
.product-image:has(>.photo-viewer){overflow:visible;aspect-ratio:auto}.product-image:has(>.photo-viewer)>[data-photo-label]{position:static;display:block;background:transparent;color:inherit;font-size:.7rem;padding:7px 10px;margin:0;line-height:1.45}
.sample-card .product-image:has(>.photo-viewer){overflow:hidden}.sample-card .sample-light-label{display:none}
.studio-visual:has(.photo-viewer){display:block;align-self:start}.studio-visual>.photo-viewer{width:100%}.studio-toolbar{position:relative!important;inset:auto!important;background:#102943;padding:9px 12px;gap:8px;align-items:center;z-index:6}
.photo-detail-host{width:min(100%,72vh);margin:0 auto}.photo-detail-host>.photo-viewer{border-radius:8px}.photo-detail-host .photo-layer{border-radius:0}
#zoomCaption{font-size:.82rem;line-height:1.5;margin:12px 0 0;color:#c1d1e4;overflow-wrap:anywhere}
.compare-grid .photo-viewer{width:100%}.compare-grid figure{min-width:0}
/* Reserve vertical room for every desktop selection control. The letter frame
   stays square and contained; short screens or browser zoom can still scroll. */
@media(min-width:761px){
 #compareDialog{padding:14px;max-height:calc(100dvh - 28px)}
 #compareDialog .dialog-head{margin-bottom:8px;gap:12px}
 #compareDialog .dialog-head h2{font-size:1.45rem;line-height:1.2}
 #compareDialog .dialog-head button{min-height:38px;padding:6px 12px}
 #compareDialog .compare-light-all{gap:7px;min-height:36px}
 #compareDialog .compare-light-all>span{font-size:.8rem;margin-right:4px}
 #compareDialog .compare-light-all>button{min-height:36px;padding:5px 12px;font-size:.8rem}
 #compareDialog .compare-grid{margin-top:8px;gap:12px;align-items:start}
 #compareDialog .compare-panel{display:grid;grid-template-columns:92px minmax(0,1fr);gap:6px 10px;padding:12px;align-items:center}
 #compareDialog .compare-panel-head{grid-column:1/-1;margin:0;min-height:36px}
 #compareDialog .compare-panel-head .segmented{padding:2px}
 #compareDialog .compare-panel-head .segmented button{min-height:32px;padding:4px 10px;font-size:.76rem}
 #compareDialog .compare-panel figure{grid-column:1/-1;margin:0;min-width:0}
 #compareDialog .photo-viewer{width:min(100%,370px,max(180px,calc(100dvh - 450px)));margin-inline:auto;aspect-ratio:1}
 #compareDialog .compare-panel figcaption{font-size:.76rem;line-height:1.3;margin-top:5px}
 #compareDialog .compare-panel>label{font-size:.76rem;line-height:1.3;margin:0}
 #compareDialog .compare-panel>select{min-height:36px;height:36px;padding:5px 24px 5px 8px;font-size:.82rem;line-height:1.2;min-width:0}
 #compareDialog .compare-panel>.button{grid-column:1/-1;min-height:40px;margin:2px 0 0;padding:7px 12px;font-size:.82rem}
}
#studioRail{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding:4px 2px 9px;width:min(100%,390px);max-width:100%;min-height:118px}
.finish-thumbnail{flex:0 0 84px;min-width:84px;display:flex;flex-direction:column;align-items:center;scroll-snap-align:start;padding:3px;border:1px solid #4c637b;border-radius:6px;background:#142b45;color:#dce8f7;cursor:pointer}
.finish-thumbnail img{width:78px!important;height:78px!important;object-fit:contain;display:block;aspect-ratio:1}
.finish-thumbnail span{font-size:.66rem;padding:5px 1px}.finish-thumbnail[aria-pressed=true]{border:2px solid #ffae4a;padding:2px}.finish-thumbnail:focus-visible{outline:3px solid #ffae4a;outline-offset:1px}
.studio-rail-controls{display:flex;gap:6px;align-items:center;margin-top:8px}.studio-rail-controls button{min-height:36px;font-size:.72rem;padding:6px 10px}.studio-rail-controls button:disabled{opacity:.4}
@media(max-width:760px){.photo-controls button{min-height:40px;padding:6px 8px}.photo-detail-host{width:min(100%,66vh)}.photo-view-tag{font-size:.62rem}.studio-toolbar{flex-wrap:wrap}.photo-divider>span{width:40px}}
@media(prefers-reduced-motion:reduce){.photo-viewer *{scroll-behavior:auto!important;transition:none!important}#studioRail{scroll-behavior:auto!important}}