/* ==========================================================================
   Mayil Boutique – main stylesheet
   Plum, rani pink, marigold zari and ivory. Arches, scalloped jhalar edges,
   a rotating mandala, an orbiting badge and lightweight CSS motion.
   Hand-coded, AI-assisted, error-checked.
   ========================================================================== */

:root {
	--night: #14060f;
	--plum: #22091f;
	--wine: #5b1640;
	--rani: #d81b60;
	--rani-dk: #ad1457;
	--gold: #f4b740;
	--marigold: #f6ad2b;
	--teal: #0e7c7b;
	--ivory: #fbf4ec;
	--blush: #f3e3dc;
	--mauve: #c9adc0;
	--line: rgba(251, 244, 236, 0.16);

	--display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
	--body: "Jost", "Futura", system-ui, -apple-system, "Segoe UI", sans-serif;

	--gutter: clamp(1rem, 4vw, 3.5rem);
	--max: 1320px;
	--r-sm: 12px;
	--r-lg: 24px;
	--arch: 999px 999px var(--r-sm) var(--r-sm);
	--header-h: 72px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
	margin: 0;
	background: var(--ivory);
	color: var(--plum);
	font-family: var(--body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0 0 1em; }
:where(ul[role="list"]) { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--rani); color: var(--ivory); }

.mb-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}
.mb-skip {
	position: absolute; left: 1rem; top: -100px; z-index: 200;
	background: var(--gold); color: var(--plum);
	padding: .7em 1.1em; border-radius: 999px; font-weight: 600;
}
.mb-skip:focus { top: 1rem; }
.mb-icon { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Buttons (with a zari shine on hover) ---------- */
.mb-btn {
	position: relative; overflow: hidden; isolation: isolate;
	display: inline-flex; align-items: center; gap: .55em;
	padding: .9em 1.6em;
	border: 1.5px solid transparent; border-radius: 999px;
	font: 600 .95rem/1 var(--body); letter-spacing: .02em;
	text-decoration: none; cursor: pointer;
	transition: transform .2s var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mb-btn::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .7s var(--ease);
}
.mb-btn:hover::after { transform: translateX(120%); }
.mb-btn:hover { transform: translateY(-2px); }
.mb-btn:active { transform: translateY(0); }
.mb-btn--rani { background: var(--rani); color: var(--ivory); }
.mb-btn--rani:hover { background: var(--rani-dk); }
.mb-btn--plum { background: var(--plum); color: var(--ivory); }
.mb-btn--plum:hover { background: var(--wine); }
.mb-btn--ivory { background: var(--ivory); color: var(--plum); }
.mb-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.mb-btn--ghost:hover { background: rgba(251, 244, 236, .1); }

.mb-link { font-weight: 600; text-underline-offset: .3em; text-decoration-color: var(--rani); text-decoration-thickness: 2px; }
.mb-link:hover { color: var(--rani); }

/* ---------- Header ---------- */
.mb-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(34, 9, 31, .94); color: var(--ivory);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--line);
}
.mb-header__in {
	max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
	min-height: var(--header-h); padding: 0 var(--gutter);
	display: flex; align-items: center; gap: 1.5rem;
}
.mb-logo a { font: italic 600 1.5rem/1 var(--display); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.mb-logo img { max-height: 48px; width: auto; }

.mb-nav { margin-left: auto; }
.mb-nav__list { display: flex; gap: 1.8rem; list-style: none; margin: 0; padding: 0; }
.mb-nav__list a {
	position: relative; text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--mauve);
	padding: .3em 0;
}
.mb-nav__list a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--gold); transform: scaleX(0); transform-origin: right;
	transition: transform .35s var(--ease);
}
.mb-nav__list a:hover,
.mb-nav__list .current-menu-item > a { color: var(--ivory); }
.mb-nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }

.mb-header__actions { display: flex; align-items: center; gap: .5rem; }
.mb-iconbtn {
	display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer;
}
.mb-iconbtn:hover { border-color: var(--gold); color: var(--gold); }
.mb-pill {
	display: inline-flex; align-items: center; gap: .5em;
	height: 44px; padding: 0 1.15em; border-radius: 999px;
	font: 600 .9rem/1 var(--body); text-decoration: none; cursor: pointer;
}
.mb-pill--wa { background: var(--rani); color: var(--ivory); border: 0; }
.mb-pill--wa:hover { background: var(--rani-dk); }
.mb-pill--menu { background: transparent; color: var(--ivory); border: 1px solid var(--line); }
.mb-pill--menu:hover { border-color: var(--gold); }
.mb-burger,
.mb-burger::before { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.mb-burger::before { content: ""; position: absolute; top: 6px; width: 10px; }
.mb-burger { transform: translateY(-3px); }

.mb-search {
	max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
	padding: 0 var(--gutter) 1rem; display: flex; gap: .6rem;
}
.mb-search[hidden] { display: none; }
.mb-search input[type="search"] {
	flex: 1; min-width: 0; height: 48px; padding: 0 1.2em;
	border-radius: 999px; border: 1px solid var(--line);
	background: rgba(251, 244, 236, .06); color: var(--ivory);
	font: 500 1rem var(--body);
}

/* ---------- Full-screen category menu ---------- */
.mb-overlay {
	position: fixed; inset: 0; z-index: 100;
	background:
		radial-gradient(60% 50% at 85% 15%, rgba(216, 27, 96, .45), transparent 70%),
		radial-gradient(50% 50% at 10% 90%, rgba(14, 124, 123, .4), transparent 70%),
		var(--plum);
	color: var(--ivory);
	display: flex; flex-direction: column;
	padding: 1.2rem var(--gutter) 2rem; overflow-y: auto;
	animation: mb-fade .35s ease;
}
.mb-overlay[hidden] { display: none; }
.mb-overlay__top { display: flex; justify-content: space-between; align-items: center; }
.mb-overlay__brand { font: italic 600 1.4rem var(--display); }
.mb-iconbtn--light:hover { background: var(--gold); color: var(--plum); border-color: var(--gold); }
.mb-overlay__list { list-style: none; margin: auto 0; padding: 2rem 0; display: grid; gap: .1rem; }
.mb-overlay__list li { animation: mb-rise .5s var(--ease) both; }
.mb-overlay__list li:nth-child(2) { animation-delay: .04s; }
.mb-overlay__list li:nth-child(3) { animation-delay: .08s; }
.mb-overlay__list li:nth-child(4) { animation-delay: .12s; }
.mb-overlay__list li:nth-child(5) { animation-delay: .16s; }
.mb-overlay__list li:nth-child(6) { animation-delay: .2s; }
.mb-overlay__list li:nth-child(7) { animation-delay: .24s; }
.mb-overlay__list li:nth-child(n+8) { animation-delay: .28s; }
.mb-overlay__list a {
	font: italic 500 clamp(2rem, 6.5vw, 4.8rem)/1.08 var(--display);
	text-decoration: none; letter-spacing: -.02em;
	transition: color .2s ease, padding-left .3s var(--ease);
}
.mb-overlay__list a:hover { color: var(--gold); padding-left: .3em; }
.mb-overlay__foot { display: flex; flex-wrap: wrap; gap: 1.5rem; font-weight: 600; }
.mb-overlay__foot a { text-decoration: none; color: var(--mauve); }
.mb-overlay__foot a:hover { color: var(--gold); }
body.mb-locked { overflow: hidden; }
@keyframes mb-fade { from { opacity: 0; } }
@keyframes mb-rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Scalloped "jhalar" edge with zari dots ---------- */
.mb-edge {
	position: relative;
	height: 18px; margin-top: -1px;
	background:
		radial-gradient(circle at 50% 0, var(--edge) 13px, transparent 13.5px) 0 0 / 30px 18px repeat-x,
		var(--next);
}
.mb-edge::after {
	content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 6px;
	background: radial-gradient(circle, var(--gold) 2px, transparent 2.6px) 0 0 / 30px 6px repeat-x;
}

/* ---------- Sections ---------- */
.mb-sec { padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); }
.mb-sec > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.mb-sec--tight { padding-top: 0; }
.mb-sec--ivory { background: var(--ivory); color: var(--plum); }
.mb-sec--plum { background: var(--plum); color: var(--ivory); }
.mb-sec--marigold { background: var(--marigold); color: var(--plum); }

.mb-h2 {
	font: 500 clamp(2.1rem, 4.8vw, 4rem)/1.02 var(--display);
	letter-spacing: -.02em; max-width: 18ch;
}
.mb-sec__head {
	display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
	gap: 1rem 2rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

/* Scroll reveal (only when JS is on, so content is never hidden without it) */
.mb-js [data-mb-reveal] {
	opacity: 0; transform: translateY(28px);
	transition: opacity .8s ease, transform .8s var(--ease);
	transition-delay: calc(var(--stagger, 0) * 90ms);
}
.mb-js [data-mb-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.mb-hero {
	position: relative; overflow: hidden; isolation: isolate;
	background:
		radial-gradient(45% 55% at 82% 38%, rgba(216, 27, 96, .38), transparent 70%),
		radial-gradient(35% 45% at 6% 96%, rgba(14, 124, 123, .38), transparent 70%),
		var(--plum);
	color: var(--ivory);
	padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.mb-hero::before {
	/* slow drifting glow, moved with transform only */
	content: ""; position: absolute; z-index: -1;
	width: 42vw; height: 42vw; left: 30%; top: -20%;
	border-radius: 50%; background: rgba(244, 183, 64, .16); filter: blur(70px);
	animation: mb-drift 16s ease-in-out infinite alternate;
}
@keyframes mb-drift { to { transform: translate(-18vw, 28vh) scale(1.2); } }

.mb-hero__in {
	max-width: var(--max); margin: 0 auto;
	display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(2rem, 5vw, 5rem); align-items: center;
}

.mb-kicker {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .45em 1em .45em .8em; margin-bottom: 1.6rem;
	border: 1px solid var(--line); border-radius: 999px;
	font-size: .85rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mauve);
}
.mb-kicker__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--rani); }
.mb-kicker__dot::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rani);
	animation: mb-ping 1.8s ease-out infinite;
}
@keyframes mb-ping { to { transform: scale(3); opacity: 0; } }

.mb-hero__title {
	font: 500 clamp(3rem, 7.4vw, 7.2rem)/.98 var(--display);
	letter-spacing: -.025em;
	margin-bottom: 1.6rem;
}

/* Rotating word */
.mb-rotator {
	display: grid; justify-items: start;
	font-style: italic; color: var(--gold);
	padding-bottom: .06em;
}
.mb-rotator__word {
	grid-area: 1 / 1;
	opacity: 0; transform: translateY(.5em); filter: blur(8px);
	transition: opacity .7s ease, transform .7s var(--ease), filter .7s ease;
}
.mb-rotator__word.is-on { opacity: 1; transform: none; filter: none; }
.mb-rotator__word.is-out { opacity: 0; transform: translateY(-.5em); filter: blur(8px); }

.mb-hero__lead { color: var(--mauve); font-size: 1.1rem; max-width: 46ch; margin-bottom: 2rem; }
.mb-hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Hero art: mandala, arch, orbit badge, swinging tag, sparkles */
.mb-hero__art { position: relative; display: grid; place-items: center; padding: 6% 4%; }
.mb-mandala {
	position: absolute; inset: 0; margin: auto;
	width: 112%; max-width: 640px; color: var(--gold); opacity: .3;
	animation: mb-spin 90s linear infinite;
}
@keyframes mb-spin { to { transform: rotate(360deg); } }

.mb-arch {
	position: relative; z-index: 1;
	width: min(420px, 82%); aspect-ratio: 3 / 4;
	border-radius: var(--arch);
	overflow: hidden;
	background: linear-gradient(170deg, var(--blush), #f8d9cf 60%, #f2c5bb);
	border: 3px solid var(--gold);
	outline: 1.5px solid rgba(244, 183, 64, .6); outline-offset: 10px;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.mb-arch img { width: 100%; height: 100%; object-fit: cover; }
.mb-arch .mb-arch__illus { object-fit: contain; padding: 14% 8% 4%; animation: mb-float 6s ease-in-out infinite; }
@keyframes mb-float { 50% { transform: translateY(-10px); } }

.mb-orbit {
	position: absolute; z-index: 2; left: 2%; bottom: 8%;
	width: clamp(110px, 12vw, 150px); aspect-ratio: 1;
	display: grid; place-items: center;
}
.mb-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: mb-spin 20s linear infinite; }
.mb-orbit__disc { fill: var(--rani); }
.mb-orbit text { fill: var(--ivory); font: 600 15px var(--body); letter-spacing: .12em; text-transform: uppercase; }
.mb-orbit__core { position: relative; color: var(--gold); font-size: 2rem; line-height: 1; }

.mb-pricetag {
	position: absolute; z-index: 2; right: 4%; top: 10%;
	padding: .7em 1.2em .7em 1.9em;
	background: var(--gold); color: var(--plum);
	font: italic 600 clamp(1rem, 1.6vw, 1.3rem)/1 var(--display);
	clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
	transform-origin: 0 50%;
	animation: mb-swing 3.2s ease-in-out infinite alternate;
}
.mb-pricetag::before {
	content: ""; position: absolute; left: 12px; top: 50%;
	width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--plum);
}
@keyframes mb-swing { from { transform: rotate(4deg); } to { transform: rotate(12deg); } }

.mb-spark {
	position: absolute; z-index: 3; left: var(--x); top: var(--y);
	width: 18px; height: 18px; background: var(--gold);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	animation: mb-twinkle 2.6s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes mb-twinkle {
	0%, 100% { transform: scale(.3) rotate(0); opacity: .2; }
	50% { transform: scale(1) rotate(45deg); opacity: 1; }
}

/* ---------- Colour animations (hero headline + footer wordmark) ----------
   Only colour, outline colour, background-position and a tiny lift are animated.
   Each block sets its palette: --a0 base, --a1 accent, --a2 highlight, --a3 final. */
.mb-anim { --a0: var(--ivory); --a1: var(--gold); --a2: #fff3d6; --a3: var(--gold); }
.mb-wordmark.mb-anim { --a0: var(--gold); --a1: var(--rani); --a2: var(--ivory); --a3: var(--ivory); }

.mb-anim__line { display: block; }
.mb-w { display: inline-block; white-space: nowrap; }
.mb-l { display: inline-block; }

.mb-anim--wave .mb-l {
	-webkit-text-stroke: .02em transparent;
	animation: mb-wave 5.2s cubic-bezier(.45, 0, .55, 1) infinite;
	animation-delay: calc(var(--i) * 85ms);
}
@keyframes mb-wave {
	0%, 18%, 100% { color: var(--a0); -webkit-text-stroke-color: transparent; transform: translateY(0); }
	30% { color: var(--a1); -webkit-text-stroke-color: transparent; transform: translateY(-.05em); }
	46% { color: transparent; -webkit-text-stroke-color: var(--a2); transform: translateY(0); }
	62% { color: var(--a3); -webkit-text-stroke-color: transparent; }
}

/* Zari shimmer: a band of gold light slides through the letters */
.mb-anim--sweep .mb-anim__line {
	/* room for descenders and italic overhang, which background-clip would otherwise cut */
	padding: 0 .1em .16em; margin: 0 -.1em -.16em;
	background: linear-gradient(100deg,
		var(--a0) 0%, var(--a0) 38%,
		var(--a1) 46%, var(--a2) 50%, var(--a1) 54%,
		var(--a0) 62%, var(--a0) 100%) 0 0 / 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: mb-sweep 5s linear infinite;
}
.mb-anim--sweep .mb-anim__line ~ .mb-anim__line { animation-delay: -1.4s; }
@keyframes mb-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

.mb-anim--flip .mb-anim__line { animation: mb-flip 4s steps(1, end) infinite; }
.mb-anim--flip .mb-anim__line ~ .mb-anim__line { animation-delay: -2s; }
@keyframes mb-flip {
	0% { color: var(--a0); }
	25% { color: var(--a1); }
	50% { color: var(--a2); }
	75% { color: transparent; -webkit-text-stroke: .02em var(--a3); }
}

.mb-anim--none .mb-anim__line { color: var(--a0); }

.mb-anim.is-paused .mb-l,
.mb-anim.is-paused .mb-anim__line { animation-play-state: paused; }

/* ---------- Categories (arches) ---------- */
.mb-intro {
	display: grid; grid-template-columns: 1.2fr 1fr;
	gap: 1.5rem 4rem; align-items: end;
	margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.mb-intro__side p { max-width: 44ch; }

.mb-cats {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.6rem);
}
.mb-cat a { display: grid; justify-items: center; text-align: center; gap: .3rem; text-decoration: none; }
.mb-cat__arch {
	width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
	display: grid; place-items: center;
	border-radius: var(--arch);
	background: linear-gradient(170deg, var(--blush), #f1d3cb);
	color: var(--wine);
	outline: 1.5px solid transparent; outline-offset: 6px;
	transition: outline-color .3s ease, transform .4s var(--ease);
	margin-bottom: .7rem;
}
.mb-cat:nth-child(4n+2) .mb-cat__arch { background: linear-gradient(170deg, #fbe7c2, #f5cf86); }
.mb-cat:nth-child(4n+3) .mb-cat__arch { background: linear-gradient(170deg, #d9eeea, #a9d6d0); color: #0a4d4c; }
.mb-cat:nth-child(4n+4) .mb-cat__arch { background: linear-gradient(170deg, #f6d2e0, #eaa3c0); }
.mb-cat__arch img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mb-cat__arch .mb-garment { width: 50%; transition: transform .5s var(--ease); }
.mb-cat a:hover .mb-cat__arch { outline-color: var(--rani); transform: translateY(-4px); }
.mb-cat a:hover .mb-cat__arch img { transform: scale(1.07); }
.mb-cat a:hover .mb-garment { transform: translateY(-8px) rotate(-4deg); }
.mb-cat__name { font: 500 1.35rem/1.1 var(--display); }
.mb-cat a:hover .mb-cat__name { color: var(--rani); }
.mb-cat__count { font-size: .85rem; color: var(--wine); opacity: .75; }

/* ---------- Ticker (two rows, opposite directions) ---------- */
.mb-ticker { overflow: hidden; }
.mb-ticker__track { display: flex; width: max-content; animation: mb-marquee 42s linear infinite; }
.mb-ticker__track--rev { animation-direction: reverse; animation-duration: 50s; }
.mb-ticker__set { display: flex; list-style: none; margin: 0; padding: 0; }
.mb-ticker__track:first-child { background: var(--rani); color: var(--ivory); }
.mb-ticker__track:first-child li { padding: .9rem 0; font: italic 500 clamp(1.15rem, 2vw, 1.6rem)/1 var(--display); white-space: nowrap; }
.mb-ticker__track--rev { background: var(--plum); color: var(--gold); }
.mb-ticker__track--rev li { padding: .75rem 0; font: 600 .8rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.mb-ticker__set li::after { content: "✿"; margin: 0 1.6rem; color: var(--gold); }
.mb-ticker__track--rev .mb-ticker__set li::after { color: var(--rani); }
.mb-ticker:hover .mb-ticker__track { animation-play-state: paused; }
@keyframes mb-marquee { to { transform: translateX(-50%); } }
/* The two rows have their own backgrounds; keep them full width */
.mb-ticker { background: linear-gradient(var(--rani) 50%, var(--plum) 50%); }

/* ---------- Occasions (arch tiles) ---------- */
.mb-occ { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.mb-tile {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; align-items: flex-start;
	min-height: 420px; padding: 2rem 1.6rem 1.8rem;
	border-radius: 220px 220px var(--r-lg) var(--r-lg);
	color: var(--ivory);
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mb-tile::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
	transform: translateX(-120%); transition: transform .9s var(--ease);
}
.mb-tile:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -28px rgba(34, 9, 31, .7); }
.mb-tile:hover::after { transform: translateX(120%); }
.mb-tile--1 { background: linear-gradient(165deg, var(--rani), var(--wine)); }
.mb-tile--2 { background: linear-gradient(165deg, var(--gold), #e2672b); color: var(--plum); }
.mb-tile--3 { background: linear-gradient(165deg, var(--teal), #083a39); }
.mb-tile--4 { background: linear-gradient(165deg, var(--wine), var(--night)); }
.mb-tile__art {
	width: 46%; margin: 1.6rem auto 1.4rem; opacity: .9; stroke-width: 2.4;
	color: var(--gold); transition: transform .6s var(--ease);
}
.mb-tile--2 .mb-tile__art { color: var(--plum); }
.mb-tile:hover .mb-tile__art { transform: rotate(-6deg) scale(1.08); }
.mb-tile__title { font: italic 500 clamp(1.7rem, 2.4vw, 2.2rem)/1.05 var(--display); margin-bottom: .5rem; }
.mb-tile p { font-size: .95rem; opacity: .9; }
.mb-tile__link {
	margin-top: auto; display: inline-flex; align-items: center; gap: .6rem;
	font-weight: 600; text-decoration: none;
}
.mb-tile__link::before { content: ""; position: absolute; inset: 0; } /* whole tile clickable */
.mb-tile__arrow { position: relative; width: 26px; height: 2px; background: currentColor; transition: width .3s var(--ease); }
.mb-tile__arrow::after {
	content: ""; position: absolute; right: 0; top: -4px; width: 10px; height: 10px;
	border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
}
.mb-tile:hover .mb-tile__arrow { width: 40px; }

/* ---------- Video call band ---------- */
.mb-vc { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.mb-vc .mb-h2 { margin-bottom: 1.2rem; }
.mb-vc__main p { max-width: 50ch; margin-bottom: 1.8rem; }
.mb-vc__points { display: grid; gap: .7rem; }
.mb-vc__points li {
	display: flex; align-items: center; gap: .9rem;
	padding: 1rem 1.3rem; border-radius: 999px;
	background: var(--ivory); font-weight: 600;
	box-shadow: 0 10px 24px -18px rgba(34, 9, 31, .6);
	transition: transform .3s var(--ease);
}
.mb-vc__points li:hover { transform: translateX(6px); }
.mb-vc__points li::before { content: "✿"; color: var(--rani); font-size: 1.2rem; }

/* ---------- Boutique location ---------- */
.mb-store { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; }
.mb-store .mb-h2 { margin-bottom: 1.6rem; }
.mb-store__line { display: flex; gap: .6rem; font-size: 1.1rem; max-width: 40ch; }
.mb-store__line .mb-icon { margin-top: .25em; color: var(--gold); }
.mb-store__hours { color: var(--mauve); }
.mb-store__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.mb-store__map {
	min-height: 320px; border-radius: var(--r-lg); overflow: hidden;
	border: 2px solid var(--gold); background: var(--wine);
}
.mb-store__map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.mb-store__placeholder {
	height: 100%; min-height: 320px;
	display: grid; place-content: center; justify-items: center; gap: .8rem;
	color: var(--ivory); text-decoration: none; font-weight: 600;
	background:
		radial-gradient(circle, rgba(244, 183, 64, .25) 1.5px, transparent 2px) 0 0 / 22px 22px,
		var(--wine);
}
.mb-store__placeholder .mb-icon { width: 54px; height: 54px; color: var(--gold); animation: mb-float 3s ease-in-out infinite; }

/* ---------- Footer ---------- */
.mb-footer { background: var(--night); color: var(--ivory); padding: clamp(3rem, 6vw, 5rem) var(--gutter) 1.5rem; overflow: hidden; }
.mb-footer__cols { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.mb-footer__h { font: italic 500 1.3rem/1 var(--display); margin-bottom: 1rem; color: var(--gold); }
.mb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mb-footer a { text-decoration: none; color: var(--mauve); }
.mb-footer a:hover { color: var(--gold); }
.mb-footer p { color: var(--mauve); font-size: .95rem; }
.mb-social { display: flex; gap: .5rem; margin-top: 1rem; }
.mb-social a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.mb-social a:hover { border-color: var(--gold); }
.mb-wordmark {
	max-width: var(--max); margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
	padding-bottom: .22em;
	font: italic 500 10vw/.9 var(--display);
	letter-spacing: -.03em; white-space: nowrap; text-align: center;
}
.mb-wordmark span { display: inline-block; }
.mb-footer__base {
	max-width: var(--max); margin: 0 auto;
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
	padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--mauve);
}

/* ---------- Basic pages ---------- */
.mb-page { max-width: 900px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); }
.mb-page--shop { max-width: calc(var(--max) + 2 * var(--gutter)); }
.mb-page__title { font: 500 clamp(2.2rem, 5vw, 3.8rem)/1.02 var(--display); letter-spacing: -.02em; margin-bottom: 1.5rem; }
.mb-entry { padding: 1.5rem 0; border-bottom: 1px solid var(--blush); }
.mb-entry__title { font: 500 1.6rem/1.2 var(--display); margin-bottom: .5rem; }
.mb-prose { max-width: 68ch; }
.mb-prose a { color: var(--rani-dk); font-weight: 600; }

.mb-empty {
	display: grid; justify-items: center; gap: 1rem; text-align: center;
	padding: 3rem 1rem; border: 2px dashed var(--blush); border-radius: var(--r-lg); color: var(--wine);
}
.mb-empty .mb-garment { width: 110px; }
.mb-empty p { max-width: 38ch; color: var(--plum); margin: 0; }

/* ---------- Product cards ---------- */
.mb-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
}
.mb-card { display: flex; flex-direction: column; }
.mb-card__img {
	display: grid; place-items: center;
	aspect-ratio: 4 / 5; overflow: hidden;
	background: var(--blush); color: var(--wine);
	border-radius: var(--r-lg);
}
.mb-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mb-card:hover .mb-card__img img { transform: scale(1.035); }
.mb-card__img .mb-garment { width: 45%; }
.mb-card__body { padding: .85rem .2rem 0; display: grid; gap: .35rem; }
.mb-card__name { font: 600 1rem/1.3 var(--body); }
.mb-card__name a { text-decoration: none; }
.mb-card__name a:hover { text-decoration: underline; text-underline-offset: .2em; }
.mb-card__price { font: 600 1rem var(--display); letter-spacing: -.02em; }
.mb-card__price del { opacity: .5; font-weight: 600; margin-right: .3em; }
.mb-card__price ins { text-decoration: none; }
.mb-card__wa {
	display: inline-flex; align-items: center; gap: .45em; justify-self: start;
	margin-top: .3rem; padding: .55em .95em; border-radius: 999px;
	background: var(--plum); color: var(--ivory);
	font: 700 .85rem/1 var(--body); text-decoration: none;
}
.mb-card__wa .mb-icon { color: var(--rani); }
.mb-card__wa:hover { background: var(--rani); color: var(--plum); }
.mb-card__wa:hover .mb-icon { color: var(--plum); }

.mb-empty {
	display: grid; justify-items: center; gap: 1rem; text-align: center;
	padding: 3rem 1rem; border: 2px dashed var(--blush); border-radius: var(--r-lg);
	color: var(--wine);
}
.mb-empty .mb-garment { width: 110px; }
.mb-empty p { max-width: 36ch; color: var(--plum); margin: 0; }


/* ---------- Card extras (Phase 2) ---------- */
.mb-card__media { position: relative; }
.mb-card__img { position: relative; }
.mb-card__alt {
	position: absolute; inset: 0;
	opacity: 0; transition: opacity .3s ease;
}
.mb-card--flip:hover .mb-card__alt { opacity: 1; }
.mb-badge {
	position: absolute; top: .75rem; left: .75rem;
	padding: .4em .75em; border-radius: 999px;
	background: var(--plum); color: var(--gold);
	font: 600 .72rem/1 var(--display);
}
.mb-badge--muted { background: var(--ivory); color: var(--plum); }
.mb-card__qv {
	position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
	padding: .7em 1em; border: 0; border-radius: 999px;
	background: var(--ivory); color: var(--plum);
	font: 700 .85rem/1 var(--body); cursor: pointer;
	opacity: 0; transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
}
.mb-card:hover .mb-card__qv,
.mb-card__qv:focus-visible { opacity: 1; transform: none; }
.mb-card__qv:hover { background: var(--plum); color: var(--ivory); }
@media (hover: none) {
	.mb-card__qv { display: none; }
}

.mb-dots { display: flex; align-items: center; gap: .3rem; }
.mb-dot {
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--dot); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.mb-dots--lg .mb-dot { width: 22px; height: 22px; }
.mb-dots__more { font-size: .78rem; font-weight: 700; color: var(--wine); }

/* ---------- Shop header ---------- */
.mb-shophead { background: var(--plum); color: var(--ivory); padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(2rem, 4vw, 3rem); }
.mb-shophead__in { max-width: var(--max); margin: 0 auto; }
.mb-shophead__title {
	font: 600 clamp(2.4rem, 8vw, 6.5rem)/.9 var(--display);
	letter-spacing: -.05em;
	margin: .6rem 0 0;
}
.mb-shophead__desc { color: var(--mauve); max-width: 56ch; margin-top: 1rem; }
.mb-shophead__desc p:last-child { margin-bottom: 0; }

.mb-crumbs { font-size: .85rem; color: var(--mauve); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.mb-crumbs a { color: inherit; text-decoration: none; }
.mb-crumbs a:hover { text-decoration: underline; }
.mb-crumbs__sep { opacity: .5; }

/* ---------- Shop body ---------- */
.mb-shop { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) clamp(3rem, 6vw, 5rem); }

.mb-chips {
	display: flex; gap: .5rem; overflow-x: auto;
	padding-bottom: .5rem; margin-bottom: 1.2rem;
	scrollbar-width: thin;
}
.mb-chip {
	flex: none; padding: .6em 1.1em; border-radius: 999px;
	border: 1.5px solid var(--plum); text-decoration: none;
	font-weight: 700; font-size: .9rem; white-space: nowrap;
}
.mb-chip:hover { background: var(--blush); }
.mb-chip.is-active { background: var(--plum); color: var(--ivory); }

.mb-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1rem; margin-bottom: 1.6rem; padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--blush);
}
.mb-toolbar__right { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.mb-toolbar .woocommerce-result-count { margin: 0; font-size: .9rem; color: var(--wine); }
.mb-toolbar .woocommerce-ordering { margin: 0; }
.mb-toolbar select {
	height: 42px; padding: 0 2.2em 0 1em;
	border-radius: 999px; border: 1.5px solid var(--plum);
	background: var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 1em center / 11px;
	font: 600 .9rem var(--body); color: var(--plum);
	appearance: none; cursor: pointer;
}

.mb-sizefilter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mb-sizefilter__label { font-weight: 700; font-size: .9rem; margin-right: .3rem; }
.mb-sizefilter__clear { margin-left: .4rem; font-size: .9rem; }

/* Size chip: used in filters (links) and product page (radio labels) */
.mb-size {
	position: relative;
	display: inline-grid; place-items: center;
	min-width: 48px; height: 44px; padding: 0 .8em;
	border: 1.5px solid var(--plum); border-radius: var(--r-sm);
	font: 700 .9rem/1 var(--body); text-decoration: none; cursor: pointer;
	background: transparent;
}
.mb-size:hover { background: var(--blush); }
.mb-size.is-active { background: var(--plum); color: var(--ivory); }
.mb-size input,
.mb-swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mb-size:has(input:checked) { background: var(--plum); color: var(--ivory); }
.mb-size:has(input:focus-visible),
.mb-swatch:has(input:focus-visible) { outline: 3px solid var(--rani); outline-offset: 2px; }

.mb-pager { margin-top: 2.5rem; }
.mb-pager ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.mb-pager .page-numbers a,
.mb-pager .page-numbers span {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .8em;
	border-radius: 999px; border: 1.5px solid var(--plum); text-decoration: none; font-weight: 700;
}
.mb-pager .page-numbers span.current { background: var(--plum); color: var(--ivory); }
.mb-pager .page-numbers a:hover { background: var(--blush); }

/* WooCommerce notices */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	list-style: none; margin: 0 0 1.5rem; padding: 1rem 1.2rem;
	border-radius: var(--r-sm); background: var(--blush); border-left: 4px solid var(--rani);
}
.woocommerce-error { border-left-color: #c62828; }

/* ---------- Product page ---------- */
.mb-pdp-wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 1.4rem var(--gutter) clamp(3rem, 6vw, 5rem); }
.mb-pdp-wrap > .mb-crumbs { color: var(--wine); margin-bottom: 1.4rem; }

.mb-pdp {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
}

.mb-gallery { position: sticky; top: calc(var(--header-h) + 1rem); }
.mb-gallery__main {
	position: relative; overflow: hidden;
	aspect-ratio: 4 / 5; border-radius: var(--r-lg);
	background: var(--blush); color: var(--wine);
	display: grid; place-items: center;
}
.mb-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.mb-gallery__main .mb-garment { width: 45%; }
.mb-gallery__thumbs { display: flex; gap: .6rem; margin-top: .8rem; overflow-x: auto; }
.mb-gallery__thumbs button {
	width: 76px; aspect-ratio: 4 / 5; padding: 0; overflow: hidden;
	border: 2px solid transparent; border-radius: var(--r-sm);
	background: var(--blush); cursor: pointer;
}
.mb-gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.mb-gallery__thumbs button.is-active { border-color: var(--plum); }

.mb-pdp__cat { font-weight: 700; font-size: .9rem; color: var(--wine); text-decoration: none; }
.mb-pdp__cat:hover { text-decoration: underline; }
.mb-pdp__title {
	font: 600 clamp(1.8rem, 3.6vw, 3rem)/1 var(--display);
	letter-spacing: -.04em;
	margin: .4rem 0 .8rem;
}
.mb-pdp__price { font: 600 clamp(1.4rem, 2.4vw, 1.8rem)/1.1 var(--display); letter-spacing: -.03em; margin-bottom: 1.2rem; }
.mb-pdp__price del { font-size: .65em; opacity: .5; margin-right: .3em; }
.mb-pdp__price ins { text-decoration: none; }
.mb-pdp__short { max-width: 52ch; margin-bottom: 1.4rem; }

.mb-pick { border: 0; padding: 0; margin: 0 0 1.4rem; }
.mb-pick__legend {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	width: 100%; padding: 0; margin-bottom: .7rem; font-weight: 700;
}
.mb-pick__value { font-weight: 500; color: var(--wine); }
.mb-pick__chart {
	background: none; border: 0; padding: 0; cursor: pointer;
	font: 600 .9rem var(--body); color: var(--plum);
	text-decoration: underline; text-underline-offset: .25em;
}
.mb-pick__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.mb-pick.is-missing .mb-size { border-color: #c62828; }
.mb-pick.is-missing .mb-pick__legend > span { color: #c62828; }

.mb-swatch {
	position: relative; width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer;
	border: 2px solid transparent;
}
.mb-swatch__dot {
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--dot); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.mb-swatch:has(input:checked) { border-color: var(--plum); }
.mb-pick.is-missing .mb-swatch { border-color: rgba(198, 40, 40, .5); }

.mb-qty { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.mb-qty__label { font-weight: 700; }
.mb-qty__ctl { display: inline-flex; border: 1.5px solid var(--plum); border-radius: 999px; overflow: hidden; }
.mb-qty__ctl button {
	width: 44px; height: 44px; border: 0; background: transparent;
	font: 700 1.2rem var(--body); cursor: pointer; color: var(--plum);
}
.mb-qty__ctl button:hover { background: var(--blush); }
.mb-qty__ctl input {
	width: 48px; border: 0; text-align: center; background: transparent;
	font: 700 1rem var(--body); color: var(--plum);
	-moz-appearance: textfield;
}
.mb-qty__ctl input::-webkit-outer-spin-button,
.mb-qty__ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mb-pdp__msg { min-height: 1.4em; margin: 0 0 .6rem; color: #c62828; font-weight: 600; font-size: .95rem; }

.mb-btn--block { display: flex; width: 100%; justify-content: center; }
.mb-btn--lg { padding: 1.1em 1.6em; font-size: 1.05rem; }
.mb-btn.is-disabled { opacity: .45; pointer-events: none; }

.mb-pdp__ask { display: inline-block; margin-top: 1rem; font-weight: 600; text-underline-offset: .25em; }

.mb-notes { margin-top: 1.4rem; display: grid; gap: .5rem; padding: 1.1rem 1.2rem; background: var(--blush); border-radius: var(--r-sm); }
.mb-notes li { display: flex; gap: .6rem; font-size: .95rem; }
.mb-notes li::before { content: "✦"; color: var(--rani-dk); }

.mb-acc { margin-top: 1.8rem; border-top: 1.5px solid var(--plum); }
.mb-acc details { border-bottom: 1.5px solid var(--plum); }
.mb-acc summary {
	list-style: none; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center;
	padding: 1.1rem 0; font: 600 1rem var(--display); letter-spacing: -.01em;
}
.mb-acc summary::-webkit-details-marker { display: none; }
.mb-acc summary::after { content: "+"; font: 700 1.4rem/1 var(--body); }
.mb-acc details[open] summary::after { content: "−"; }
.mb-acc details > :not(summary) { padding-bottom: 1.2rem; }

.mb-specs { margin: 0; display: grid; gap: .1rem; }
.mb-specs div { display: grid; grid-template-columns: 40% 1fr; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--blush); }
.mb-specs dt { font-weight: 700; }
.mb-specs dd { margin: 0; }

.mb-chart { overflow-x: auto; }
.mb-chart table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 320px; }
.mb-chart th,
.mb-chart td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--blush); }
.mb-chart thead th { background: var(--plum); color: var(--ivory); font-weight: 700; }
.mb-chart thead th:first-child { border-top-left-radius: var(--r-sm); }
.mb-chart thead th:last-child { border-top-right-radius: var(--r-sm); }
.mb-chart tbody th { font-weight: 800; }
.mb-chart__tip { margin-top: .9rem; font-size: .9rem; color: var(--wine); }

.mb-related { margin-top: clamp(3rem, 7vw, 6rem); }
.mb-related .mb-h2 { margin-bottom: 1.6rem; max-width: none; }

/* Mobile order bar */
.mb-stickybar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	display: none; align-items: center; gap: 1rem;
	padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
	background: var(--plum); color: var(--ivory);
	border-top: 1px solid var(--line);
}
.mb-stickybar__info { display: grid; min-width: 0; flex: 1; }
.mb-stickybar__name { font-size: .85rem; color: var(--mauve); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-stickybar__price { font: 600 1.05rem var(--display); }
.mb-stickybar__price del { font-size: .75em; opacity: .5; }
.mb-stickybar__price ins { text-decoration: none; }

/* ---------- Dialogs ---------- */
.mb-dialog {
	width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
	padding: 0; border: 0; border-radius: var(--r-lg);
	background: var(--ivory); color: var(--plum);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.mb-dialog--wide { width: min(900px, calc(100vw - 2rem)); }
.mb-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.mb-dialog__body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.mb-dialog__title { font: 600 1.6rem/1 var(--display); letter-spacing: -.03em; margin-bottom: 1.2rem; }
.mb-dialog__close {
	position: absolute; top: .8rem; right: .8rem; z-index: 2;
	width: 40px; height: 40px; display: grid; place-items: center;
	border: 0; border-radius: 50%; background: var(--plum); color: var(--ivory); cursor: pointer;
}
.mb-dialog__close:hover { background: var(--rani); color: var(--plum); }

.mb-qv { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.mb-qv__img { aspect-ratio: 4 / 5; border-radius: var(--r-sm); overflow: hidden; background: var(--blush); display: grid; place-items: center; color: var(--wine); }
.mb-qv__img img { width: 100%; height: 100%; object-fit: cover; }
.mb-qv__img .mb-garment { width: 45%; }
.mb-qv__title { font: 600 1.5rem/1.05 var(--display); letter-spacing: -.03em; margin: .4rem 2.5rem .7rem 0; }
.mb-qv__desc { font-size: .95rem; margin-bottom: 1rem; }
.mb-qv__label { font-weight: 700; font-size: .9rem; margin: .8rem 0 .4rem; }
.mb-qv__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.mb-qv__chips li { padding: .4em .7em; border: 1.5px solid var(--plum); border-radius: var(--r-sm); font-weight: 700; font-size: .85rem; }
.mb-qv__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.mb-qv__loading { padding: 3rem 1rem; text-align: center; }


/* ---------- Boutique touches on WooCommerce parts ---------- */
.mb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.mb-card__img { border-radius: 160px 160px var(--r-lg) var(--r-lg); background: linear-gradient(170deg, var(--blush), #f1d3cb); color: var(--wine); }
.mb-card__name { font: 500 1.1rem/1.25 var(--display); }
.mb-badge { font: 600 .72rem/1 var(--body) !important; letter-spacing: .1em; text-transform: uppercase; background: var(--rani) !important; color: var(--ivory) !important; top: auto !important; bottom: .8rem; left: 50% !important; transform: translateX(-50%); }
.mb-card__qv { bottom: auto !important; top: 42%; left: 1.2rem !important; right: 1.2rem !important; }
.mb-card__wa { background: transparent !important; color: var(--plum) !important; border: 1.5px solid var(--plum); }
.mb-card__wa .mb-icon { color: var(--rani) !important; }
.mb-card__wa:hover { background: var(--rani) !important; border-color: var(--rani); color: var(--ivory) !important; }
.mb-card__wa:hover .mb-icon { color: var(--ivory) !important; }
.mb-shophead {
	background:
		radial-gradient(45% 80% at 90% 20%, rgba(216, 27, 96, .35), transparent 70%),
		var(--plum) !important;
}
.mb-shophead__title { font-style: italic; font-weight: 500 !important; letter-spacing: -.02em !important; }
.mb-gallery__main { border-radius: 260px 260px var(--r-lg) var(--r-lg) !important; background: linear-gradient(170deg, var(--blush), #f1d3cb) !important; color: var(--wine); }
.mb-pdp__title { font-weight: 500 !important; letter-spacing: -.02em !important; }
.mb-pdp__price ins,
.mb-card__price ins { color: var(--rani-dk); }
.mb-swatch:has(input:checked) { border-color: var(--rani) !important; }
.mb-size:has(input:checked),
.mb-size.is-active,
.mb-chip.is-active { background: var(--rani) !important; border-color: var(--rani) !important; color: var(--ivory) !important; }
.mb-notes li::before { content: "✿" !important; color: var(--rani) !important; }
.mb-chart thead th { background: var(--plum); }
.mb-related .mb-h2 { font-style: italic; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.mb-nav { display: none; }
	.mb-header__actions { margin-left: auto; }
	.mb-grid,
	.mb-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mb-occ { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mb-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.mb-hero__in { grid-template-columns: 1fr; }
	.mb-hero__art { order: -1; max-width: 380px; width: 100%; margin: 0 auto; }
	.mb-intro,
	.mb-vc,
	.mb-store { grid-template-columns: 1fr; }
	.mb-pdp { grid-template-columns: 1fr; }
	.mb-gallery { position: static; }
	.mb-stickybar:not([hidden]) { display: flex; }
	body.mb-has-sticky .mb-footer { padding-bottom: 6rem; }
	.mb-qv { grid-template-columns: 1fr; }
	.mb-qv__img { aspect-ratio: 1 / 1; }
}

@media (max-width: 600px) {
	.mb-pill--wa span { display: none; }
	.mb-logo a { font-size: 1.25rem; }
	.mb-pill--menu span:last-child { display: none; }
	.mb-pill--menu { width: 44px; padding: 0; justify-content: center; }
	.mb-pill--wa { width: 44px; padding: 0; justify-content: center; }
	.mb-hero__title { font-size: clamp(2.6rem, 12vw, 3.6rem); }
	.mb-cats {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%;
		overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .8rem;
	}
	.mb-cat { scroll-snap-align: start; }
	.mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mb-occ { grid-template-columns: 1fr; }
	.mb-tile { min-height: 360px; }
	.mb-footer__cols { grid-template-columns: 1fr; }
	.mb-toolbar__right { margin-left: 0; width: 100%; justify-content: space-between; }
	.mb-card__wa span { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after { animation: none !important; transition-duration: 0s !important; }
	.mb-js [data-mb-reveal] { opacity: 1; transform: none; }
	.mb-anim .mb-l,
	.mb-anim .mb-anim__line {
		color: var(--a0) !important;
		background: none !important;
		-webkit-text-stroke: 0 !important;
		transform: none !important;
	}
	.mb-rotator__word { filter: none; }
}