/**
 * PRO Multi-image Lookbook — gallery / carousel styles.
 */
.lookbook-gallery {
	--lookbookgallery-gap: 16px;
	position: relative;
	margin: 0 auto;
}

/* Grid view */
.lookbookgallery-grid {
	display: grid;
	grid-template-columns: repeat(var(--lookbookgallery-cols, 3), minmax(0, 1fr));
	gap: var(--lookbookgallery-gap);
}
/* Mobile: one image per row. */
@media (max-width: 768px) {
	.lookbookgallery-grid { grid-template-columns: 1fr; }
}
/* Every cell shares one crop ratio (object-fit:cover on the photo below, Frame
   Size option) so mismatched source-photo proportions don't leave a ragged
   grid. Square (the default) keeps multi-column grids compact instead of
   stretching every row tall. */
.lookbookgallery-grid .lookbookgallery-slide {
	min-width: 0;
	aspect-ratio: var(--lookbookgallery-ratio, 1 / 1);
	overflow: hidden;
}
.lookbookgallery-grid .lookbookgallery-slide .shopspot {
	height: 100%;
}
.lookbookgallery-grid .lookbookgallery-slide .lookbook-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Masonry view — CSS multi-column flow, items keep natural height */
.lookbookgallery-masonry {
	columns: var(--lookbookgallery-cols, 3);
	column-gap: var(--lookbookgallery-gap);
}
.lookbookgallery-masonry .lookbookgallery-slide {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: var(--lookbookgallery-gap);
}
/* Mobile: one image per row. */
@media (max-width: 768px) {
	.lookbookgallery-masonry { columns: 1; }
}

/* Carousel view */
.lookbookgallery-carousel .lookbookgallery-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.lookbookgallery-carousel .lookbookgallery-track {
	display: flex;
	transition: transform .35s ease;
	will-change: transform;
}
/* Every carousel slide shares ONE fixed box (Frame Width : Frame Height,
   default 4:3) regardless of Photo Fit, so the carousel's height never jumps
   while swiping between differently-shaped source photos. Photo Fit only
   changes what happens to a photo that doesn't match that shape.
   --lookbookgallery-perview (Items per view, Slide style only) divides the
   page evenly; it's 1 for every other style/gallery, so this is exactly
   100% — unchanged — everywhere Items per view doesn't apply. */
.lookbookgallery-carousel .lookbookgallery-slide {
	flex: 0 0 calc(100% / var(--lookbookgallery-perview, 1));
	min-width: 0;
	box-sizing: border-box;
	aspect-ratio: var(--lookbookgallery-ratio, 4 / 3);
	overflow: hidden;
}
/* Items per view > 1: give each slide breathing room WITHOUT touching the
   flex-basis math above (padding lives inside the border-box, so N slides
   plus their padding still add up to exactly one page — no drift between
   pages the way adding a flex `gap` between every slide would cause). */
/* Rounded corners + shadow apply to the slide's own box (which already
   clips the photo via overflow:hidden above) — NOT the .shopspot
   wrapper inside it, since that would also clip its marker boxes, which
   intentionally overflow the photo when opened. */
.lookbookgallery-carousel.lookbookgallery-grouped .lookbookgallery-slide {
	padding: 0 calc(var(--lookbookgallery-gap, 16px) / 2);
	/* border-radius: 10px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12); */
	background-clip: padding-box;
}

/* Photo Fit: Full (default, was "Uniform") — the photo crops to cover the
   whole box (object-fit:cover). NOTE: cover only centers correctly when the
   photo has BOTH width and height constrained — a missing width:100% here
   was the bug that made portrait photos crop off-center instead of
   centered. */
.lookbookgallery-slidefit-cover .lookbookgallery-slide .shopspot {
	height: 100%;
}
.lookbookgallery-slidefit-cover .lookbookgallery-slide .lookbook-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Photo Fit: Fit (was "Auto") — the whole photo stays visible inside the
   SAME fixed box, letterboxed (portrait photos get empty space on the left
   and right, landscape photos on top and bottom) instead of cropped. The box
   itself never resizes — only the .shopspot wrapper is sized (by
   JS, matching object-fit:contain's own math) to the photo's fitted
   rectangle and centered, so marker percentages still land on the visible
   photo with no remapping needed. */
.lookbookgallery-slidefit-contain .lookbookgallery-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f9f8f5; /* matches the flipbook's blank-page fill */
}
.lookbookgallery-slidefit-contain .lookbookgallery-slide .lookbook-photo {
	width: 100%;
	height: 100%;
	display: block;
}

/* ── Carousel motion styles (Style option) ──────────────────────────────
   "Slide" (the default) is the plain moving-track behaviour above; JS marks
   the current slide with .lookbookgallery-slide-active on every style
   (a no-op for Slide) and, for Coverflow/Cards, tags every slide with
   data-offset = its distance from the active one. */

/* Peek — reuses Slide's moving track; padding the viewport is what makes
   neighbor slides "peek" in at the edges (overflow:hidden clips at the
   padding box, which is exactly where the padding lives), plus dimming and
   shrinking everything that isn't active. */
.lookbookgallery-style-peek .lookbookgallery-viewport {
	padding: 0 11%;
	box-sizing: border-box;
}
.lookbookgallery-style-peek .lookbookgallery-slide {
	/* border-radius: 10px; */
	opacity: .45;
	transform: scale(.9);
	transition: opacity .35s ease, transform .35s ease;
}
.lookbookgallery-style-peek .lookbookgallery-slide.lookbookgallery-slide-active {
	opacity: 1;
	transform: scale(1);
}
@media (max-width: 600px) {
	.lookbookgallery-style-peek .lookbookgallery-viewport { padding: 0 6%; }
}

/* Fade — slides stack in the same spot; only the active one shows. The
   track itself carries the frame's aspect-ratio (Size option) since slides
   are taken out of flow and can no longer establish it. */
.lookbookgallery-style-fade .lookbookgallery-track {
	position: relative;
	aspect-ratio: var(--lookbookgallery-ratio, 4 / 3);
}
.lookbookgallery-style-fade .lookbookgallery-slide {
	position: absolute;
	inset: 0;
	flex: none;
	aspect-ratio: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s ease;
}
.lookbookgallery-style-fade .lookbookgallery-slide.lookbookgallery-slide-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

/* Coverflow — the active photo sits flat and large; neighbors tilt away in
   3D to either side, fading and shrinking with distance. */
.lookbookgallery-style-coverflow .lookbookgallery-viewport {
	perspective: 1400px;
}
.lookbookgallery-style-coverflow .lookbookgallery-track {
	position: relative;
	aspect-ratio: var(--lookbookgallery-ratio, 4 / 3);
	transform-style: preserve-3d;
}
.lookbookgallery-style-coverflow .lookbookgallery-slide {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 19%;
	width: 62%;
	flex: none;
	aspect-ratio: auto;
	/* border-radius: 10px; */
	overflow: hidden;
	transition: transform .5s ease, opacity .5s ease;
	/* Safari/WebKit can depth-sort 3D-transformed siblings sharing a
	   perspective by their live position instead of z-index (same issue as
	   the Flipbook, see pro-gallery.css's .lookbookgallery-sheet) — promote
	   each slide to its own compositing layer to keep stacking predictable. */
	will-change: transform;
}
.lookbookgallery-style-coverflow .lookbookgallery-slide[data-offset="0"] {
	transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
	z-index: 10;
	opacity: 1;
}
.lookbookgallery-style-coverflow .lookbookgallery-slide[data-offset="-1"] {
	transform: translateX(-72%) translateZ(-140px) rotateY(38deg) scale(.82);
	z-index: 8;
	opacity: .8;
	pointer-events: none;
}
.lookbookgallery-style-coverflow .lookbookgallery-slide[data-offset="1"] {
	transform: translateX(72%) translateZ(-140px) rotateY(-38deg) scale(.82);
	z-index: 8;
	opacity: .8;
	pointer-events: none;
}
.lookbookgallery-style-coverflow .lookbookgallery-slide[data-offset="-2"] {
	transform: translateX(-128%) translateZ(-260px) rotateY(38deg) scale(.68);
	z-index: 6;
	opacity: .45;
	pointer-events: none;
}
.lookbookgallery-style-coverflow .lookbookgallery-slide[data-offset="2"] {
	transform: translateX(128%) translateZ(-260px) rotateY(-38deg) scale(.68);
	z-index: 6;
	opacity: .45;
	pointer-events: none;
}
.lookbookgallery-style-coverflow .lookbookgallery-slide[data-offset="far"] {
	opacity: 0;
	pointer-events: none;
	transform: translateX(0) scale(.6);
}
@media (max-width: 600px) {
	/* Not enough room for 5 tiers on a phone — active + immediate neighbors only. */
	.lookbookgallery-style-coverflow .lookbookgallery-slide[data-offset="-2"],
	.lookbookgallery-style-coverflow .lookbookgallery-slide[data-offset="2"] {
		opacity: 0;
		pointer-events: none;
	}
}

/* Cards — a stacked deck; the front card flicks away on "next" while the
   next one scales up to take its place (both are just the CSS transition
   between two data-offset states, no JS animation involved). */
.lookbookgallery-style-cards .lookbookgallery-track {
	position: relative;
	aspect-ratio: var(--lookbookgallery-ratio, 4 / 3);
}
.lookbookgallery-style-cards .lookbookgallery-slide {
	position: absolute;
	left: 3%;
	right: 3%;
	top: 0;
	height: 92%;
	flex: none;
	aspect-ratio: auto;
	/* border-radius: 14px; */
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	transition: transform .45s cubic-bezier(.22, .8, .32, 1), opacity .45s ease;
	transform-origin: center top;
	will-change: transform;
}
/* height:92% (not inset:0) leaves room below the front card for the stack
   behind it to peek out at the bottom — each deeper card is scaled down
   AND shifted down, anchored to the top edge (transform-origin). Scaling
   alone would shrink a card's bottom edge back UP by (1-scale) of its own
   height, so translateY has to overshoot that by however much peek should
   actually show, not just match it (matching cancels the peek out to zero). */
.lookbookgallery-style-cards .lookbookgallery-slide[data-offset="0"] {
	transform: translateY(0) scale(1);
	z-index: 30;
	opacity: 1;
}
.lookbookgallery-style-cards .lookbookgallery-slide[data-offset="1"] {
	transform: translateY(9%) scale(.95);
	z-index: 20;
	opacity: 1;
	pointer-events: none;
}
.lookbookgallery-style-cards .lookbookgallery-slide[data-offset="2"] {
	transform: translateY(18%) scale(.9);
	z-index: 10;
	opacity: .85;
	pointer-events: none;
}
.lookbookgallery-style-cards .lookbookgallery-slide[data-offset="far"] {
	transform: translateY(18%) scale(.9);
	z-index: 5;
	opacity: 0;
	pointer-events: none;
}
.lookbookgallery-style-cards .lookbookgallery-slide[data-offset="-1"] {
	/* Already-viewed card, flicked away to the left — same resting state
	   whether it just flew out (Next) or is about to fly back in (Prev). */
	transform: translate(-34%, -6%) scale(.9) rotate(-10deg);
	z-index: 25;
	opacity: 0;
	pointer-events: none;
}

.lookbookgallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .7);
	color: #1d2327;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: background .15s ease, opacity .15s ease;
}
.lookbookgallery-nav:hover { background: rgba(255, 255, 255, .9); }
.lookbookgallery-nav[disabled] { opacity: .35; cursor: default; }
.lookbookgallery-prev { left: 5px; }
.lookbookgallery-next { right: 5px; }
.lookbookgallery-nav .material-icons-round { font-size: 26px; line-height: 1; }

.lookbookgallery-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}
.lookbookgallery-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c9ccd1;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.lookbookgallery-dot:hover { background: #a7abb1; }
.lookbookgallery-dot.active {
	background: #ffb818;
	transform: scale(1.2);
}

@media (max-width: 600px) {
	.lookbookgallery-nav { width: 30px; height: 30px; }
	.lookbookgallery-nav .material-icons-round { font-size: 22px; }
}

/* ── Flipbook (two-page magazine spread) ───────────────────────────────── */
.lookbookgallery-flipbook {
    position: relative;
    /* Room for the open-book drop shadow. */
    padding-bottom: 6px;
}
.lookbookgallery-book {
    position: relative;
    perspective: 2800px;
    /* Height comes from the inline aspect-ratio (Book Size option): a
       portrait book is 2:1.35 pages, a landscape book 2:0.75. */
    min-height: 200px;
}
/* Soft shadow under the open book. */
.lookbookgallery-book::before {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: -10px;
    height: 24px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}
/* Spine crease down the middle of the spread. */
.lookbookgallery-book::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 46px;
    transform: translateX(-50%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 46%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.12) 54%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 150;
}

/* Static base pages: the first slide lies flat on the left half; a blank
   page backs the right half for the final spread of an odd-count book. */
.lookbookgallery-baseleaf {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    /* Visible so open marker boxes can pop out past the page edges — the
       photo itself is cropped by object-fit, not by the page clipping. */
    overflow: visible;
    background: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14);
    z-index: 0;
}
.lookbookgallery-baseleaf-left {
    left: 0;
}
.lookbookgallery-baseleaf-right {
    right: 0;
}
/* Left pages shade toward the spine on their right edge. */
.lookbookgallery-baseleaf-left::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 14%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.05) 55%, rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 3;
}
/* Pages CONTAIN their photo (no cropping): the slide centers the lookbook on
   the page and JS sizes the .shopspot wrapper to the photo's fitted
   box, so a landscape photo on a portrait page sits centered with even paper
   margins — and markers stay exactly on their products. */
.lookbookgallery-baseleaf .lookbookgallery-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lookbookgallery-baseleaf .shopspot {
    max-width: 100%;
}
.lookbookgallery-baseleaf .lookbook-photo {
    width: 100%;
    height: auto;
    display: block;
}

/* A sheet = one double-sided leaf occupying the RIGHT half; turning it around
   the spine (origin: left edge) lands its back face on the LEFT half. */
.lookbookgallery-sheet {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 50%;
    transform-origin: left center;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform 0.9s cubic-bezier(0.38, 0.06, 0.22, 1);
    /* Safari/WebKit can depth-sort sheets by their live 3D position instead
       of z-index while they share the book's perspective, so a sheet mid-turn
       can paint behind a flat, resting one even with a much higher z-index.
       Promoting each sheet to its own compositing layer keeps stacking
       ordered by z-index the way Chrome/Firefox already do it. */
    will-change: transform;
}
.lookbookgallery-sheet.flipped {
    transform: rotateY(-180deg);
}
.lookbookgallery-leaf {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Visible for the same reason as .lookbookgallery-baseleaf: marker boxes
       must be able to overflow the page. The flipped back face still hides —
       the leaf's subtree is flattened into its plane, so backface-visibility
       covers the children too. */
    overflow: visible;
    background: #fff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14);
    transition: box-shadow 0.45s ease;
}
.lookbookgallery-leaf-back {
    transform: rotateY(180deg);
}
/* Same contain-and-center treatment as the base leaves (see above). */
.lookbookgallery-leaf .lookbookgallery-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lookbookgallery-leaf .shopspot {
    max-width: 100%;
}
.lookbookgallery-leaf .lookbook-photo {
    width: 100%;
    height: auto;
    display: block;
}

/* Photo Fit: cover — the photo fills its page edge to edge (cropped); marker
   positions are remapped for the crop in JS (remapCroppedMarkers). */
.lookbookgallery-fit-cover .lookbookgallery-baseleaf .shopspot,
.lookbookgallery-fit-cover .lookbookgallery-leaf .shopspot {
    width: 100%;
    height: 100%;
    max-width: none;
}
.lookbookgallery-fit-cover .lookbookgallery-baseleaf .lookbook-photo,
.lookbookgallery-fit-cover .lookbookgallery-leaf .lookbook-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Blank pages (the right half of the final spread in an odd-count book) read
   as intentional empty paper, not a broken layout. */
.lookbookgallery-baseleaf-right:empty,
.lookbookgallery-leaf:empty {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0) 60%),
        #f9f8f5;
}

/* ── No-JS fallback (block-editor iframe, crawlers) ─────────────────────
   Without initFlipbook() the sheets would all stack on the right half and
   photos would have no fitted width. Show a static first spread instead:
   base left page + the first sheet's front (slide 2), photos letterboxed
   via object-fit. */
.lookbookgallery-flipbook:not(.lbgal-ready) .lookbookgallery-sheet {
    display: none;
}
/* The first sheet directly follows the right base page (":first-of-type"
   would match nothing — the base leaves are divs too). */
.lookbookgallery-flipbook:not(.lbgal-ready) .lookbookgallery-baseleaf-right + .lookbookgallery-sheet {
    display: block;
}
.lookbookgallery-flipbook:not(.lbgal-ready) .lookbookgallery-baseleaf-right + .lookbookgallery-sheet .lookbookgallery-leaf-back {
    display: none;
}
.lookbookgallery-flipbook:not(.lbgal-ready) .lookbookgallery-slide .shopspot {
    width: 100%;
    height: 100%;
}
.lookbookgallery-flipbook:not(.lbgal-ready) .lookbookgallery-slide .lookbook-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.lookbookgallery-flipbook:not(.lbgal-ready) .lookbookgallery-nav,
.lookbookgallery-flipbook:not(.lbgal-ready) .lookbookgallery-dots,
.lookbookgallery-flipbook:not(.lbgal-ready) .lookbookgallery-pagenum {
    display: none;
}
/* Cover-fit books keep covering in the no-JS fallback too. */
.lookbookgallery-fit-cover:not(.lbgal-ready) .lookbookgallery-slide .lookbook-photo {
    object-fit: cover;
}

/* Paper curvature illusion: fixed spine-side shading on each face... */
.lookbookgallery-leaf-front::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 14%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.05) 55%, rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 3;
}
.lookbookgallery-leaf-back::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 14%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.05) 55%, rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 3;
}
/* ...plus a light sweep that only shows while the sheet is in the air. */
.lookbookgallery-leaf::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(105deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 45%, rgba(255, 255, 255, 0.16) 70%, rgba(0, 0, 0, 0.1));
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 4;
}
.lookbookgallery-sheet.turning .lookbookgallery-leaf::before {
    opacity: 1;
}
.lookbookgallery-sheet.turning .lookbookgallery-leaf {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.image-size-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

/* While a marker box is open, lift its page above the spine crease (z 150),
   the other half's sheets (JS-assigned inline z-index, hence !important)
   and the nav arrows (z 210) so the box is never covered. */
.lookbookgallery-baseleaf:has(.lookbook-marker.is-active),
.lookbookgallery-sheet:has(.lookbook-marker.is-active) {
    z-index: 300 !important;
}

.lookbookgallery-flipbook .lookbookgallery-nav {
    top: 50%;
    transform: translateY(-50%);
    z-index: 210;
}
.lookbookgallery-pagenum {
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 0.08em;
    opacity: 0.6;
}
/* A one-spread book needs no navigation on desktop — but keeps it on mobile,
   where single-page mode still has two pages to move between. */
@media (min-width: 769px) {
    .lookbookgallery-desktop-nonav .lookbookgallery-nav,
    .lookbookgallery-desktop-nonav .lookbookgallery-dots,
    .lookbookgallery-desktop-nonav .lookbookgallery-pagenum {
        display: none;
    }
}

/* ── Flipbook, single-page mode (mobile) ───────────────────────────────────
   The spread markup stays intact: the book is laid out at 200% width so ONE
   page fills the container, and JS pans the book left/right (.lbg-pan-right)
   to show the left or right page of the current spread. Page turns keep the
   real 3D flip. */
@media (max-width: 768px) {
    .lookbookgallery-flipbook {
        overflow: hidden;
    }
    /* No will-change here: it would make the book the containing block for
       the position:fixed marker boxes parked inside its pages, dropping them
       below the book instead of below the viewport. */
    .lookbookgallery-book {
        width: 200%;
        transition: transform 0.9s cubic-bezier(0.38, 0.06, 0.22, 1);
    }
    .lookbookgallery-book.lbg-pan-right {
        transform: translateX(-50%);
    }
    /* The spine sits at the visible page's edge in this mode — soften it. */
    .lookbookgallery-book::after {
        width: 20px;
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lookbookgallery-sheet { transition: none; }
    .lookbookgallery-leaf::before { transition: none; }
    .lookbookgallery-book { transition: none; }
}