/*
 * Photo strip and full view (inc/gallery.php, js/gallery.js): Paris Fashion Air and Jet Villa Bali.
 * Strip: native horizontal scrolling with snap points (follows the finger, keeps momentum), first photo aligned with
 * the text above, next photo peeking in, thin progress line, round arrows on devices with a mouse.
 * Full view: near black stage, photo in the middle, counter and close button as in the shop's full view.
 * Dress view: the same full view on white with name and ORDER button, zoomable (inc/dress-view.php).
 * Mobile first; touch targets at least 44 px; visible focus.
 */
.dmd-gal {
	--gal-h: min(110vw, 460px);
	--gal-gap: 12px;
	--gal-side: max(10px, calc((100% - var(--grid-width-page)) / 2));
	position: relative;
	width: auto !important; /* across the whole window (the rule for blocks narrows to the grid) */
	margin: 0 0 70px;
}
@media (min-width: 600px) { .dmd-gal { --gal-h: 420px; --gal-gap: 16px; } }
@media (min-width: 1025px) { .dmd-gal { --gal-h: clamp(340px, 26vw, 440px); --gal-gap: 20px; } }

/* Large strip (Retreat: six mood photos): same strip, taller photos, never cropped. --gal-rmax (set inline) is the
   proportion of the widest photo. Phones: that photo takes 86 % of the width, so the next one still peeks in; at most
   70 % of the screen height. Tablets up to 560 px, desktop 480 to 640 px. Keep in line with "sizes" in inc/gallery.php. */
.dmd-gal--large { --gal-h: min(calc(86vw / var(--gal-rmax, .66667)), 125vw, 70vh); margin-top: 40px; } /* air below the white button band */
@supports (height: 100svh) { .dmd-gal--large { --gal-h: min(calc(86vw / var(--gal-rmax, .66667)), 125vw, 70svh); } }
@media (min-width: 600px) {
	.dmd-gal--large { --gal-h: min(560px, calc(80vw / var(--gal-rmax, .66667)), 72vh); }
}
@media (min-width: 1025px) {
	.dmd-gal--large { --gal-h: min(clamp(480px, 42vw, 640px), calc(60vw / var(--gal-rmax, .66667)), 74vh); margin-top: 56px; }
}
@media (min-width: 1025px) and (max-height: 650px) {
	.dmd-gal--large { --gal-h: max(340px, 74vh); } /* low laptop windows: never smaller than the Paris strip */
}

.dmd-gal-viewport { position: relative; }
.dmd-gal-track {
	position: relative;
	display: flex;
	gap: var(--gal-gap);
	margin: 0;
	padding: 0 var(--gal-side);
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gal-side);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.dmd-gal-track::-webkit-scrollbar { display: none; }
.dmd-gal-slide { flex: 0 0 auto; margin: 0; padding: 0; scroll-snap-align: start; }
.dmd-gal-item {
	display: block;
	width: calc(var(--gal-h) * var(--r, .66667));
	height: var(--gal-h);
	overflow: hidden;
	background: #ebe8e7;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}
.dmd-gal-item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
	-webkit-user-drag: none;
	user-select: none;
}
@media (hover: hover) {
	.dmd-gal-track { cursor: grab; }
	.dmd-gal-item:hover img { transform: scale(1.03); }
}
.dmd-gal-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.dmd-gal-track.is-dragging .dmd-gal-item { pointer-events: none; }
.dmd-gal-item:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

/* Arrows: only with a mouse (phones and tablets swipe), visible while the pointer is over the strip */
.dmd-gal-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
	color: var(--dark);
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s, background-color .2s, color .2s;
}
.dmd-gal-arrow svg { display: block; margin: 0 auto; }
.dmd-gal-prev { left: 20px; }
.dmd-gal-prev svg { transform: scaleX(-1); }
.dmd-gal-next { right: 20px; }
@media (hover: hover) and (pointer: fine) {
	.dmd-gal.is-ready .dmd-gal-arrow { display: block; }
	.dmd-gal-viewport:hover .dmd-gal-arrow, .dmd-gal-arrow:focus-visible { opacity: 1; }
	.dmd-gal-arrow:hover { background: #fff; color: #e58e94; }
	.dmd-gal-viewport:hover .dmd-gal-arrow:disabled { opacity: 0; pointer-events: none; }
}
.dmd-gal-arrow:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

/* Progress line: where in the series the visible photos are */
.dmd-gal-progress { position: relative; width: min(240px, 50%); height: 2px; margin: 28px auto 0; overflow: hidden; background: rgba(75, 75, 85, .15); }
.dmd-gal-progress span { position: absolute; top: 0; left: 0; width: 20%; height: 100%; background: var(--dark); transform-origin: 0 0; will-change: transform; }

/* ---------- Full view ---------- */
.dmd-gal-lb[hidden] { display: none; }
.dmd-gal-lb {
	--lb-bar: 64px; /* room for counter and close button above and below the photo */
	--lb-side: 0px;
	position: fixed;
	inset: 0;
	z-index: 100001;
	background: #141213;
	color: #fff;
	opacity: 0;
	transition: opacity .25s ease;
	touch-action: none; /* no zoom of the whole page: the photo zooms (js/zoom.js), the track keeps its sideways swipe */
}
@media (min-width: 1025px) { .dmd-gal-lb { --lb-side: 96px; } }
.dmd-gal-lb.is-open { opacity: 1; }
.dmd-gal-lb-track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	touch-action: pan-x;
}
.dmd-gal-lb-track::-webkit-scrollbar { display: none; }
.dmd-gal-lb-slide { cursor: pointer; display: grid; flex: 0 0 100%; place-items: center; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; } /* clips the zoomed photo at the screen edges */
.dmd-gal-lb-frame {
	position: relative;
	width: min(calc(100vw - 2 * var(--lb-side)), calc((100vh - 2 * var(--lb-bar)) * var(--r, .66667)));
	aspect-ratio: var(--r, .66667);
	overflow: hidden;
	cursor: pointer; /* a click on the right half of the screen shows the next photo, on the left half the previous one */
	-webkit-tap-highlight-color: transparent;
	transition: transform .25s ease;
}
@supports (height: 100dvh) {
	.dmd-gal-lb-frame { width: min(calc(100vw - 2 * var(--lb-side)), calc((100dvh - 2 * var(--lb-bar)) * var(--r, .66667))); }
}
.dmd-gal-lb-thumb,
.dmd-gal-lb-full { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* the small photo of the strip, softened, until the sharp one has arrived */
.dmd-gal-lb-thumb { filter: blur(12px); transform: scale(1.06); }
.dmd-gal-lb-full { opacity: 0; transition: opacity .35s ease; }
.dmd-gal-lb-slide.is-loaded .dmd-gal-lb-full { opacity: 1; }
.dmd-gal-lb-slide.is-loaded .dmd-gal-lb-thumb { visibility: hidden; transition: visibility 0s .35s; }

/* Loading ring in the pink of the ORDER button, only when the sharp photo takes a moment */
.dmd-gal-lb-spin {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, .25);
	border-top-color: #f2a8ac;
	border-radius: 50%;
	opacity: 0;
	animation: dmd-gal-spin .9s linear infinite, dmd-gal-appear .25s ease .4s forwards;
}
.dmd-gal-lb-slide.is-loaded .dmd-gal-lb-spin { display: none; }
@keyframes dmd-gal-spin { to { transform: rotate(360deg); } }
@keyframes dmd-gal-appear { to { opacity: 1; } }

.dmd-gal-lb-count {
	position: absolute;
	top: 0;
	left: 64px;
	right: 64px;
	z-index: 2;
	font: 600 12px/56px Montserrat, sans-serif;
	letter-spacing: .14em;
	text-align: center;
	color: rgba(255, 255, 255, .78);
	pointer-events: none;
}
.dmd-gal-lb-close {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 3;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	cursor: pointer;
	transition: background-color .2s;
}
.dmd-gal-lb-close::before,
.dmd-gal-lb-close::after { content: ""; position: absolute; top: 23px; left: 14px; width: 20px; height: 2px; background: #fff; transform: rotate(45deg); }
.dmd-gal-lb-close::after { transform: rotate(-45deg); }
.dmd-gal-lb-close:hover { background: rgba(255, 255, 255, .18); }
.dmd-gal-lb-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s, opacity .2s;
}
.dmd-gal-lb-nav svg { display: block; margin: 0 auto; }
.dmd-gal-lb-prev { left: 22px; }
.dmd-gal-lb-prev svg { transform: scaleX(-1); }
.dmd-gal-lb-next { right: 22px; }
.dmd-gal-lb-nav:hover { background: rgba(255, 255, 255, .18); }
.dmd-gal-lb-nav:disabled { opacity: .25; cursor: default; }
@media (hover: hover) and (pointer: fine) { .dmd-gal-lb-nav { display: block; } }
.dmd-gal-lb-nav[hidden] { display: none; } /* only one photo */
.dmd-gal-lb :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dmd-gal-lb.is-pointer :focus-visible { outline: none; } /* opened by tap or click: no ring until a key is used */
html.dmd-gal-lb-open { overflow: hidden; }

/* ---------- Dress view (inc/dress-view.php): the full view on white with name and ORDER button ----------
   Phones: photo across the whole width, name and button at the bottom of the screen (thumb), button full width.
   Tablets and desktop: photo with air at the sides, name and button under it. Counter, cross and arrows dark grey. */
.dmd-gal-lb.is-light {
	--lb-top: 56px;
	--lb-bottom: 132px; /* room for name and button */
	--lb-pad: 0px;
	background: #fff;
	color: #4b4b55;
}
@media (min-width: 600px) { .dmd-gal-lb.is-light { --lb-bottom: 128px; --lb-pad: 24px; } }
@media (min-width: 1025px) { .dmd-gal-lb.is-light { --lb-top: 64px; --lb-pad: 96px; } }
.is-light .dmd-gal-lb-slide { box-sizing: border-box; padding: var(--lb-top) var(--lb-pad) var(--lb-bottom); }
.is-light .dmd-gal-lb-frame {
	width: min(calc(100vw - 2 * var(--lb-pad)), calc((100vh - var(--lb-top) - var(--lb-bottom)) * var(--r, .66667)));
	background: #f4f2f1;
}
@supports (height: 100dvh) {
	.is-light .dmd-gal-lb-frame { width: min(calc(100vw - 2 * var(--lb-pad)), calc((100dvh - var(--lb-top) - var(--lb-bottom)) * var(--r, .66667))); }
}
.is-light .dmd-gal-lb-count { color: rgba(75, 75, 85, .72); }
.is-light .dmd-gal-lb-close { background: rgba(75, 75, 85, .06); }
.is-light .dmd-gal-lb-close::before,
.is-light .dmd-gal-lb-close::after { height: 1.5px; background: #4b4b55; }
.is-light .dmd-gal-lb-close:hover { background: rgba(75, 75, 85, .12); }
.is-light .dmd-gal-lb-nav { background: rgba(75, 75, 85, .06); color: #4b4b55; }
.is-light .dmd-gal-lb-nav:hover { background: rgba(75, 75, 85, .12); color: #e58e94; }
.is-light .dmd-gal-lb-spin { border-color: rgba(75, 75, 85, .14); border-top-color: #f2a8ac; }
.dmd-gal-lb.is-light :focus-visible { outline-color: #4b4b55; }

.dmd-gal-lb-order[hidden] { display: none; }
.dmd-gal-lb-order {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	box-sizing: border-box;
	padding: 0 16px calc(16px + env(safe-area-inset-bottom));
	text-align: center;
	transition: opacity .2s, visibility 0s;
}
.dmd-gal-lb-name {
	margin: 0 0 12px;
	overflow: hidden;
	font: 600 14px/1.4 Montserrat, sans-serif;
	letter-spacing: .04em;
	color: #1c1c1c;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.dmd-gal-lb-buy { display: block; width: 100%; }
.dmd-gal-lb-buy .dmd-btn-text { display: block; padding: 16px 20px; }
@media (min-width: 600px) {
	.dmd-gal-lb-order { padding-bottom: 28px; }
	.dmd-gal-lb-buy { display: inline-block; width: auto; min-width: 260px; }
}

/* Zoomed (js/zoom.js, all full views): the photo fills the screen, the track does not move (one finger or the mouse
   moves the photo), name, button and arrows step aside until the photo is back to normal */
.dmd-gal-lb.is-zoomed .dmd-gal-lb-track { overflow: hidden; touch-action: none; }
.dmd-gal-lb.is-pinching .dmd-gal-lb-track { touch-action: none; }
.dmd-gal-lb.is-zoomed .dmd-gal-lb-frame { cursor: grab; }
.dmd-gal-lb.is-zoomed.is-panning .dmd-gal-lb-frame { cursor: grabbing; }
.dmd-gal-lb.is-zoomed .dmd-gal-lb-order,
.dmd-gal-lb.is-zoomed .dmd-gal-lb-nav { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }

@media (prefers-reduced-motion: reduce) {
	.dmd-gal-item img, .dmd-gal-lb, .dmd-gal-lb-full, .dmd-gal-lb-frame { transition: none; }
	.dmd-gal-lb-spin { animation: dmd-gal-appear .01s linear .4s forwards; }
}