/* ---------- Hero video ---------- */
.mm-hero {
	position: relative;
	display: grid;
	overflow: hidden;
	isolation: isolate;
	color: var(--wp--preset--color--glow, #fff1d1);
	background: #3b2a1c;
}
.mm-hero__poster,
.mm-hero__poster img,
.mm-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.mm-hero__video { opacity: 0; transition: opacity 900ms ease; }
.mm-hero__video.is-ready { opacity: 1; }
.mm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(20, 12, 4, calc(var(--mm-hero-overlay, .15) + .25)), rgba(20, 12, 4, var(--mm-hero-overlay, .15)) 45%);
}
.mm-hero__content {
	align-self: end;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

/* ---------- Lamp grid + Day/Night ---------- */
.mm-lamps { --mm-fade: 700ms; }
.mm-switch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0 auto var(--wp--preset--spacing--40);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .22em;
}
.mm-switch[hidden] { display: none; }
.mm-switch__btn {
	background: none;
	border: 0;
	padding: .25rem 0;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	color: inherit;
	opacity: .55;
	cursor: pointer;
	transition: opacity var(--mm-fade);
}
.mm-switch__btn[aria-pressed="true"] { opacity: 1; }
.mm-switch__track {
	position: relative;
	width: 2.5rem;
	height: 1.25rem;
	border-radius: 999px;
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .35);
	cursor: pointer;
	transition: box-shadow var(--mm-fade);
}
/* Day: an empty ring. Night: the ring fills with warm light. */
.mm-switch__thumb {
	position: absolute;
	top: .25rem;
	left: .3rem;
	width: .75rem;
	height: .75rem;
	border-radius: 50%;
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .7);
	transition: transform var(--mm-fade), background var(--mm-fade), box-shadow var(--mm-fade);
}
.mm-lamps.is-night .mm-switch__track { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); }
.mm-lamps.is-night .mm-switch__thumb {
	transform: translateX(1.1rem) scale(1.2);
	/* A soft halo of light, no hard edge */
	/* A small sunset: warm core, peach, then a pink edge fading out */
	background: radial-gradient(circle at 45% 45%, #fff3dc 0%, #ffc98f 28%, rgba(255, 150, 120, .85) 52%, rgba(246, 130, 160, .45) 72%, rgba(246, 130, 160, 0) 100%);
	box-shadow: 0 0 10px 3px rgba(255, 160, 110, .35), 0 0 20px 7px rgba(240, 130, 165, .22);
}

.mm-lamps__grid {
	--mm-cols: var(--mm-cols-desktop, 5);
	--mm-gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--30) var(--mm-gap);
}
.mm-lamp { flex: 0 1 calc((100% - (var(--mm-cols) - 1) * var(--mm-gap)) / var(--mm-cols)); }
@media (max-width: 1100px) { .mm-lamps__grid { --mm-cols: min(var(--mm-cols-desktop, 5), 3); } }
@media (max-width: 781px) { .mm-lamps__grid { --mm-cols: 2; } }
.mm-lamp__link { display: grid; gap: .35rem; text-align: center; color: inherit; text-decoration: none !important; }
.mm-lamp__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--wp--preset--color--mist, #f2f2f2);
}
.mm-lamp__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--mm-fade) ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.mm-lamp__img--night { opacity: 0; }
.mm-lamps.is-night .mm-lamp__img--night { opacity: 1; }
@media (hover: hover) {
	.mm-lamps.is-day .mm-lamp__link:hover .mm-lamp__img--night { opacity: 1; }
	.mm-lamp__link:hover .mm-lamp__img { transform: scale(1.03); }
}
.mm-lamp__name {
	margin-top: .6rem;
	font-size: .75rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .28em;
}
.mm-lamp__price { font-size: var(--wp--preset--font-size--s, .875rem); color: var(--wp--preset--color--muted, #6e6a64); }

@media (prefers-reduced-motion: reduce) {
	.mm-lamps, .mm-hero__video { --mm-fade: 1ms; transition: none; }
}

/* ---------- Free-shipping bar (cart drawer) ---------- */
.mm-ship { padding: .9rem 1rem 1rem; margin: 0 0 .25rem; background: var(--wp--preset--color--mist, #f2f2f2); }
.mm-ship__text { margin: 0 0 .55rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .18em; text-align: center; }
.mm-ship__track { display: block; height: 3px; border-radius: 3px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.mm-ship__fill { display: block; height: 100%; width: 0; background: var(--wp--preset--color--contrast, #1a1816); transition: width 600ms cubic-bezier(.2, .7, .2, 1); }
.mm-ship.is-reached .mm-ship__text { color: var(--wp--preset--color--contrast, #111); }

/* ---------- Category filter ---------- */
.mm-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; margin: 0 auto var(--wp--preset--spacing--20); }
.mm-filter__btn { background: none; border: 0; outline: none !important; padding: .3rem 0; font: inherit; font-size: .75rem; text-transform: uppercase; letter-spacing: .22em; color: var(--wp--preset--color--muted, #4f4f4f); cursor: pointer; border-bottom: 1px solid transparent; }
.mm-filter__btn[aria-pressed="true"] { color: var(--wp--preset--color--contrast, #111); border-bottom-color: currentColor; }
.mm-lamp[hidden] { display: none; }
.mm-lamp__actions { display: grid; gap: .5rem; margin-top: .85rem; }
.mm-lamp__wall { font-size: .6875rem; text-align: center; color: var(--wp--preset--color--muted, #4f4f4f); text-decoration: underline; text-underline-offset: .2em; }
.mm-lamp__add { display: block; width: 100%; padding: .6rem .5rem .5rem; border: 1px solid var(--wp--preset--color--line, #e3e3e3); border-radius: 0; background: none; color: inherit; font: inherit; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.mm-lamp__add:hover, .mm-lamp__add:focus-visible { border-color: currentColor; }
.mm-lamp__add:disabled { cursor: default; opacity: .7; }
html.mm-night .mm-lamp__add { border-color: rgba(243, 233, 220, .35); }
html.mm-night .mm-lamp__wall { color: inherit; opacity: .75; }
/* Desktop: in the right corner, level with the lamp name (the photo is 3 / 4, so 133.333% of the card width). */
@media (min-width: 782px) {
	.mm-lamp { position: relative; }
	.mm-lamp__actions { position: absolute; top: 0; right: 0; justify-items: end; margin-top: calc(133.333% + 1.1rem); }
	.mm-lamp__add { width: auto; padding: .5rem .85rem .4rem; font-size: .65rem; }
	.mm-shop .mm-lamps__grid { row-gap: 3.5rem; }
}

/* ---------- Product specs ---------- */
.mm-specs { margin: 0; display: grid; gap: .4rem; }
.mm-specs__row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; }
.mm-specs dt { color: var(--wp--preset--color--muted, #4f4f4f); }
.mm-specs dd { margin: 0; }
.mm-filter__btn:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
.mm-switch__btn:focus { outline: none; }

/* ---------- Category tiles (homepage) ---------- */
.mm-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--20); grid-template-columns: repeat(min(var(--mm-cat-count, 3), 4), 1fr); }
@media (max-width: 781px) { .mm-cats { grid-template-columns: repeat(2, 1fr); } }
.mm-cat__link { display: grid; gap: .35rem; text-decoration: none !important; color: inherit; text-align: center; }
.mm-cat__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wp--preset--color--mist, #f2f2f2); }
.mm-cat__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.mm-cat__link:hover .mm-cat__img { transform: scale(1.03); }
.mm-cat__name { margin-top: .6rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .28em; }
.mm-cat__cta { font-size: .6875rem; text-transform: uppercase; letter-spacing: .22em; color: var(--wp--preset--color--muted, #4f4f4f); }
.mm-cat__cta::after { content: " \2192"; }

/* Phones: switch labels hug the toggle; an odd last category tile takes the full row */
@media (max-width: 600px) {
	.mm-switch { gap: .75rem; font-size: .6875rem; letter-spacing: .16em; }
	.mm-switch__btn { flex: 1; max-width: 9rem; }
	.mm-switch__btn:first-child { text-align: right; }
	.mm-switch__btn:last-child { text-align: left; }
	.mm-switch__track { flex: none; }
	.mm-cats > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.mm-cats > li:last-child:nth-child(odd) .mm-cat__media { aspect-ratio: 16 / 10; }
}


/* ---------- Style your wall ---------- */
.mm-wall { --mm-wall-ink: var(--wp--preset--color--contrast, #111); --mm-wall-w: min(calc(100vw - 3rem), 112rem); display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 12.5rem; grid-template-areas: "tray stage side" "tray measure side"; gap: 0 2rem; align-items: start; position: relative; left: 50%; width: var(--mm-wall-w); max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; transform: translateX(-50%); }
.mm-wall__main { display: contents; }
.mm-wall__stage { grid-area: stage; }
.mm-wall__measure { grid-area: measure; }
.mm-wall__tray { grid-area: tray; }
.mm-wall__side { grid-area: side; display: grid; gap: 1.5rem; }
.mm-wall__title { margin: 0 0 1rem; font-size: 1.375rem; font-weight: 400; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; }
.mm-wall__steps { margin: 0; padding: 0; list-style: none; counter-reset: mm-step; display: grid; gap: .6rem; font-size: .875rem; line-height: 1.4; }
.mm-wall__steps li { counter-increment: mm-step; display: grid; grid-template-columns: 1.4rem 1fr; }
.mm-wall__steps li::before { content: counter(mm-step); opacity: .55; }
.mm-wall.is-photo .mm-wall__steps { display: none; }
.mm-wall__tools { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.mm-wall__own { min-width: 0; }
.mm-wall__own-note { margin: .6rem 0 0; font-size: .75rem; color: var(--wp--preset--color--muted, #4f4f4f); }
.mm-wall__remeasure, .mm-wall__back { margin-top: .75rem; margin-right: 1.25rem; }
.mm-wall__stage { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; user-select: none; background: #f4f6ee; }
.mm-wall__room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 700ms ease; pointer-events: none; }
.mm-wall__room--night, .mm-wall__night { opacity: 0; }
.mm-wall.is-night .mm-wall__room--night, .mm-wall.is-night .mm-wall__night { opacity: 1; }
.mm-wall.is-night .mm-wall__room--day { opacity: 0; }
.mm-wall__piece { position: absolute; display: block; padding: 0; margin: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.mm-wall__piece img { display: block; width: 100%; height: auto; pointer-events: none; }
.mm-wall__piece--painting { display: grid; }
.mm-wall__piece--painting img { grid-area: 1 / 1; transition: opacity 700ms ease; }
.mm-wall__piece.is-dragging { cursor: grabbing; z-index: 5; }
.mm-wall__piece:focus { outline: none; }
.mm-wall__piece:focus-visible { outline: 1px dashed var(--mm-wall-ink); outline-offset: 4px; }
/* Lamps: a soft contact shadow by day. At night: light from inside the lamp, and a soft wash on the wall
   that spills up and down from the openings (like a real wall light), not a round halo.
   --mm-glow is the light colour (warm white today; ready for the bulb's colours later). */
.mm-wall { --mm-glow: 255, 196, 128; --mm-glow-edge: 246, 160, 140; }
.mm-wall__piece--lamp img { position: relative; z-index: 1; filter: drop-shadow(3px 6px 6px rgba(60, 40, 20, .28)); transition: filter 700ms ease; }
.mm-wall__inner { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 900ms ease; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(255, 243, 214, .95) 0%, rgba(var(--mm-glow), .75) 40%, rgba(var(--mm-glow), .3) 85%); mix-blend-mode: screen; }
.mm-wall__glow { position: absolute; z-index: 0; left: 50%; top: 50%; width: 230%; height: 330%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 900ms ease; filter: blur(6px);
	background:
		radial-gradient(ellipse 34% 30% at 50% 22%, rgba(var(--mm-glow), .6) 0%, rgba(var(--mm-glow), 0) 100%),
		radial-gradient(ellipse 30% 26% at 50% 80%, rgba(var(--mm-glow), .48) 0%, rgba(var(--mm-glow), 0) 100%),
		radial-gradient(ellipse 48% 40% at 50% 50%, rgba(var(--mm-glow), .4) 0%, rgba(var(--mm-glow-edge), .16) 55%, rgba(var(--mm-glow-edge), 0) 100%);
	mix-blend-mode: screen; }
.mm-wall.is-night .mm-wall__glow, .mm-wall.is-night .mm-wall__inner { opacity: 1; }
.mm-wall.is-night .mm-wall__piece--lamp img { filter: sepia(.35) saturate(1.4) brightness(1.02) drop-shadow(0 0 5px rgba(var(--mm-glow), .6)); }
.mm-wall__measure { margin-top: 1.25rem; }
.mm-wall__hint, .mm-wall__status { margin: 0 0 1rem; font-size: .8125rem; color: var(--wp--preset--color--muted, #4f4f4f); }
.mm-wall__status:empty { display: none; }
.mm-wall__buy .mm-wall__status { margin: .75rem 0 0; }
.mm-wall__tray { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.mm-wall__pick { display: grid; grid-template-columns: 5rem 1fr; grid-template-rows: auto auto; column-gap: .85rem; row-gap: .15rem; align-content: center; align-items: center; justify-items: start; width: 100%; padding: 0; border: 0; background: none; cursor: grab; text-align: left; font: inherit; color: inherit; touch-action: manipulation; }
.mm-wall__thumb { grid-row: 1 / 3; display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: var(--wp--preset--color--mist, #f2f2f2); }
.mm-wall__thumb { overflow: hidden; }
.mm-wall__thumb img { width: auto; height: auto; max-width: 3.4rem; max-height: 4.2rem; pointer-events: none; }
.mm-wall__name { align-self: end; }
.mm-wall__price { align-self: start; }
.mm-wall__name { font-size: .8125rem; }
.mm-wall__name .mm-name-cap { text-transform: uppercase; }
.mm-wall__price { font-size: .8125rem; opacity: .75; }
.mm-wall__light, .mm-wall__reset { padding: .3rem 0; border: 0; background: none; font: inherit; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: inherit; cursor: pointer; }
.mm-wall .mm-wall__add { display: block; width: 100%; padding: 1.2rem .5rem 1.1rem; font-size: .8125rem; white-space: nowrap; }
.mm-wall__add:disabled { opacity: .35; cursor: default; }
/* Your own wall: the visitor's photo replaces the drawn room (and its paintings); at night it dims and warms so the lamps glow. */
.mm-wall__room--photo { transition: filter 700ms ease; }
.mm-wall.is-photo .mm-wall__room--day, .mm-wall.is-photo .mm-wall__room--night, .mm-wall.is-photo .mm-wall__piece--painting { display: none; }
.mm-wall.is-photo.is-night .mm-wall__room--photo { filter: brightness(.38) saturate(.7) sepia(.25); }
.mm-wall__ruler { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.mm-wall__ruler svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mm-wall__ruler line { stroke: #fff; stroke-width: 2; stroke-dasharray: 6 4; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.mm-wall__dot { position: absolute; width: 22px; height: 22px; padding: 0; margin: 0; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: rgba(17, 17, 17, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); cursor: grab; touch-action: none; pointer-events: auto; }
.mm-wall__dot::after { content: ""; position: absolute; inset: -12px; }
.mm-wall__dot.is-dragging { cursor: grabbing; background: rgba(17, 17, 17, .8); }
.mm-wall__dot:focus-visible { outline: 1px dashed #fff; outline-offset: 4px; }
.mm-wall__measure { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--wp--preset--color--line, #e3e3e3); font-size: .8125rem; }
.mm-wall__measure p { margin: 0 0 .85rem; }
.mm-wall__measure-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.mm-wall__cm { width: 5.5rem; margin: 0 .35rem; padding: .4rem .5rem; border: 1px solid var(--wp--preset--color--contrast, #111); border-radius: 0; background: transparent; font: inherit; color: inherit; }
.mm-wall__photo { position: relative; display: block; cursor: pointer; }
.mm-wall__photo input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mm-wall__photo span, .mm-wall__apply { display: inline-block; padding: .55rem 1rem; border: 1px solid currentColor; background: none; font: inherit; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: inherit; cursor: pointer; }
.mm-wall__photo span { display: block; text-align: center; }
.mm-wall__photo:focus-within span { outline: 1px dashed currentColor; outline-offset: 3px; }
.mm-wall__back, .mm-wall__remeasure, .mm-wall__skip { padding: .3rem 0; border: 0; background: none; font: inherit; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: inherit; cursor: pointer; }
.mm-wall__tips { margin-top: 1rem; font-size: .8125rem; color: var(--wp--preset--color--muted, #4f4f4f); }
.mm-wall__tips summary { cursor: pointer; }
.mm-wall__tips ul { margin: .6rem 0; padding-left: 1.1rem; }
.mm-wall__tips p { margin: 0; }
@media (max-width: 781px) { .mm-wall__dot { width: 26px; height: 26px; } }

/* ---------- Product reviews ---------- */
.mm-reviews__title { text-align: center; margin-bottom: .75rem; }
.mm-reviews__summary { display: flex; justify-content: center; align-items: center; gap: .6rem; font-size: .8125rem; color: var(--wp--preset--color--muted, #4f4f4f); margin: 0 0 2.5rem; }
.mm-reviews__list { list-style: none; margin: 0; padding: 0; }
.mm-reviews__item { padding: 1.5rem 0; border-top: 1px solid var(--wp--preset--color--line, #e3e3e3); }
.mm-reviews__item:last-child { border-bottom: 1px solid var(--wp--preset--color--line, #e3e3e3); }
.mm-reviews__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: 0 0 .6rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; }
.mm-reviews__date { opacity: .6; }
.mm-reviews__stars { display: inline-flex; gap: 2px; }
.mm-reviews__stars svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.mm-reviews__stars svg.is-on { fill: currentColor; }
.mm-reviews__label { font-size: .625rem; letter-spacing: .12em; padding: .2rem .55rem .15rem; border: 1px solid currentColor; border-radius: 999px; opacity: .7; }
.mm-reviews__text { font-size: .875rem; line-height: 1.7; }
.mm-reviews__text p { margin: 0; }
.mm-reviews__note { margin-top: 1.25rem; font-size: .75rem; opacity: .6; text-align: center; }

/* Phones: all five lamps visible at once, small, in one row under the room */
@media (max-width: 781px) {
	.mm-wall { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; left: 0; width: auto; transform: none; }
	.mm-wall__side { display: contents; }
	.mm-wall__guide { order: 1; }
	.mm-wall__stage { order: 2; }
	.mm-wall__measure { order: 3; margin-top: 0; }
	.mm-wall__tray { order: 4; margin-top: 0; }
	.mm-wall__own { order: 5; }
	.mm-wall__buy { order: 6; }
	.mm-wall__tools { order: 7; }
	.mm-wall__title { display: none; }
	.mm-wall__steps { font-size: .875rem; gap: .35rem; }
	.mm-wall__tray { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; overflow: visible; }
	.mm-wall__pick { display: grid; grid-template-columns: 1fr; width: auto; justify-items: center; text-align: center; gap: .25rem; }
	.mm-wall__thumb { grid-row: auto; }
	.mm-wall__thumb img { max-width: 2.6rem; max-height: 3.2rem; }
	.mm-wall__name { font-size: .6875rem; }
	.mm-wall__price { font-size: .6875rem; }
}
