.hc-lighting{padding-block:var(--lighting-space);color:var(--hc-text)}
.hc-lighting[data-background="color"]{background:var(--hc-background-fill)}
.hc-lighting__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:center}
.hc-lighting__eyebrow{font-size:11px;line-height:1.5;letter-spacing:.13em;margin:0 0 20px;color:var(--hc-muted)}
.hc-lighting__text{margin-top:14px;font-size:var(--body-font-size);line-height:1.55;max-width:30ch}
.hc-lighting__text p{margin:0}
.hc-lighting__note{margin:28px 0 0;font-size:12px;line-height:1.5;color:var(--hc-muted);max-width:30ch}
.hc-lighting__compare{display:block;min-width:0}
.hc-lighting__stage{display:grid;grid-template-columns:1fr 1fr;position:relative;isolation:isolate;overflow:hidden;border:1px solid color-mix(in srgb,var(--hc-accent) 45%,transparent);border-radius:var(--button-radius);background:var(--hc-background-fill)}
.hc-lighting__layer{position:relative;min-width:0;aspect-ratio:3/2}
.hc-lighting__layer picture{display:block;width:100%;height:100%}
.hc-lighting__layer img,.hc-lighting__layer svg{width:100%;height:100%;display:block;object-fit:var(--lighting-fit)}
.hc-lighting__stage--single{grid-template-columns:1fr}
.hc-lighting__label{position:absolute;top:14px;left:14px;max-width:calc(100% - 28px);padding:6px 10px;border:1px solid #ffffff30;border-radius:6px;background:#032626b3;color:var(--hc-text);font-size:11px;line-height:1.3;overflow-wrap:anywhere;pointer-events:none}
.hc-lighting__after .hc-lighting__label{left:auto;right:14px}
.hc-lighting__compare.is-ready .hc-lighting__stage{display:block;aspect-ratio:3/2}
.hc-lighting__compare.is-ready .hc-lighting__layer{position:absolute;inset:0;aspect-ratio:auto}
.hc-lighting__compare.is-ready .hc-lighting__after{clip-path:inset(0 0 0 var(--lighting-position))}
.hc-lighting__divider{position:absolute;inset:0 auto 0 var(--lighting-position);width:2px;background:#e3f3ebcc;transform:translateX(-50%);pointer-events:none}
.hc-lighting__divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--hc-text);border-radius:50%;background:#073331cc;color:var(--hc-text);font-size:26px;word-spacing:5px;box-shadow:0 2px 14px #0004}
.hc-lighting__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;direction:ltr}
.hc-lighting__stage:has(.hc-lighting__range:focus-visible){outline:2px solid var(--hc-focus);outline-offset:4px}
.hc-lighting__compare.is-transitioning .hc-lighting__after{transition:clip-path .45s ease}
.hc-lighting__compare.is-transitioning .hc-lighting__divider{transition:left .45s ease}
.hc-lighting__controls{display:flex;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.hc-lighting__controls button{min-height:40px;padding:8px 16px;border:1px solid var(--hc-secondary-button-border);border-radius:var(--button-radius);background:var(--hc-secondary-button-background);color:var(--hc-secondary-button-text);font-family:inherit;font-size:13px;font-weight:400;cursor:pointer;transition:background .25s,border-color .25s}
.hc-lighting__controls button[aria-pressed="true"]{background:var(--hc-button-background);border-color:var(--hc-button-border);color:var(--hc-button-text)}
.hc-lighting__controls button:hover{border-color:var(--hc-accent)}
.hc-lighting [hidden]{display:none}
@media(max-width:749px){
 .hc-lighting{padding-block:calc(var(--lighting-space) * .7)}
 .hc-lighting__layout{grid-template-columns:minmax(0,1fr);gap:20px}
 .hc-lighting__eyebrow{font-size:10px;margin-bottom:12px}
 .hc-lighting__text{margin-top:10px;font-size:14px;max-width:none}
 .hc-lighting__note{margin-top:12px;max-width:none}
 .hc-lighting__compare.is-ready .hc-lighting__stage{aspect-ratio:4/3}
 .hc-lighting__layer img{object-position:var(--lighting-focus-mobile)!important}
 .hc-lighting__label{top:10px;left:10px;padding:5px 8px;font-size:10px}
 .hc-lighting__after .hc-lighting__label{right:10px}
 .hc-lighting__divider span{width:44px;height:44px}
 .hc-lighting__controls{gap:6px;margin-top:12px}
 .hc-lighting__controls button{min-height:44px;padding:8px 12px;flex:1;font-size:12px}
}
