.swm { --swm-ratio:1; --swm-border:#c8c8c8; --swm-focus:#145ea8; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; width:100%; position:relative; }
.swm-ratio-portrait { --swm-ratio:4/5; }
.swm-ratio-landscape { --swm-ratio:4/3; }
.swm [hidden], .swm-expanded [hidden], .swm-zoom[hidden] { display:none!important; }
.swm-stage { aspect-ratio:var(--swm-ratio); width:100%; position:relative; min-width:0; background:#fff; isolation:isolate; touch-action:pan-y pinch-zoom; }
.swm-image-link { position:absolute; inset:0; display:block; }
.swm-image { width:100%; height:100%; object-fit:contain; display:block; }
.swm-caption { height:2.8em; overflow:hidden; line-height:1.4; text-align:center; padding:0 8px; overflow-wrap:anywhere; }
.swm-thumbnails { display:flex; gap:8px; overflow:auto; scroll-snap-type:x proximity; min-width:0; height:80px; padding:4px; box-sizing:border-box; }
.swm-thumb { flex:0 0 68px; width:68px; height:68px; padding:1px; background:#fff; border:2px solid transparent; border-radius:3px; box-sizing:border-box; scroll-snap-align:nearest; cursor:pointer; display:block; }
.swm-thumb img { display:block; width:100%; height:100%; object-fit:contain; }
.swm-thumb[aria-current=true] { border-color:var(--swm-focus,#145ea8); }
.swm button, .swm-expanded button { appearance:none; background:#fff; border:1px solid #777; color:#171717; border-radius:4px; min-width:44px; min-height:44px; padding:4px 10px; font:inherit; line-height:1; cursor:pointer; box-shadow:none; }
.swm button:hover, .swm-expanded button:hover { background:#ededed; }
.swm :focus-visible, .swm-expanded :focus-visible { outline:3px solid var(--swm-focus,#145ea8); outline-offset:2px; }
.swm-tools { position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:5; }
.swm-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; font-size:30px!important; }
.swm-prev { left:8px; }
.swm-next { right:8px; }
.swm-hint { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); padding:6px 12px; border-radius:4px; background:#202020e8; color:#fff; pointer-events:none; text-align:center; max-width:80%; }
.swm-status { position:absolute; bottom:8px; left:8px; right:8px; text-align:center; color:#fff; background:#242424ed; pointer-events:none; padding:6px; z-index:6; }
.swm-status:empty { display:none; }
.swm-thumbs-left { grid-template-columns:80px minmax(0,1fr); }
.swm-thumbs-left .swm-stage { grid-column:2; grid-row:1; }
.swm-thumbs-left .swm-caption { grid-column:2; }
.swm-thumbs-left .swm-thumbnails { grid-column:1; grid-row:1; flex-direction:column; height:100%; position:absolute; inset:0; width:80px; scroll-snap-type:y proximity; }
.swm-thumbs-off .swm-thumbnails { display:none; }
.swm-video { position:absolute; inset:0; z-index:4; background:#000; }
.swm-video iframe { width:100%; height:100%; border:0; display:block; }
.swm-lens { position:absolute; pointer-events:none; border:1px solid #555; background:#ffffff45; box-sizing:border-box; z-index:3; }
.swm-zoom { position:fixed; overflow:hidden; background:#fff; border:1px solid #777; box-shadow:0 3px 14px #0003; pointer-events:none; z-index:1000; box-sizing:border-box; }
.swm-zoom.swm-zoom-local { position:absolute; z-index:4; }
.swm-zoom-image { display:block; max-width:none!important; max-height:none!important; position:absolute; left:0; top:0; will-change:transform; }
.swm-zoom-magnifier.swm-round { border-radius:50%; }
.swm-smooth .swm-zoom-image { transition:transform 65ms linear; }
.swm-expanded { --swm-focus:#72b7ff; position:fixed; inset:0; margin:0; padding:12px; width:100vw; height:100dvh; max-width:none; max-height:none; border:0; box-sizing:border-box; overflow:hidden; color:#fff; background:#151515; }
.swm-expanded[open] { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:48px minmax(0,1fr) 2.8em 80px; gap:8px; }
.swm-expanded::backdrop { background:#151515; }
.swm-modal-header { display:flex; align-items:center; justify-content:flex-end; gap:8px; z-index:5; }
.swm-counter { margin-right:auto; }
.swm-expanded-stage { position:relative; min-width:0; min-height:0; overflow:hidden; touch-action:none; isolation:isolate; }
.swm-expanded-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; max-width:none; user-select:none; -webkit-user-drag:none; }
.swm-is-zoomed { cursor:grab; }
.swm-is-zoomed:active { cursor:grabbing; }
.swm-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(28px) brightness(.35); pointer-events:none; }
.swm-bg-light { background:#fff; color:#171717; --swm-focus:#145ea8; }
.swm-expanded-thumbs-left[open] { grid-template-columns:80px minmax(0,1fr); grid-template-rows:48px minmax(0,1fr) 2.8em; }
.swm-expanded-thumbs-left .swm-modal-header { grid-column:1/3; }
.swm-expanded-thumbs-left .swm-expanded-stage { grid-column:2; grid-row:2; }
.swm-expanded-thumbs-left .swm-caption { grid-column:2; grid-row:3; }
.swm-expanded-thumbs-left .swm-thumbnails { grid-column:1; grid-row:2; flex-direction:column; height:100%; scroll-snap-type:y proximity; }
.swm-expanded-thumbs-off[open] { grid-template-rows:48px minmax(0,1fr) 2.8em; }
.swm-expanded-thumbs-off .swm-thumbnails { display:none; }
@media (max-width:767px) {
    .swm-thumbs-left { grid-template-columns:minmax(0,1fr); }
    .swm-thumbs-left .swm-stage, .swm-thumbs-left .swm-caption, .swm-thumbs-left .swm-thumbnails { grid-column:auto; grid-row:auto; }
    .swm-thumbs-left .swm-thumbnails { position:static; flex-direction:row; width:100%; height:80px; }
    .swm-expanded { padding:8px; }
    .swm-expanded-thumbs-left[open] { grid-template-columns:minmax(0,1fr); grid-template-rows:48px minmax(0,1fr) 2.8em 80px; }
    .swm-expanded-thumbs-left .swm-modal-header, .swm-expanded-thumbs-left .swm-expanded-stage, .swm-expanded-thumbs-left .swm-caption, .swm-expanded-thumbs-left .swm-thumbnails { grid-column:auto; grid-row:auto; }
    .swm-expanded-thumbs-left .swm-thumbnails { flex-direction:row; height:80px; }
}
@media (prefers-reduced-motion:reduce) { .swm-smooth .swm-zoom-image { transition:none; } }