.smc-lightbox { box-sizing: border-box; position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 58px 64px 70px; border: 0; background: transparent; color: #fff; overflow: hidden; }
.smc-lightbox[open] { display: flex; flex-direction: column; }
.smc-front-dialog.smc-lightbox::backdrop { background: rgb(0 0 0 / .88); }
.smc-lightbox *, .smc-lightbox *::before { box-sizing: border-box; }
.smc-lightbox-bar { position: absolute; inset: 8px 12px auto; display: flex; align-items: center; gap: 2px; min-height: 44px; }
.smc-lightbox-count { flex: 1; padding-left: 8px; font: 13px/1.5 Arial, sans-serif; color: #ccc; }
.smc-lightbox-controls { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 8px 16px; background: #000; border-top: 1px solid #252525; }
.smc-lightbox-stage { display: flex; align-items: center; flex: 1; min-height: 0; }
.smc-lightbox-viewport { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; overflow: hidden; touch-action: none; }
.smc-lightbox-viewport.is-grab .smc-lightbox-image { cursor: grab; }
.smc-lightbox-viewport.is-grabbing, .smc-lightbox-viewport.is-grabbing .smc-lightbox-image { cursor: grabbing; }
.smc-lightbox .smc-lightbox-image { display: block; flex: none; max-width: none; max-height: none; object-fit: contain; pointer-events: auto; user-select: none; -webkit-user-drag: none; touch-action: none; opacity: 0; transition: opacity var(--smc-lightbox-duration, 100ms) ease; }
.smc-lightbox.has-image .smc-lightbox-image { opacity: 1; }
.smc-lightbox .smc-lightbox-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 6px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #ddd; font: 24px/1 Arial, sans-serif; cursor: pointer; text-decoration: none; }
.smc-lightbox .smc-lightbox-button[hidden] { display: none; }
.smc-lightbox .smc-lightbox-button:not(:disabled):hover { background: transparent; color: var(--smc-accent, var(--awb-color4, #e4002b)); }
.smc-lightbox .smc-lightbox-button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.smc-lightbox .smc-lightbox-button:disabled { opacity: .35; cursor: default; }
.smc-lightbox .smc-lightbox-button[data-smc-lightbox="reset"] { font-size: 16px; min-width: 64px; }
.smc-lightbox .smc-lightbox-button[data-smc-image-step] { position: absolute; top: 50%; transform: translateY(-50%); font-size: 54px; font-weight: 200; }
.smc-lightbox [data-smc-image-step="-1"] { left: 8px; }
.smc-lightbox [data-smc-image-step="1"] { right: 8px; }
.smc-lightbox-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.smc-lightbox-button[data-smc-image-step] svg { width: 28px; height: 42px; stroke-width: 1.3; }
.smc-lightbox-status { position: absolute; inset: 50% 20px auto; margin: 0; text-align: center; font: 14px/1.5 Arial, sans-serif; }
.smc-lightbox[aria-busy] .smc-lightbox-viewport::before { content: ''; position: absolute; width: 28px; height: 28px; border: 3px solid #555; border-top-color: #fff; border-radius: 50%; animation: smc-lightbox-spin .8s linear infinite; }
.smc-lightbox-bullets { position: absolute; bottom: 70px; inset-inline: 0; display: flex; justify-content: center; gap: 8px; }
:fullscreen .smc-lightbox[open] { width: 100%; height: 100dvh; }
.smc-lightbox.is-closing { animation: smc-lightbox-close 250ms ease both; }
@keyframes smc-lightbox-spin { to { transform: rotate(360deg); } }
@keyframes smc-lightbox-close { to { opacity: 0; } }
@media (max-width: 600px) { .smc-lightbox { padding: 56px 38px 64px; } .smc-lightbox [data-smc-image-step="-1"] { left: 0; } .smc-lightbox [data-smc-image-step="1"] { right: 0; } .smc-lightbox .smc-lightbox-button[data-smc-image-step] { min-width: 34px; font-size: 42px; } .smc-lightbox-controls { gap: 0; } }
@media (prefers-reduced-motion: reduce) { .smc-lightbox, .smc-lightbox .smc-lightbox-image, .smc-lightbox[aria-busy] .smc-lightbox-viewport::before { animation: none; transition: none; } }