cs-men-gallery.cs-men-gallery{display:block;min-width:0;width:100%;--men-media-background:#eeede8;--men-media-ink:var(--ink,#222820);--men-media-muted:var(--muted,#697067);--men-media-copper:var(--copper,#99571f);--men-thumb-gap:10px}
.cs-men-gallery [hidden]{display:none!important}
.cs-men-gallery button{appearance:none;color:var(--men-media-ink);cursor:pointer;font:inherit;margin:0;box-shadow:none}
.cs-men-gallery button:focus-visible{outline:2px solid var(--men-media-copper);outline-offset:3px}
.cs-men-gallery__stage{position:relative;width:100%;aspect-ratio:4/5;background:var(--men-media-background);overflow:hidden}
.cs-men-gallery--square .cs-men-gallery__stage{aspect-ratio:1/1}
.cs-men-gallery__viewport{width:100%;height:100%;position:relative;overflow:hidden}
.cs-men-gallery__photo{border:0;padding:0;background:transparent;display:block;width:100%;height:100%;touch-action:pan-y pinch-zoom}
.cs-men-gallery__viewport img,.cs-men-gallery__video,.cs-men-gallery__external,.cs-men-gallery__model,.cs-men-gallery__placeholder{display:block;width:100%;height:100%;object-fit:contain;background:var(--men-media-background);border:0}
.cs-men-gallery__model model-viewer{width:100%;height:100%}
.cs-men-gallery__video{touch-action:auto}
.cs-men-gallery__error{position:absolute;inset:auto 12px 58px;background:white;padding:14px;font-size:14px;line-height:1.5;z-index:2;color:var(--men-media-ink);margin:0}
.cs-men-gallery__expand{position:absolute;top:18px;right:18px;border:0;background:#ffffffd9;border-radius:50%;padding:10px;width:44px;height:44px;display:grid;place-items:center}
.cs-men-gallery__expand svg,.cs-men-gallery__circle svg{width:24px;height:24px}
.cs-men-gallery__rail{display:flex;gap:var(--men-thumb-gap);overflow:auto hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin:12px 0 0;padding:4px 0 6px;touch-action:pan-x pan-y pinch-zoom}
.cs-men-gallery__rail::-webkit-scrollbar{display:none}
.cs-men-gallery__thumb{flex:0 0 calc((100% - 3 * var(--men-thumb-gap))/4);min-width:0;position:relative;scroll-snap-align:start;padding:0 0 5px;border:0;border-bottom:2px solid transparent;background:transparent;touch-action:pan-x pan-y pinch-zoom}
.cs-men-gallery__thumb img,.cs-men-gallery__thumb video{display:block;height:96px;width:100%;object-fit:contain;background:var(--men-media-background)}
.cs-men-gallery__thumb[aria-pressed=true]{border-bottom-color:var(--men-media-copper)}
.cs-men-gallery__thumb:focus-visible{outline-offset:-3px}
.cs-men-gallery__thumb video{position:absolute;inset:0 0 auto;pointer-events:none;opacity:0;transition:opacity .15s}
.cs-men-gallery__thumb.is-previewing video{opacity:1}
.cs-men-gallery .cs-men-gallery__badge{position:absolute;left:4px;bottom:10px;color:white;background:#222820d9;padding:3px 5px;border-radius:2px;font:500 10px/1.2 var(--label,var(--heading-font-family,sans-serif));letter-spacing:.03em;pointer-events:none}
.cs-men-gallery__footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;min-height:48px}
.cs-men-gallery__totals p{font:400 13px/1.5 var(--sans,var(--text-font-family,sans-serif));color:var(--men-media-muted);margin:0}
.cs-men-gallery__totals [data-men-count]{font-size:12px}
.cs-men-gallery__navigation{display:flex;align-items:center;gap:6px}
.cs-men-gallery__circle{background:#ffffffe8;border:1px solid #d7d7d2;border-radius:50%;display:grid;place-items:center;width:44px;height:44px;padding:8px;flex-shrink:0}
.cs-men-gallery__circle:hover{background:white;border-color:var(--men-media-ink)}
.cs-men-gallery__circle:disabled{opacity:.35;cursor:default}
.cs-men-gallery__pause{border-color:transparent;background:transparent}
.cs-men-gallery__pause span{font:500 16px/1 var(--sans,var(--text-font-family,sans-serif))}
.cs-men-gallery__dialog{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;padding:0;margin:0;background:#f1f0eb;color:var(--men-media-ink)}
.cs-men-gallery__dialog::backdrop{background:#12161199;backdrop-filter:blur(6px)}
.cs-men-gallery__dialog-stage{height:calc(100% - 100px);padding:60px 12px 0}
.cs-men-gallery__dialog .cs-men-gallery__viewport{height:100%;width:100%}
.cs-men-gallery__dialog .cs-men-gallery__photo img{background:#f1f0eb}
.cs-men-gallery__dialog-controls{display:flex;align-items:center;justify-content:center;gap:28px;min-height:88px;padding:6px 10px max(6px,env(safe-area-inset-bottom))}
.cs-men-gallery__dialog-controls p{margin:0;max-width:60%;text-align:center;font-size:14px;line-height:1.5}
.cs-men-gallery__close{position:absolute;top:20px;right:20px;z-index:3;background:white}
html:has(.cs-men-gallery__dialog[open]){overflow:hidden}
.cs-men-gallery__fallback img{display:block;width:100%;height:auto;margin-top:12px}
@media(min-width:1550px){.cs-men-gallery__stage{max-height:800px}.cs-men-gallery__thumb img,.cs-men-gallery__thumb video{height:105px}}
@media(max-width:760px){cs-men-gallery.cs-men-gallery{--men-thumb-gap:8px}.cs-men-gallery__stage{width:100%;aspect-ratio:3/4;max-height:none}.cs-men-gallery__stage>.cs-men-gallery__viewport{position:absolute;inset:0}.cs-men-gallery__thumb img,.cs-men-gallery__thumb video{height:82px}.cs-men-gallery__expand{top:12px;right:12px}.cs-men-gallery__footer{gap:6px}.cs-men-gallery__navigation{gap:4px}.cs-men-gallery__totals p{font-size:12px}.cs-men-gallery__dialog-stage{padding:60px 0 0}.cs-men-gallery__close{top:13px;right:13px}.cs-men-gallery__dialog-controls{gap:17px}.cs-men-gallery__dialog-controls p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.cs-men-gallery__rail{scroll-behavior:auto}.cs-men-gallery__thumb video{transition:none}}
