/*! * SMCstylus Slider – gallery styles: stage, thumbnails, magnifier, loading, fullscreen. * * @author Mihai Calin Simion | https://smcstylus.com * @copyright Copyright (c) 2026 Mihai Calin Simion * @license MIT, see the LICENSE file * @link https://github.com/smcstylus/smcstylus-slider */.ssg{isolation:isolate;--ssg-ratio: 1 / 1;--ssg-thumb: 76px;--ssg-tgap: 10px;--ssg-bg: transparent;position:relative;display:flex;flex-direction:column;gap:var(--ssg-tgap)}.ssg--thumbs-top{flex-direction:column-reverse}.ssg--v{display:grid;grid-template-columns:var(--ssg-thumb) minmax(0,1fr);align-items:stretch}.ssg--thumbs-right{grid-template-columns:minmax(0,1fr) var(--ssg-thumb)}.ssg--thumbs-right .ssg-thumbs{order:2}.ssg--thumbs-left .ssg-thumbs{order:-1}.ssg-main{position:relative;min-width:0}.ssg-stage{border-radius:var(--ss-radius);overflow:hidden;background:var(--ssg-bg)}.ssg-stage .ss-track>*{aspect-ratio:var(--ssg-ratio)}.ssg-media{width:100%;height:100%;transform-origin:50% 50%;will-change:transform}.ssg-media.ssg-snap{transition:transform .38s var(--ss-ease)}.ssg-media :is(picture,img){display:block;width:100%;height:100%}.ssg-media img{object-fit:var(--ssg-fit, contain)}.ssg-stage img{-webkit-touch-callout:none}.ssg-stage .ss-track>* :is(img){opacity:1}.ssg-zoomed .ssg-stage{cursor:grab}.ssg-zoomed .ssg-stage:active{cursor:grabbing}.ssg-fs .ssg-stage{cursor:zoom-in}.ssg-fs.ssg-zoomed .ssg-stage{cursor:grab}.ssg:not(.ssg-fs) .ssg-stage{cursor:zoom-in}.ssg-slide.ssg-loading{background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--ss-ink) 7%,transparent) 50%,transparent 70%) 0 0 / 250% 100%;animation:ssg-shimmer 1.3s linear infinite}.ssg-slide.ssg-loading:after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid color-mix(in srgb,var(--ss-ink) 15%,transparent);border-top-color:var(--ss-accent);animation:ssg-spin .8s linear infinite}.ssg-slide.ssg-loading img{opacity:0}.ssg-slide img{transition:opacity .3s}@keyframes ssg-shimmer{to{background-position:-250% 0}}@keyframes ssg-spin{to{transform:rotate(1turn)}}.ssg-slide{overflow:hidden}.ssg-mag{position:absolute;left:0;top:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .25s var(--ss-ease);will-change:transform}.ssg-mag.ssg-on{opacity:1}.ssg-mag{background-repeat:no-repeat;background-color:var(--ssg-mag-bg, #fff)}.ssg-mag--inner{inset:0;width:100%;height:100%}.ssg-mag--lens{border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 10px 30px #00000047,0 0 0 1px #0000001f,0 0 calc(22px * var(--ss-glow)) var(--ss-accent);transform-origin:50% 50%;transition:opacity .25s var(--ss-ease),scale .25s var(--ss-ease);scale:.6}.ssg-mag--lens.ssg-on{scale:1}.ssg-mag-auto:not(.ssg-zoomed) .ss-viewport{cursor:crosshair}.ssg:not(.ssg-fs) :is(.ssg-mag-click,.ssg-mag-grab) .ss-viewport{cursor:zoom-in}.ssg:not(.ssg-fs) .ssg-mag-click.ssg-magging .ss-viewport{cursor:zoom-out}.ssg-magging:has(.ssg-mag--lens) .ss-viewport{cursor:none}.ssg-btn{position:absolute;z-index:40;top:12px;inset-inline-end:12px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--ss-border);border-radius:50%;background:color-mix(in srgb,var(--ss-surface) 82%,transparent);color:var(--ss-ink);backdrop-filter:var(--ss-bf);-webkit-backdrop-filter:var(--ss-bf);cursor:pointer;opacity:.9;transition:opacity .2s,transform .2s var(--ss-ease),background .2s,color .2s}.ssg-btn:hover{opacity:1;background:var(--ss-accent);color:var(--ss-on-accent);border-color:var(--ss-accent)}.ssg-btn:active{transform:scale(.92)}.ssg-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ssg-close{display:none}.ssg-caption{margin-top:10px;font-size:14px;color:var(--ss-ink2);text-align:center}.ssg-playv{position:absolute;inset:50% auto auto 50%;z-index:5;translate:-50% -50%;display:grid;place-items:center;width:72px;height:72px;border:0;border-radius:50%;background:var(--ss-accent);color:#fff;cursor:pointer;box-shadow:0 10px 30px color-mix(in srgb,var(--ss-accent) 45%,transparent);transition:transform .25s var(--ss-ease)}.ssg-playv:hover{transform:scale(1.08)}.ssg-playv svg{width:28px;height:28px;fill:currentColor;margin-left:4px}.ssg-player{position:absolute;inset:0;z-index:6;width:100%;height:100%;border:0;background:#000}.ssg-playing .ssg-playv{display:none}.ssg-thumbs{min-width:0}.ssg-thumbs .ss-track{gap:var(--ssg-tgap);padding:3px}.ssg--v .ssg-thumbs{height:0;min-height:100%}.ssg-thumb{position:relative;width:var(--ssg-thumb);aspect-ratio:1;padding:0;overflow:hidden;cursor:pointer;border:1px solid var(--ss-border);border-radius:calc(var(--ss-radius) * .7);background:var(--ss-surface);opacity:.62;transition:opacity .3s,filter .3s;-webkit-tap-highlight-color:transparent}.ssg--v .ssg-thumb{width:100%}.ssg-thumb img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.ssg-thumb:hover,.ssg-thumb.ssg-on{opacity:1}.ssg-thumb--video:after{content:"";position:absolute;inset:50% auto auto 50%;width:0;height:0;translate:-35% -50%;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}.ssg-frame{left:0;top:0;z-index:3;pointer-events:none;box-sizing:border-box;border-radius:calc(var(--ss-radius) * .7)}.ssg-tf-frame .ssg-frame{border:2px solid var(--ss-accent);box-shadow:0 0 calc(14px * var(--ss-glow)) var(--ss-accent),inset 0 0 0 2px color-mix(in srgb,var(--ss-surface) 70%,transparent)}.ssg-tf-glow .ssg-frame{border:1px solid color-mix(in srgb,var(--ss-accent) 80%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--ss-accent) 25%,transparent),0 8px 26px color-mix(in srgb,var(--ss-accent) 55%,transparent)}.ssg-tf-underline .ssg-frame{background:linear-gradient(var(--ss-accent),var(--ss-accent)) 50% 100% / 60% 3px no-repeat}.ssg--v.ssg-tf-underline .ssg-frame{background-position:0 50%;background-size:3px 60%}.ssg-tf-dim .ssg-frame{display:none}.ssg-tf-dim .ssg-thumb{filter:grayscale(1);border-color:transparent}.ssg-tf-dim .ssg-thumb.ssg-on{filter:none;transform:scale(1.04)}html.ssg-lock,html.ssg-lock body{overflow:hidden}.ssg.ssg-fs{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;gap:10px;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));background:none;animation:ssg-in .35s var(--ss-ease);--ss-ink: #f4f5fa;--ss-ink2: rgba(244, 245, 250, .6);--ss-surface: rgba(30, 32, 40, .9);--ss-border: rgba(255, 255, 255, .14)}.ssg.ssg-fs:before{content:"";position:fixed;inset:0;z-index:-1;background:var(--ssg-fs-bg, rgba(8, 9, 12, .96));opacity:var(--ssg-fs-o, 1)}.ssg-fs .ssg-main{flex:1;min-height:0;display:flex;flex-direction:column}.ssg-fs .ssg-stage .ss-viewport{touch-action:none}.ssg-main.ssg-settle{transition:transform .35s var(--ss-ease)}.ssg-pulling{will-change:transform}.ssg-fs .ssg-stage{flex:1;min-height:0;background:transparent}.ssg-fs .ssg-stage>.ss-viewport,.ssg-fs .ssg-stage .ss-track{height:100%}.ssg-fs .ssg-stage .ss-track>*{aspect-ratio:auto;height:100%}.ssg-fs .ssg-thumbs{order:2;height:auto;min-height:0;flex:none}.ssg-fs .ssg-thumbs .ss-viewport{height:auto}.ssg-fs .ssg-thumb{width:var(--ssg-thumb)}.ssg-fs .ssg-fsbtn{display:none}.ssg-fs .ssg-close{display:grid}@keyframes ssg-in{0%{opacity:0;transform:scale(.98)}}@media(max-width:640px){.ssg{--ssg-thumb: 60px;--ssg-tgap: 8px}}