.pro-gallery{container-type:inline-size;position:relative;min-width:0}
.gallery-rail{display:flex;gap:var(--w-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative;border-radius:var(--w-radius)}
.gallery-rail::-webkit-scrollbar,.kit-slides::-webkit-scrollbar{display:none}.kit-slides{scrollbar-width:none}
.gallery-slide{padding:0;border:0;background:none;display:block;position:relative;flex:0 0 88%;scroll-snap-align:start;cursor:zoom-in;aspect-ratio:var(--w-photo-ratio);border-radius:var(--w-radius);overflow:hidden;min-width:0}
.gallery-slide img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.gallery-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:var(--w-small-gap);margin-block:var(--w-small-gap)}
.gallery-counter,.gallery-swipe-hint{font-family:var(--font-label);font-size:var(--w-small)}
.gallery-swipe-hint{display:none}.gallery-used .gallery-swipe-hint{visibility:hidden}
.gallery-thumbnails{display:none;gap:var(--w-tiny-gap);overflow:auto;scrollbar-width:none}.gallery-thumbnails button{padding:0;border:2px solid transparent;background:none;border-radius:var(--w-radius);flex:0 0 80px;min-height:var(--w-touch);cursor:pointer;overflow:hidden}.gallery-thumbnails img{display:block;width:100%;height:60px;object-fit:cover}.gallery-thumbnails [aria-current=true]{border-color:var(--w-accent)}
.pro-gallery[data-variant=thumbnails] .gallery-slide{flex-basis:100%}.pro-gallery[data-variant=thumbnails] .gallery-thumbnails{display:flex}
.pro-gallery[data-variant=mosaic] .gallery-rail{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:2/1;gap:var(--w-small-gap)}
.pro-gallery[data-variant=mosaic] .gallery-slide{aspect-ratio:auto;min-height:0}.pro-gallery[data-variant=mosaic] .gallery-slide:first-child{grid-row:span 2}.pro-gallery[data-variant=mosaic] .gallery-slide:nth-child(n+6){display:none}
.gallery-more{position:absolute;inset:0;display:grid;place-items:center;background:var(--w-overlay);color:var(--w-ink);font-family:var(--font-label)}
.gallery-segments{display:none;gap:var(--w-tiny-gap)}.pro-gallery[data-variant=peek] .gallery-segments{display:flex}.gallery-segments button{flex:1;min-height:var(--w-touch);padding:0;border:0;background:none;cursor:pointer}.gallery-segments span{display:block;height:3px;background:var(--w-line);border-radius:var(--w-pill)}.gallery-segments [aria-current=true] span{background:var(--w-accent)}
@container(max-width:600px){.pro-gallery[data-variant=mosaic] .gallery-rail{display:flex;aspect-ratio:auto}.pro-gallery[data-variant=mosaic] .gallery-slide{display:block;aspect-ratio:var(--w-photo-ratio);flex:0 0 100%}.gallery-more{display:none}.gallery-swipe-hint{display:inline}}
/* Same native dialog for all products/variants: browser provides modal focus trap. */
html[data-font] .shikari-ui #store-gallery{width:min(1200px,96vw);height:94dvh;max-height:94dvh;max-width:96vw;border:var(--w-border);border-radius:var(--w-radius);background:var(--w-bg);color:var(--w-ink);padding:var(--w-small-gap);overflow:auto}
html[data-font] .shikari-ui #store-gallery[open]{display:flex;flex-direction:column;gap:var(--w-small-gap)}
#store-gallery::backdrop{background:var(--w-overlay)}body:has(#store-gallery[open]),body:has(#template-cart[open]){overflow:hidden}
html[data-font] .shikari-ui #store-gallery .store-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--w-small-gap);flex-shrink:0}
html[data-font] .shikari-ui #store-gallery h2{font-size:var(--w-card-title);margin:0}
html[data-font] .shikari-ui #store-gallery button{min-height:var(--w-touch);min-width:var(--w-touch);font-family:var(--font-text);font-size:var(--w-small);background:var(--w-panel);color:var(--w-ink);border:var(--w-border);border-radius:var(--w-radius);padding:var(--w-tiny-gap)}
.gallery-stage{flex:1;min-height:180px;overflow:auto;display:grid;place-items:center;background:var(--w-bg);touch-action:pan-y}
html[data-font] .shikari-ui #store-gallery .gallery-stage img,html[data-font] .shikari-ui #store-gallery .gallery-stage video{display:block;width:100%;height:100%;max-height:65dvh;object-fit:contain;cursor:zoom-in}
html[data-font] .shikari-ui #store-gallery .gallery-stage.zoomed{display:block}
html[data-font] .shikari-ui #store-gallery .gallery-stage.zoomed img{width:180%;height:auto;max-width:none;max-height:none;cursor:zoom-out}
html[data-font] .shikari-ui #store-gallery [hidden]{display:none!important}
#store-gallery .gallery-thumbnails{display:flex;min-height:64px;flex-shrink:0}#store-gallery .gallery-status{font-size:var(--w-small);min-height:1.4em}#store-gallery .gallery-thumbnails button{padding:0}
.design-review{max-width:var(--w-container);margin:auto;padding:calc(var(--w-header-height) + var(--w-gap)) var(--w-gutter) var(--w-section)}.design-review section{margin-block:var(--w-section)}.design-review h2{font-size:var(--w-h3)}.gallery-preview-mobile{max-width:360px;margin-top:var(--w-gap)}.design-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--w-gap)}
@media(max-width:600px){.design-options{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.gallery-rail{scroll-behavior:auto}}
/* One complete frame on mobile; keep the controls separate from the photo. */
.gallery-more{display:none}
.pro-gallery[data-variant=mosaic] .gallery-more{display:grid}
@media(max-width:768px){
 .kit-gallery .pro-gallery{width:100%;max-width:100%}
 .kit-gallery .gallery-rail{width:100%;overscroll-behavior-x:contain;scroll-padding:0}
 .kit-gallery .gallery-slide{flex:0 0 100%;width:100%;scroll-snap-stop:always}
 .kit-gallery .gallery-toolbar{display:grid;grid-template-columns:44px auto 44px;justify-content:center;gap:var(--w-small-gap);padding:0;margin-top:var(--w-small-gap)}
 html[data-font] body.shikari-ui .kit-gallery .gallery-toolbar .btn{width:44px;height:44px;min-height:44px;min-width:44px;padding:0;margin:0}
 .kit-gallery .gallery-toolbar [data-gallery-step="1"]{grid-column:3;grid-row:1}
 .kit-gallery .gallery-swipe-hint{grid-row:2;grid-column:1/-1;text-align:center}
}
/* Lightbox geometry is independent of the old #store-gallery img {height:65vh}. */
html[data-font] .shikari-ui #store-gallery[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto 64px;overflow:hidden;box-sizing:border-box}
html[data-font] .shikari-ui #store-gallery .store-actions:first-child{grid-row:1;min-width:0;flex-wrap:wrap}
html[data-font] .shikari-ui #store-gallery .store-actions:first-child h2{flex:1 1 180px;overflow-wrap:anywhere}
html[data-font] .shikari-ui #store-gallery .gallery-status{grid-row:2;margin:0;min-height:0}
html[data-font] .shikari-ui #store-gallery .gallery-status:empty{display:none}
html[data-font] .shikari-ui #store-gallery .gallery-stage{grid-row:3;position:relative;display:block;min-height:0;min-width:0;width:100%;height:100%;overflow:hidden}
html[data-font] .shikari-ui #store-gallery .gallery-stage:not(.zoomed) :is(img,video){position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;margin:0}
html[data-font] .shikari-ui #store-gallery .gallery-stage.zoomed{overflow:auto;touch-action:pan-x pan-y}
html[data-font] .shikari-ui #store-gallery .gallery-stage.zoomed img{position:static;width:180%;height:auto;max-width:none;max-height:none}
html[data-font] .shikari-ui #store-gallery .gallery-stage+.store-actions{grid-row:4}
html[data-font] .shikari-ui #store-gallery .gallery-thumbnails{grid-row:5;display:flex;align-items:stretch;height:64px;min-height:0;max-height:64px;min-width:0;overflow-x:auto;overflow-y:hidden}
html[data-font] .shikari-ui #store-gallery .gallery-thumbnails button{flex:0 0 80px;width:80px;height:64px;min-height:0;max-height:64px;padding:0;box-sizing:border-box}
html[data-font] .shikari-ui #store-gallery .gallery-thumbnails img{display:block;width:100%;height:100%;max-height:100%;object-fit:cover;margin:0}
@media(max-width:600px){
 html[data-font] .shikari-ui #store-gallery .store-actions:first-child h2{flex-basis:100%;font-size:var(--w-body);line-height:1.3}
 html[data-font] .shikari-ui #store-gallery .store-actions:first-child{justify-content:flex-end}
 html[data-font] .shikari-ui #store-gallery button{min-height:44px}
}
