[data-lc] .lc-box { position: relative; display: block; overflow: hidden; }
[data-lc] .lc-box img.lc-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; opacity: 0; pointer-events: none; }
[data-lc] .lc-box img.lc-layer.lc-on { opacity: 1; }
[data-lc].lc-fade .lc-box img.lc-layer { transition: opacity .7s ease; }
[data-lc] .lc-dots { display: flex; justify-content: center; gap: 8px; margin: 6px 0 4px; min-height: 18px; }
[data-lc] .lc-dot { width: 14px; height: 14px; border-radius: 50%; padding: 0; margin: 2px 0; cursor: pointer; border: 1px solid rgba(0, 0, 0, .25); box-shadow: 0 0 0 2px #fff; outline: none; }
[data-lc] .lc-dot.lc-cur { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #8f7d47; }
[data-lc] .lc-dot[data-k=white] { background: linear-gradient(135deg, #f4f4f4, #cfcfd2); }
[data-lc] .lc-dot[data-k=yellow] { background: linear-gradient(135deg, #f3dc8e, #c9a347); }
[data-lc] .lc-dot[data-k=rose] { background: linear-gradient(135deg, #f3c9b8, #c98b74); }
[data-lc] .lc-dot[data-k=platinum] { background: linear-gradient(135deg, #eceef1, #a9adb5); }
@media (prefers-reduced-motion: reduce) {
    [data-lc] .lc-box img.lc-layer { transition: none; }
}
[data-lc][data-lc-dots="0"] .lc-dots { display: none; }