/**
 * Magazine showcase template — presentation only.
 *
 * Self-contained: this file styles ONLY the template's own markup. It
 * contains no builder chrome (that lives in the shared
 * assets/css/luxury-builder-preview.css, loaded only inside the builder's
 * in-context preview) and no palette values — the agent-chosen palette is
 * injected at render time as --mlsg-lux-* custom properties on the
 * template's root element, so this stylesheet is static and cacheable.
 *
 * Tokens consumed (set per-listing by the renderer):
 *   --mlsg-lux-ink, --mlsg-lux-paper, --mlsg-lux-accent, --mlsg-lux-gold,
 *   --mlsg-lux-nav-bg, --mlsg-lux-nav-text,
 *   --mlsg-lux-text-on-dark, --mlsg-lux-text-on-light
 *   --mlsg-lux-nav-h (set by template.js from the nav's rendered height)
 */

html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
.mlsg-lux { font-family: Georgia, 'Times New Roman', serif; color: var(--mlsg-lux-ink); margin: 0; }
.mlsg-lux img { max-width: 100%; display: block; }
.mlsg-lux-nav {
	position: sticky; top: 0; z-index: 500; background: var(--mlsg-lux-nav-bg);
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
	padding: 16px 40px; color: var(--mlsg-lux-nav-text); row-gap: 10px;
}
.mlsg-lux-nav__links { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; row-gap: 8px; }
.mlsg-lux-nav__links a { color: var(--mlsg-lux-nav-text); text-decoration: none; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }
.mlsg-lux-nav__links a.mlsg-lux-nav__cta { border: 1px solid var(--mlsg-lux-gold); color: var(--mlsg-lux-gold); padding: 8px 16px; }
/* Share sits inside the links group so it inherits the off-canvas panel
   layout on mobile with no separate handling. Styled as a quiet text action,
   not a second CTA — Full Listing is the one button that should shout. */
.mlsg-lux-nav__share {
	display: inline-flex; align-items: center; gap: 8px;
	background: none; border: none; cursor: pointer; padding: 8px 4px;
	color: var(--mlsg-lux-nav-text); font: inherit;
	font-size: 0.8rem; letter-spacing: .12em; text-transform: uppercase;
	opacity: .85; transition: opacity .15s ease;
}
.mlsg-lux-nav__share:hover, .mlsg-lux-nav__share:focus-visible { opacity: 1; }
.mlsg-lux-nav__share.is-copied { color: var(--mlsg-lux-gold); opacity: 1; }
.mlsg-lux-nav__brand { position: relative; display: flex; align-items: center; gap: 10px; }
.mlsg-lux-nav__logo { max-height: 40px; width: auto; display: block; }
.mlsg-lux-nav__hamburger {
	display: none; width: 40px; height: 40px; border-radius: 6px; border: none;
	background: transparent; color: var(--mlsg-lux-nav-text); font-size: 1.3rem; cursor: pointer;
	align-items: center; justify-content: center; flex: 0 0 auto; z-index: 1001; position: relative;
}
.mlsg-lux-nav__backdrop {
	display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
	opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 900;
}
.mlsg-lux-nav-logo-gear {
	width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
	background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4);
	display: flex; align-items: center; justify-content: center; font-size: 12px;
	opacity: 0; transition: opacity .15s; cursor: pointer;
}
.mlsg-lux-nav__brand:hover .mlsg-lux-nav-logo-gear { opacity: 1; }
/* Nav + hero + stats together always exactly fill the screen, top to
   bottom, on any screen size — nav and stats take their natural
   height, the hero flexes to fill whatever's left. min-height (not
   height) so on the rare screen where content genuinely needs more
   room than the viewport gives it, it grows instead of clipping.
   100svh (small viewport height — assumes the mobile address bar is
   fully expanded, i.e. the smallest the viewport ever gets) on
   browsers that support it, ignored by ones that don't (falls back to
   plain 100vh, both lines intentional). Deliberately NOT 100dvh
   (dynamic viewport height): dvh is designed to continuously track
   the actual visible viewport as the address bar collapses/expands —
   which sounds right, but it means the exact same scroll gesture that
   collapses the toolbar also changes 100dvh's computed value in real
   time, so the hero/viewport wrapper visibly grew/shrank *while the
   user was scrolling* (reported as "the hero keeps resizing on
   scroll"). svh is a static reference point — it never changes
   mid-scroll — at the cost of leaving a little unused space below
   the fold once the toolbar does collapse, which is a far better
   trade than a section that visibly resizes under the user's thumb. */
/* Nav lives OUTSIDE this wrapper now (see markup) — position:sticky is
   bounded by its containing block, and nav being a child of a ~100vh
   wrapper meant it could only stay stuck for that first screen, then
   scrolled away with the wrapper once the user scrolled past it. Nav's
   containing block is now the full page, so it stays stuck the whole
   scroll. --mlsg-lux-nav-h is set by luxury-listing-public.js from the
   nav's actual rendered height (varies by breakpoint/content) so hero+
   stats still fill exactly the remaining screen height; the 0px
   fallback just means "100vh" if that hasn't run yet, not broken. */
.mlsg-lux-viewport {
	display: flex; flex-direction: column;
	min-height: calc(100vh - var(--mlsg-lux-nav-h, 0px));
	min-height: calc(100svh - var(--mlsg-lux-nav-h, 0px));
}
.mlsg-lux-hero {
	background-size: cover; background-position: center;
	padding: 48px 60px 64px; color: var(--mlsg-lux-text-on-dark); position: relative;
	box-sizing: border-box;
	display: flex; flex-direction: column; justify-content: flex-end;
	flex: 1 1 auto; min-height: 0;
}
.mlsg-lux-hero::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
.mlsg-lux-hero__inner { position: relative; max-width: 760px; }
.mlsg-lux-kicker { color: var(--mlsg-lux-gold); text-transform: uppercase; letter-spacing: .12em; font-size: 0.8rem; margin: 0 0 16px; }
.mlsg-lux-hero h1 { font-size: 3.6rem; font-weight: 400; margin: 0 0 18px; line-height: 1.05; }
.mlsg-lux-hero p { font-size: 1.1rem; margin: 0 0 28px; color: #eee; }
.mlsg-lux-btn {
	display: inline-block; padding: 14px 28px; background: var(--mlsg-lux-accent); color: var(--mlsg-lux-text-on-dark);
	text-decoration: none; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; border: none; cursor: pointer;
}
.mlsg-lux-btn--ghost { background: transparent; border: 1px solid var(--mlsg-lux-gold); color: var(--mlsg-lux-gold); }
.mlsg-lux-stats {
	display: grid; grid-template-columns: repeat(4, 1fr); background: var(--mlsg-lux-paper);
	padding: 30px 40px; text-align: center; gap: 20px;
	flex: 0 0 auto;
}
.mlsg-lux-stats strong { display: block; font-size: 1.8rem; font-weight: 400; }
.mlsg-lux-stats span { font-size: 0.875rem; text-transform: uppercase; letter-spacing: .08em; color: #665; }
.mlsg-lux-story {
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px;
	padding: 80px 60px; background: var(--mlsg-lux-paper);
}
.mlsg-lux-story h2 { font-size: 2.2rem; font-weight: 400; margin: 8px 0 20px; }
.mlsg-lux-story p { font-size: 1.05rem; line-height: 1.8; color: var(--mlsg-lux-text-on-light); white-space: pre-line; }
.mlsg-lux-highlights { background: var(--mlsg-lux-accent); color: var(--mlsg-lux-text-on-dark); padding: 40px; align-self: start; position: sticky; top: 100px; }
.mlsg-lux-highlights h3 { margin: 0 0 20px; font-weight: 400; }
.mlsg-lux-highlights strong { display: block; font-size: 1.4rem; color: var(--mlsg-lux-gold); font-weight: 400; }
.mlsg-lux-highlights span { font-size: 0.875rem; text-transform: uppercase; letter-spacing: .08em; color: #e8e2d4; }
.mlsg-lux-highlights__pps { margin-bottom: 24px; }
.mlsg-lux-highlights__features {
	list-style: none; margin: 0 0 28px; padding: 0;
	display: flex; flex-wrap: wrap; gap: 12px 16px;
}
.mlsg-lux-highlights__features li {
	display: flex; align-items: center; gap: 8px;
	flex: 1 1 45%; min-width: 140px;
	font-size: 0.95rem; color: #f2efe6;
}
.mlsg-lux-highlights__features li i { color: var(--mlsg-lux-gold); flex-shrink: 0; }
.mlsg-lux-highlights__more {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--mlsg-lux-gold); text-decoration: none;
	font-size: 0.9rem; text-transform: uppercase; letter-spacing: .06em;
	border-top: 1px solid rgba(255,255,255,.2); padding-top: 20px; width: 100%;
}
.mlsg-lux-highlights__more:hover { text-decoration: underline; }
.mlsg-lux-highlights select.mlsg-lux-feature-select {
	background: rgba(255,255,255,.08); color: #f2efe6;
	border: 1px solid rgba(255,255,255,.3); border-radius: 4px;
	font-size: 0.9rem; padding: 4px 6px; max-width: 100%;
}
.mlsg-lux-highlights select.mlsg-lux-feature-select option { color: #1a1a1a; }
/* 100svh not 100dvh here too — same reasoning as .mlsg-lux-viewport
   above: dvh changes value mid-scroll as the mobile address bar
   collapses/expands, which visibly resizes the section under the
   user's thumb. svh is static. */
.mlsg-lux-break {
	background-size: cover; background-position: center; padding: 48px 60px;
	color: #fff; text-align: left; position: relative; box-sizing: border-box;
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; justify-content: center;
}
.mlsg-lux-break::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.mlsg-lux-break h2 { position: relative; font-size: 2.4rem; font-weight: 400; max-width: 700px; }
.mlsg-lux-blocks-head { background: var(--mlsg-lux-ink); color: var(--mlsg-lux-text-on-dark); padding: 80px 60px 20px; }
.mlsg-lux-blocks-head h2 { font-size: 2.2rem; font-weight: 400; margin: 8px 0 0; }
.mlsg-lux-blocks {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;
	background: var(--mlsg-lux-ink); color: var(--mlsg-lux-text-on-dark); padding: 20px 60px 80px;
}
.mlsg-lux-blocks .num { color: var(--mlsg-lux-gold); font-size: 0.85rem; margin-bottom: 8px; }
.mlsg-lux-blocks h3 { margin: 0 0 10px; font-weight: 400; font-size: 1.15rem; }
.mlsg-lux-blocks p { color: #ccc; font-size: 1rem; line-height: 1.6; }
.mlsg-lux-gallery { background: var(--mlsg-lux-paper); padding: 80px 60px; }
.mlsg-lux-gallery h2 { font-size: 2.2rem; font-weight: 400; margin: 0 0 30px; }
.mlsg-lux-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.mlsg-lux-gallery__grid img { width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 10px; display: block; }
@media (min-width: 1200px) { .mlsg-lux-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mlsg-lux-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mlsg-lux-gallery__grid { grid-template-columns: minmax(0, 1fr); } }
.mlsg-lux-gallery__tile { position: relative; margin: 0; min-width: 0; overflow: hidden; }
.mlsg-lux-gallery__zoom-trigger {
	display: block; width: 100%; padding: 0; margin: 0; border: none; background: none; cursor: pointer;
	position: relative; border-radius: 10px; overflow: hidden;
}
.mlsg-lux-gallery__zoom-trigger img { transition: transform .4s ease; }
.mlsg-lux-gallery__zoom-trigger:hover img, .mlsg-lux-gallery__zoom-trigger:focus-visible img { transform: scale(1.04); }
.mlsg-lux-gallery__zoom-icon {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,0); color: #fff; font-size: 1.4rem; opacity: 0; transition: opacity .25s ease, background .25s ease;
}
.mlsg-lux-gallery__zoom-trigger:hover .mlsg-lux-gallery__zoom-icon,
.mlsg-lux-gallery__zoom-trigger:focus-visible .mlsg-lux-gallery__zoom-icon {
	opacity: 1; background: rgba(0,0,0,0.25);
}
.mlsg-lux-gallery__caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	font-size: 1.2rem; color: #fff; line-height: 1.4; z-index: 4;
	background: rgba(0,0,0,0.5); padding: 20px;
	overflow-wrap: break-word; word-break: break-word;
}
.mlsg-lux-gallery__caption:empty::before { content: attr(data-placeholder); opacity: 0.75; font-style: italic; }
.mlsg-lux-cta { background: var(--mlsg-lux-ink); color: var(--mlsg-lux-text-on-dark); text-align: center; padding: 100px 60px; }
.mlsg-lux-cta h2 { font-size: 2.4rem; font-weight: 400; margin: 8px 0 30px; }
.mlsg-lux-cta .mlsg-lux-btn { margin: 0 8px; }
.mlsg-lux-footer { background: var(--mlsg-lux-ink); color: #ccc; text-align: center; padding: 24px; font-size: 1rem; border-top: 1px solid #333; }
.mlsg-lux-footer__ids { white-space: nowrap; }
@media (max-width: 900px) {
	.mlsg-lux-story, .mlsg-lux-stats, .mlsg-lux-blocks { grid-template-columns: 1fr 1fr; }
	.mlsg-lux-blocks { gap: 40px; }
	.mlsg-lux-hero h1 { font-size: 2.4rem; }
	.mlsg-lux-nav__hamburger { display: flex; }
	.mlsg-lux-nav__links {
		position: fixed; top: 0; right: 0; height: 100%; width: 100%;
		background: var(--mlsg-lux-nav-bg); flex-direction: column; align-items: flex-start;
		gap: 20px; padding: 90px 28px 28px; overflow-y: auto; box-sizing: border-box;
		transform: translateX(100%); transition: transform .3s ease; z-index: 1000;
	}
	.mlsg-lux-nav__links.is-open { transform: translateX(0); }
	/* `stretch` fills the parent's content box the way `100%` can't once
	   padding is involved. Safari still needs the -webkit- name, and the
	   100% line keeps anything older from ending up unsized — declared
	   cheapest-first so the best supported value wins. */
	.mlsg-lux-nav__links a {
		width: 100%;
		width: -webkit-fill-available;
		width: stretch;
	}
	.mlsg-lux-nav__links a.mlsg-lux-nav__cta { border: 1px solid var(--mlsg-lux-gold); padding: 12px 16px; text-align: center; margin-top: 10px; }
	.mlsg-lux-nav__share { width: 100%; justify-content: flex-start; padding: 12px 0; }
	.mlsg-lux-nav__backdrop.is-open { display: block; opacity: 1; pointer-events: auto; }
}
@media (max-width: 640px) {
	.mlsg-lux-nav { padding: 14px 20px; }
	.mlsg-lux-hero {
		padding: 32px 24px 48px;
		flex: 0 0 auto;
		min-height: calc(100vh - var(--mlsg-lux-nav-h, 0px));
		min-height: calc(100svh - var(--mlsg-lux-nav-h, 0px));
	}
	.mlsg-lux-hero h1 { font-size: 1.9rem; }
	.mlsg-lux-story, .mlsg-lux-stats, .mlsg-lux-blocks { grid-template-columns: 1fr; }
	.mlsg-lux-story { padding: 48px 24px; gap: 32px; }
	.mlsg-lux-stats { padding: 24px 20px; gap: 20px; }
	.mlsg-lux-highlights { padding: 28px 24px; position: static; }
	.mlsg-lux-break { padding: 40px 24px; }
	.mlsg-lux-break h2 { font-size: 1.7rem; }
	.mlsg-lux-blocks-head { padding: 48px 24px 16px; }
	.mlsg-lux-blocks-head h2, .mlsg-lux-story h2, .mlsg-lux-gallery h2, .mlsg-lux-cta h2 { font-size: 1.7rem; }
	.mlsg-lux-blocks { padding: 16px 24px 48px; gap: 32px; }
	.mlsg-lux-gallery { padding: 48px 24px; }
	.mlsg-lux-cta { padding: 60px 24px; }
	.mlsg-lux-cta .mlsg-lux-btn { display: block; width: 100%; max-width: 320px; margin: 8px auto; }
	.mlsg-lux-footer { padding: 20px; }
}

/* Scroll reveal — class added by luxury-listing-public.js only once it
   actually runs (progressive enhancement: nothing here hides content
   by default). Public page only, never the builder preview. */
.mlsg-lux-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.mlsg-lux-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Gallery lightbox — built by luxury-listing-public.js, appended to
   <body> once on first open. Deliberately a neutral near-black stage
   (not the customizable --mlsg-lux-ink token) since that's the
   correct backdrop for photo viewing regardless of a listing's chosen
   palette; the gold accent ties the counter/caption back to the
   site's own look. */
.mlsg-lux-lightbox {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity .25s ease;
}
.mlsg-lux-lightbox[hidden] { display: none; }
.mlsg-lux-lightbox.is-open { opacity: 1; }
.mlsg-lux-lightbox__backdrop { position: absolute; inset: 0; background: rgba(8,8,7,0.96); }
/* Stage grows to fill nearly the whole viewport while zoomed (was
   capped at 88vw/76vh always) — animated alongside the image's own
   transform so "zoom" reads as the photo expanding to fill the
   screen, not just scaling up inside a small fixed frame. overflow
   switches to visible so the enlarged image is never clipped by the
   stage's own box. */
.mlsg-lux-lightbox__stage {
	position: relative; z-index: 1; max-width: 88vw; max-height: 76vh;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 6 / 4;
	transition: max-width .35s cubic-bezier(.22,1,.36,1), max-height .35s cubic-bezier(.22,1,.36,1);
}
.mlsg-lux-lightbox__stage.is-zoomed { max-width: 98vw; max-height: 98vh; overflow: visible; }
.mlsg-lux-lightbox__img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5); opacity: 1;
	transition: opacity .2s ease, transform .35s cubic-bezier(.22,1,.36,1);
	touch-action: none; cursor: zoom-in;
}
.mlsg-lux-lightbox__img.is-loading { opacity: 0; }
.mlsg-lux-lightbox__img.is-zoomed { cursor: grab; }
/* Only suppress the transition while a pan drag is actively in
   progress (added on drag-start, removed on drag-end) — NOT for the
   whole zoomed state, otherwise the zoom-in/out itself would never
   animate, just snap. That distinction is the whole fix here. */
.mlsg-lux-lightbox__img.is-panning { transition: none; }
/* Chrome (caption/counter, thumbnail strip, prev/next arrows) fades
   out while zoomed so the photo genuinely fills the viewport without
   clutter — toolbar (zoom/slideshow/fullscreen/close) stays, since
   that's still needed to get back out. */
.mlsg-lux-lightbox__footer, .mlsg-lux-lightbox__strip, .mlsg-lux-lightbox__nav {
	transition: opacity .25s ease;
}
.mlsg-lux-lightbox.is-zoomed .mlsg-lux-lightbox__footer,
.mlsg-lux-lightbox.is-zoomed .mlsg-lux-lightbox__strip,
.mlsg-lux-lightbox.is-zoomed .mlsg-lux-lightbox__nav {
	opacity: 0; pointer-events: none;
}
.mlsg-lux-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08); backdrop-filter: blur(6px); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer;
	transition: background .2s ease, transform .2s ease, opacity .25s ease;
}
.mlsg-lux-lightbox__nav:hover { background: rgba(255,255,255,0.18); }
.mlsg-lux-lightbox__nav--prev { left: 20px; }
.mlsg-lux-lightbox__nav--next { right: 20px; }
/* Toolbar — replaces the old standalone close button. One row of
   equally-styled icon buttons, top-right: zoom, slideshow, full
   screen, close (same grouping/order as the Houzez theme's own
   Fancybox-based lightbox, reimplemented natively here rather than
   adopting Fancybox itself — Fancybox requires a paid commercial
   license for use in a product sold to clients, which this is). */
.mlsg-lux-lightbox__toolbar {
	position: absolute; top: 20px; right: 20px; z-index: 3;
	display: flex; gap: 10px;
}
.mlsg-lux-lightbox__tool {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08); backdrop-filter: blur(6px); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer;
	transition: background .2s ease;
}
.mlsg-lux-lightbox__tool:hover { background: rgba(255,255,255,0.18); }
.mlsg-lux-lightbox__footer {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	text-align: center; padding: 20px 80px; color: #fff;
	background: rgba(0, 0, 0, 0.5);
}
.mlsg-lux-lightbox__caption { margin: 0 0 6px; font-size: 1.05rem; font-family: Georgia, 'Times New Roman', serif; }
.mlsg-lux-lightbox__caption[hidden] { display: none; }
.mlsg-lux-lightbox__counter { font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mlsg-lux-gold); }
.mlsg-lux-lightbox__strip {
	position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2;
	display: flex; gap: 8px; justify-content: flex-start; overflow-x: auto;
	padding: 0 24px; max-width: 100%; box-sizing: border-box; scroll-behavior: smooth;
}
.mlsg-lux-lightbox__thumb {
	flex: 0 0 auto; width: 64px; height: 44px; padding: 0; cursor: pointer;
	border: 2px solid transparent; border-radius: 6px; overflow: hidden; opacity: .55;
	transition: opacity .2s ease, border-color .2s ease; background: #000;
}
.mlsg-lux-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mlsg-lux-lightbox__thumb:hover { opacity: .85; }
.mlsg-lux-lightbox__thumb.is-active { opacity: 1; border-color: var(--mlsg-lux-gold); }
body.mlsg-lux-lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.mlsg-lux-lightbox, .mlsg-lux-lightbox__img, .mlsg-lux-lightbox__stage { transition: none; }
}
@media (max-width: 640px) {
	.mlsg-lux-lightbox__footer { bottom: 0; padding: 15px 60px; }
	.mlsg-lux-lightbox__nav { width: 42px; height: 42px; font-size: 0.95rem; }
	.mlsg-lux-lightbox__nav--prev { left: 10px; }
	.mlsg-lux-lightbox__nav--next { right: 10px; }
	.mlsg-lux-lightbox__strip { display: none; }
	.mlsg-lux-lightbox__toolbar { top: 12px; right: 12px; gap: 6px; }
	.mlsg-lux-lightbox__tool { width: 38px; height: 38px; font-size: 0.9rem; }
}