/* WP clear-light presentation. Filter targets media pixels only, not text or hit areas. */
.scene-media{transition:filter 120ms linear}
.caption-meta{gap:12px}
.caption-meta .look-link{color:#efe0c8;white-space:nowrap}
.quality-setting{padding:12px 0;border-bottom:1px solid var(--line)}
.quality-setting>.label{font-size:12px;font-weight:650}
.quality-options{display:flex;gap:4px;margin-top:8px;padding:3px;background:#e9eee4;border-radius:12px}
.quality-options button{flex:1;min-height:40px;border-radius:9px;font-size:11px;padding:6px}
.quality-options button.active{background:#506950;color:#fff}
.look-swatches{display:flex;gap:8px;margin:0 0 12px}
.look-swatch{flex:1;min-width:0;min-height:64px;border-radius:12px;border:1px solid #dfe5d9;display:flex;gap:5px;align-items:center;justify-content:center;flex-direction:column;font-size:11px}
.look-swatch.active{border-color:#506950;background:#edf2e9;box-shadow:inset 0 0 0 1px #506950}
.swatch{width:26px;height:26px;border-radius:50%;display:block;background:linear-gradient(140deg,#d0cec4,#627262)}
.swatch-clear{background:linear-gradient(140deg,#f0f0dc,#84a996)}
.swatch-soft{background:linear-gradient(140deg,#f2e3cc,#ab987b)}
.look-strength{display:block;margin-bottom:10px}
.look-strength>span{display:flex;justify-content:space-between;font-size:11px;color:#6d796a}
.look-strength b{font-weight:500}
.look-strength input{display:block;width:100%;height:28px;margin:2px 0;accent-color:#506950;touch-action:pan-x}
.compare-look{min-height:36px;width:100%;border-radius:10px;border:1px solid #cbd7c6;font-size:11px;margin:0 0 9px}
.compare-look.active{background:#506950;color:white}
.look-facts{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#788374;flex-wrap:wrap;line-height:1.6}
.look-note{font-size:9px;line-height:1.6;color:#7e867c;margin:7px 0 0}
.panel-layer[data-kind="look"]{background:#07100914;backdrop-filter:none;align-items:flex-end}
.panel-layer[data-kind="look"] .panel{width:350px;max-height:min(390px,85%);margin:0 auto;border-radius:22px}
.panel-layer[data-kind="look"] .panel-header{padding:14px 16px 7px}
.panel-layer[data-kind="look"] .panel-header h2{font-size:15px}
.panel-layer[data-kind="look"] .panel-body{padding:10px 16px 16px}
.app-stage[data-layout="mobile"] .panel-layer[data-kind="look"]{padding-left:10px;padding-right:10px}
@media(prefers-reduced-motion:reduce){.scene-media{transition:none}}
