/* Mo'Afrique Luxe — v0.3  (foundation + hero + fashion layer + motion) */
:root {
	--mfq-ink: #111111;
	--mfq-paper: #ffffff;
	--mfq-sand: #f7f4ef;
	--mfq-line: #e6e0d6;
	--mfq-muted: #6f6a62;
	--mfq-accent: #b3222a;
	--mfq-serif: "Cormorant Garamond", "Times New Roman", serif;
	/* Emil Kowalski motion tokens: strong ease-out for anything entering / responding. */
	--mfq-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	/* Re-point Clotya's own variables so existing components follow the new palette. */
	--color-primary: var(--mfq-accent);
}

/* Full-bleed sections must never create sideways scroll. */
html { overflow-x: clip; }

/* =========================================================
   HERO  (Clotya Home Slider widget)
   ========================================================= */
.elementor-widget-clotya-home-slider .module-slider {
	position: relative;
	/* break out of the boxed container to edge-to-edge */
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.elementor-widget-clotya-home-slider .banner {
	height: clamp(520px, 84vh, 880px);
	margin-bottom: 0;
	background: var(--mfq-ink);
}

/* image fills the slide */
.elementor-widget-clotya-home-slider .banner .banner-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.elementor-widget-clotya-home-slider .banner .banner-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
}

/* gradient scrim instead of a flat grey dim: photo stays rich, text stays readable */
.elementor-widget-clotya-home-slider .banner .banner-image.overlay::before {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.18) 0%,
		rgba(0, 0, 0, 0) 32%,
		rgba(0, 0, 0, 0.18) 58%,
		rgba(0, 0, 0, 0.72) 100%
	);
}

/* copy block: bottom-left, editorial */
.elementor-widget-clotya-home-slider .banner .banner-content {
	position: absolute;
	inset: 0;
	z-index: 11; /* above the full-slide link so the button is clickable */
	align-items: flex-end;
	justify-content: flex-start;
	max-width: none;
	margin: 0;
	padding: 0 clamp(20px, 6vw, 104px) clamp(56px, 11vh, 112px);
	pointer-events: none;
}
.elementor-widget-clotya-home-slider .banner .banner-inner {
	max-width: min(720px, 100%) !important;
	text-align: left;
	pointer-events: auto;
}

.elementor-widget-clotya-home-slider .banner .entry-subtitle {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 clamp(14px, 2vh, 22px);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.92;
}
.elementor-widget-clotya-home-slider .banner .entry-subtitle::before {
	content: "";
	width: 36px;
	height: 1px;
	background: var(--mfq-accent);
	flex: none;
}

.elementor-widget-clotya-home-slider .banner .entry-title {
	margin: 0 0 clamp(14px, 2.4vh, 24px);
	font-family: var(--mfq-serif);
	font-weight: 500;
	font-size: clamp(2.3rem, 6.2vw, 5.2rem);
	line-height: 1.02;
	letter-spacing: 0.015em;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.elementor-widget-clotya-home-slider .banner .entry-description p {
	margin: 0 0 clamp(22px, 3.6vh, 38px);
	max-width: 46ch;
	font-size: clamp(0.95rem, 1.3vw, 1.08rem);
	line-height: 1.6;
	color: #fff;
	opacity: 0.9;
}

/* CTA: outlined, fills on hover */
.elementor-widget-clotya-home-slider .banner .btn.link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: auto;
	padding: 0.95rem 2rem;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.35s var(--mfq-ease), color 0.35s var(--mfq-ease), border-color 0.35s var(--mfq-ease);
}
.elementor-widget-clotya-home-slider .banner .btn.link i { transition: transform 0.35s var(--mfq-ease); }
.elementor-widget-clotya-home-slider .banner .btn.link:hover,
.elementor-widget-clotya-home-slider .banner .btn.link:focus-visible {
	background: #fff;
	color: var(--mfq-ink);
	border-color: #fff;
}
.elementor-widget-clotya-home-slider .banner .btn.link:hover i { transform: translateX(4px); }
.elementor-widget-clotya-home-slider .banner .btn.link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* arrows: quiet, transparent, appear on hover */
.elementor-widget-clotya-home-slider .site-slider.arrow-1 .owl-prev,
.elementor-widget-clotya-home-slider .site-slider.arrow-1 .owl-next {
	width: 3rem;
	height: 3rem;
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 50%;
	color: #fff;
	font-size: 1rem !important;
	top: 50%;
	transform: translateY(-50%);
}
.elementor-widget-clotya-home-slider .site-slider.arrow-1 .owl-prev { left: clamp(12px, 2.5vw, 40px); }
.elementor-widget-clotya-home-slider .site-slider.arrow-1 .owl-next { right: clamp(12px, 2.5vw, 40px); }
.elementor-widget-clotya-home-slider .site-slider.arrow-1 .owl-prev:hover,
.elementor-widget-clotya-home-slider .site-slider.arrow-1 .owl-next:hover {
	background-color: #fff !important;
	color: var(--mfq-ink);
}

/* indicators: slim lines, bottom-right */
.elementor-widget-clotya-home-slider .site-slider.slider .owl-dots {
	justify-content: flex-end;
	bottom: clamp(20px, 4vh, 40px);
	padding: 0 clamp(20px, 6vw, 104px);
	z-index: 12;
}
/* (indicator lines + progress fill now come from mu-plugins/moafrique-experience.php) */

/* ---- phones ---- */
@media (max-width: 767px) {
	.elementor-widget-clotya-home-slider .banner { height: clamp(500px, 78svh, 700px); }
	.elementor-widget-clotya-home-slider .banner .banner-image img { object-position: 50% 15%; }
	.elementor-widget-clotya-home-slider .banner .banner-content { padding-bottom: 64px; }
	.elementor-widget-clotya-home-slider .banner .btn.link { width: 100%; justify-content: center; }
	.elementor-widget-clotya-home-slider .site-slider.arrow-1 .owl-prev,
	.elementor-widget-clotya-home-slider .site-slider.arrow-1 .owl-next { display: none; }
	.elementor-widget-clotya-home-slider .site-slider.slider .owl-dots { justify-content: center; }
}

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.elementor-widget-clotya-home-slider .banner .btn.link,
	.elementor-widget-clotya-home-slider .banner .btn.link i { transition: none; }
}

/* =========================================================
   Newsletter pop-up: only reachable once the JS grants it
   ========================================================= */
body.popup-visible:not(.mfq-popup-ok) .site-newsletter {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
body.popup-visible:not(.mfq-popup-ok) { overflow: auto !important; }

/* =========================================================
   FASHION LAYER — typography, cards, collections
   (patterns borrowed from 21st.dev: editorial hero, hover-focus
   grids, shop-by-category zoom; rebuilt in plain CSS)
   ========================================================= */
body { background: var(--mfq-paper); color: var(--mfq-ink); -webkit-font-smoothing: antialiased; }

/* Section headings: editorial serif */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-clotya-custom-title .entry-title {
	font-family: var(--mfq-serif);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.08;
	text-wrap: balance;
}
.elementor-widget-heading h6.elementor-heading-title,
.elementor-widget-heading .elementor-size-small {
	font-family: inherit;
	font-size: 0.72rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

/* Product cards */
.product .thumbnail-wrapper { overflow: hidden; background: var(--mfq-sand); }
.product .product-images img { transition: transform 0.7s var(--ease-out); }
.product .content-wrapper { padding-top: 0.9rem; text-align: left; }
.product .product-title,
.product .product-title a {
	font-family: var(--mfq-serif);
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--mfq-ink);
	text-transform: none;
}
.product .price {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mfq-muted);
}

/* Hover effects only where hover really exists (Emil: never on touch) */
@media (hover: hover) and (pointer: fine) {
	.product:hover .product-images img { transform: scale(1.035); }
	/* hover-focus: siblings recede, like the 21st.dev "cards" pattern */
	.owl-stage:has(.product:hover) .owl-item:not(:has(.product:hover)) .product-content { opacity: 0.55; }
	.owl-item .product-content { transition: opacity 0.35s var(--ease-out); }
}

/* Buttons feel pressed (Emil: scale .97 on :active, 160ms ease-out) */
.btn,
.button,
button.button,
a.button,
.single_add_to_cart_button,
.add_to_cart_button,
.checkout-button,
.mc4wp-form input[type="submit"] {
	transition: transform 160ms var(--ease-out), background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.btn:active,
.button:active,
button.button:active,
a.button:active,
.single_add_to_cart_button:active,
.add_to_cart_button:active,
.checkout-button:active,
.mc4wp-form input[type="submit"]:active { transform: scale(0.97); }

/* =========================================================
   MOTION (Emil Kowalski rules: transform + opacity only,
   ease-out, <= 700ms for entrances, stagger 60-80ms,
   reduced-motion respected)
   ========================================================= */

/* Hero: text rises in, staggered, each time a slide becomes active.
   First impression of the page is a "rare" moment, so a slightly longer entrance is allowed. */
/* Modish rule: the hero headline is never invisible at first paint (LCP) — it only rises. */
@keyframes mfq-rise {
	from { transform: translateY(14px); }
	to   { transform: none; }
}
@keyframes mfq-settle {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}
.elementor-widget-clotya-home-slider .owl-item.active .banner-inner > * {
	animation: mfq-rise 0.7s var(--ease-out) both;
}
.elementor-widget-clotya-home-slider .owl-item.active .banner-inner > :nth-child(1) { animation-delay: 0.10s; }
.elementor-widget-clotya-home-slider .owl-item.active .banner-inner > :nth-child(2) { animation-delay: 0.18s; }
.elementor-widget-clotya-home-slider .owl-item.active .banner-inner > :nth-child(3) { animation-delay: 0.26s; }
.elementor-widget-clotya-home-slider .owl-item.active .banner-inner > :nth-child(4) { animation-delay: 0.34s; }
.elementor-widget-clotya-home-slider .owl-item.active .banner-image img {
	animation: mfq-settle 6s var(--ease-out) both; /* slow, decorative settle of the photograph */
}

/* Scroll reveal for everything below the fold (class added by luxe.js) */
.mfq-js .mfq-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.mfq-js .mfq-reveal.mfq-in { opacity: 1; transform: none; }

/* Newsletter pop-up: modal => scales from centre, never from scale(0) */
.site-newsletter .newsletter-inner {
	transition: transform 0.24s var(--ease-out), opacity 0.24s var(--ease-out) !important;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-clotya-home-slider .owl-item.active .banner-inner > *,
	.elementor-widget-clotya-home-slider .owl-item.active .banner-image img { animation: none; }
	.mfq-js .mfq-reveal { transform: none; transition: opacity 0.2s linear; }
	.product .product-images img { transition: none; }
}

/* =========================================================
   v0.4 — EDITORIAL RHYTHM ("text that feels alive")
   One motif repeated everywhere: small tracked eyebrow with a red
   hairline -> big serif title with one italic word -> short lead
   paragraph -> quiet underlined link. Generous, asymmetric spacing.
   ========================================================= */

/* Eyebrows (short uppercase / small headings) get the hero's hairline motif */
.mfq-eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(10px, 1.4vw, 18px) !important;
	font-family: inherit !important;
	font-size: 0.72rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.32em !important;
	text-transform: uppercase;
	color: var(--mfq-muted) !important;
	line-height: 1.4 !important;
}
.mfq-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--mfq-accent); flex: none; }

/* Section titles: bigger, tighter, balanced — with an italic accent word (added by luxe.js) */
.mfq-title {
	font-family: var(--mfq-serif) !important;
	font-weight: 500 !important;
	/* font-size is set per heading by luxe.js, relative to its original size and its column width */
	line-height: 1.04 !important;
	letter-spacing: -0.012em !important;
	margin-bottom: clamp(14px, 1.8vw, 24px) !important;
	text-wrap: balance;
	color: var(--mfq-ink);
}
.mfq-accent { font-style: italic; font-weight: 400; color: var(--mfq-accent); }

/* Long "headings" that are really paragraphs become a calm lead */
.mfq-lead {
	font-family: inherit !important;
	font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	letter-spacing: 0.005em !important;
	color: var(--mfq-muted) !important;
	max-width: 58ch;
	text-wrap: pretty;
	margin-bottom: clamp(20px, 2.4vw, 32px) !important;
}
.elementor-widget-heading[style*="center"] .mfq-lead,
.elementor-align-center .mfq-lead,
.mfq-lead[style*="center"] { margin-inline: auto; }

/* "Shop Now" buttons -> editorial text links with a line that draws on hover */
.elementor-widget-clotya-button .btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0.4rem 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--mfq-ink) !important;
	font-size: 0.74rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase;
	box-shadow: none !important;
}
.elementor-widget-clotya-button .btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 1px;
	background: currentColor;
	transform-origin: 0 50%;
	transition: transform 0.45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.elementor-widget-clotya-button .btn:hover::after { transform: scaleX(0.35); }
	.elementor-widget-clotya-button .btn:hover { color: var(--mfq-accent) !important; }
}

/* Breathing room between stacked text widgets */
.elementor-widget-heading + .elementor-widget-heading { margin-top: 0; }
.elementor-widget-clotya-button { margin-top: clamp(4px, 1vw, 12px); }

/* =========================================================
   MARQUEE BAND (UI Layouts "scroll text marquee", CSS only)
   ========================================================= */
.mfq-marquee {
	position: relative;
	overflow: hidden;
	padding: clamp(18px, 2.6vw, 30px) 0;
	border-bottom: 1px solid var(--mfq-line);
	background: var(--mfq-paper);
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.mfq-marquee__track { display: flex; width: max-content; animation: mfq-marquee 48s linear infinite; }
.mfq-marquee__group { display: flex; align-items: center; flex: none; }
.mfq-marquee__item {
	font-family: var(--mfq-serif);
	font-size: clamp(1.6rem, 3.4vw, 2.8rem);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--mfq-ink);
	padding: 0 clamp(16px, 2vw, 28px);
	white-space: nowrap;
}
.mfq-marquee__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mfq-accent); flex: none; }
@media (hover: hover) and (pointer: fine) { .mfq-marquee:hover .mfq-marquee__track { animation-play-state: paused; } }
@keyframes mfq-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   SCROLL REVEALS (21st "Text Reveal (Mask)" + UI Layouts "Image Reveal")
   ========================================================= */
.mfq-words .mfq-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.mfq-words .mfq-w > span { display: inline-block; transform: translateY(105%); transition: transform 0.8s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.mfq-words.mfq-in .mfq-w > span { transform: none; }

.mfq-clip { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-in-out); }
.mfq-clip.mfq-in { clip-path: inset(0 0 0 0); }

/* =========================================================
   TOUCH PARITY (Modish): what hover does on desktop, centre-of-screen does on phones
   ========================================================= */
.product[data-active] .product-images img { transform: scale(1.035); }
.product[data-active] .product-title a { color: var(--mfq-accent); }
.product .product-title a { transition: color 0.3s var(--ease-out); }

/* =========================================================
   HERO GRADE (Modish "vintage grade"): faint film grain, never a heavy veil
   ========================================================= */
@media (min-width: 768px) {
	.elementor-widget-clotya-home-slider .banner::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 3;
		pointer-events: none;
		opacity: 0.09;
		mix-blend-mode: overlay;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	}
}

/* Magnetic CTA (Modish ButtonFX, mouse only): JS sets the transform; this gives the release its spring */
.mfq-magnetic { transition: transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1); will-change: transform; }
.mfq-magnetic.mfq-pulling { transition: transform 0.12s linear; }

/* =========================================================
   FOOTER RISE (Modish, CSS scroll-driven; ignored where unsupported)
   ========================================================= */
@supports (animation-timeline: view()) {
	footer .widget,
	.site-footer .column,
	footer .elementor-column {
		animation: mfq-footer-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 55%;
	}
	@keyframes mfq-footer-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
	.mfq-marquee__track { animation: none; }
	.mfq-words .mfq-w > span { transform: none; transition: none; }
	.mfq-clip { clip-path: none; transition: none; }
	.mfq-magnetic { transition: none; transform: none !important; }
	footer .widget, .site-footer .column, footer .elementor-column { animation: none; }
}

/* =========================================================
   v0.5 — DARK MODE: true black, red as a quiet accent
   ========================================================= */

/* ---- toggle button (header) ---- */
.mfq-theme-wrap { display: flex; align-items: center; }
.mfq-theme-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: transform 160ms var(--ease-out), background-color 0.3s var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}
.mfq-theme-toggle:active { transform: scale(0.92); }
.mfq-theme-toggle:focus-visible { outline: 2px solid var(--mfq-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mfq-theme-toggle:hover { background: rgba(127, 127, 127, 0.12); } }
.mfq-i { position: absolute; transition: transform 0.45s var(--ease-out), opacity 0.25s var(--ease-out); }
.mfq-i-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
html.mfq-dark .mfq-i-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
html.mfq-dark .mfq-i-sun { opacity: 1; transform: none; color: #f2ede6; }

/* ---- the swipe ---- */
.mfq-sweep {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
	will-change: transform;
}
.mfq-sweep.to-dark { background: #000; }
.mfq-sweep.to-light { background: #fff; }
/* the leading edge: a red light that fades into deep red */
.mfq-sweep::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(26vw, 220px);
}
.mfq-sweep.to-dark::after { left: 100%; background: linear-gradient(90deg, #7a0f14 0%, #c1272d 55%, rgba(193, 39, 45, 0) 100%); }
.mfq-sweep.to-light::after { right: 100%; background: linear-gradient(270deg, #7a0f14 0%, #c1272d 55%, rgba(193, 39, 45, 0) 100%); }

/* ---- palette ---- */
html.mfq-dark {
	color-scheme: dark;
	--mfq-ink: #f2ede6;
	--mfq-paper: #000000;
	--mfq-sand: #0c0a0a;
	--mfq-line: rgba(242, 237, 230, 0.12);
	--mfq-muted: #a8a097;
	--mfq-accent: #d6363d;
	--mfq-accent-deep: #7a0f14;
	/* Clotya's own variables */
	--color-text: #f2ede6;
	--color-text-desc: #a8a097;
	--color-background: #000000;
	--color-form-border: rgba(242, 237, 230, 0.18);
	--color-form-placeholder: #8a837b;
	--color-primary: #d6363d;
	background: #000;
}
html.mfq-dark body,
html.mfq-dark .site,
html.mfq-dark .site-content,
html.mfq-dark main,
html.mfq-dark .site-footer,
html.mfq-dark .footer-row,
html.mfq-dark .site-offcanvas,
html.mfq-dark .search-holder,
html.mfq-dark .cart-dropdown-wrapper { background-color: #000 !important; color: var(--mfq-ink); }

/* Elementor sections paint their own white/grey; true black underneath, photos untouched */
html.mfq-dark .elementor-section:not(.elementor-widget-clotya-home-slider *),
html.mfq-dark .elementor-column > .elementor-widget-wrap,
html.mfq-dark .e-con { background-color: transparent !important; }

/* text */
html.mfq-dark .elementor-heading-title:not(.elementor-widget-clotya-home-slider *),
html.mfq-dark .elementor-widget-text-editor,
html.mfq-dark .product-title a,
html.mfq-dark .entry-title a,
html.mfq-dark .widget-title,
html.mfq-dark .site-footer,
html.mfq-dark .site-footer a,
html.mfq-dark .site-offcanvas a,
html.mfq-dark .menu > li > a,
html.mfq-dark .elementor-widget-clotya-button .btn { color: var(--mfq-ink) !important; }
html.mfq-dark .mfq-lead,
html.mfq-dark .mfq-eyebrow,
html.mfq-dark .price,
html.mfq-dark .entry-description p { color: var(--mfq-muted) !important; }

/* small labels and leads stay a softer grey (more specific than the heading rule above) */
html.mfq-dark .elementor-heading-title.mfq-eyebrow,
html.mfq-dark .elementor-heading-title.mfq-lead { color: var(--mfq-muted) !important; }

/* Google review cards (Trustindex) */
html.mfq-dark .ti-widget .ti-inner,
html.mfq-dark .ti-widget .ti-review-item > .ti-inner { background: #0a0a0a !important; border-color: var(--mfq-line) !important; box-shadow: none !important; }
html.mfq-dark .ti-widget .ti-name,
html.mfq-dark .ti-widget .ti-review-content,
html.mfq-dark .ti-widget .ti-review-text-container,
html.mfq-dark .ti-widget .ti-read-more-active { color: var(--mfq-ink) !important; }
html.mfq-dark .ti-widget .ti-date { color: var(--mfq-muted) !important; }

/* header: solid black once it is not floating over the hero */
html.mfq-dark .site-header:not(.transparent),
html.mfq-dark .header-mobile,
html.mfq-dark .site-header.sticky,
html.mfq-dark .site-header .header-row.is-sticky { background-color: #000 !important; border-color: var(--mfq-line) !important; }
html.mfq-dark .site-header i,
html.mfq-dark .site-header .button-text,
html.mfq-dark .site-header .menu > li > a { color: var(--mfq-ink) !important; }
html.mfq-dark .site-header .cart-count { background: var(--mfq-accent) !important; color: #fff !important; }

/* logos are an SVG light/dark pair since v0.6 (luxe-ui.css); this covers the classic (?mfq_classic) view */
html.mfq-dark .site-brand img[src*="Moafrique-logo-1"],
html.mfq-dark .site-brand img[src*="Moafrique-logo-3"] { content: url("/wp-content/themes/moafrique-luxe/assets/img/logo-white.svg"); }

/* surfaces */
html.mfq-dark .product .thumbnail-wrapper,
html.mfq-dark .category-thumbnail,
html.mfq-dark .product-images { background: var(--mfq-sand) !important; }
html.mfq-dark .product-buttons a,
html.mfq-dark .product-buttons .button { background: #111 !important; color: var(--mfq-ink) !important; }
html.mfq-dark .site-newsletter .newsletter-inner,
html.mfq-dark .cart-dropdown,
html.mfq-dark .woocommerce-message,
html.mfq-dark .woocommerce-info { background: #0a0a0a !important; color: var(--mfq-ink) !important; border-color: var(--mfq-line) !important; }
html.mfq-dark .site-newsletter .newsletter-inner { border-top: 2px solid var(--mfq-accent) !important; }

/* forms */
html.mfq-dark input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html.mfq-dark select,
html.mfq-dark textarea { background-color: #0a0a0a !important; color: var(--mfq-ink) !important; border-color: var(--color-form-border) !important; }

/* tables (cart, checkout, account) */
html.mfq-dark table,
html.mfq-dark th,
html.mfq-dark td { border-color: var(--mfq-line) !important; color: var(--mfq-ink); }

/* the add-to-cart row itself is transparent; only the button is lit */
html.mfq-dark .woocommerce-variation-add-to-cart,
html.mfq-dark .single-product form.cart,
html.mfq-dark .product-summary,
html.mfq-dark .summary { background: transparent !important; }

/* primary buttons stay readable: ink-on-black becomes off-white with a red hover */
html.mfq-dark .button.alt,
html.mfq-dark .single_add_to_cart_button,
html.mfq-dark .checkout-button,
html.mfq-dark #place_order { background: #f2ede6 !important; color: #000 !important; border-color: #f2ede6 !important; }
@media (hover: hover) and (pointer: fine) {
	html.mfq-dark .button.alt:hover,
	html.mfq-dark .single_add_to_cart_button:hover,
	html.mfq-dark .checkout-button:hover,
	html.mfq-dark #place_order:hover { background: var(--mfq-accent) !important; border-color: var(--mfq-accent) !important; color: #fff !important; }
}

/* marquee */
html.mfq-dark .mfq-marquee { background: #000; border-color: var(--mfq-line); }
html.mfq-dark .mfq-marquee__item { color: var(--mfq-ink); }
html.mfq-dark .mfq-marquee__dot { background: var(--mfq-accent); box-shadow: 0 0 12px rgba(214, 54, 61, 0.55); }

/* ---- red, only in motion ---- */
/* titles rise in red, then settle to off-white */
html.mfq-dark .mfq-words .mfq-w > span { color: var(--mfq-accent); transition: transform 0.8s var(--ease-out), color 1.4s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
html.mfq-dark .mfq-words.mfq-in .mfq-w > span { color: inherit; }
html.mfq-dark .mfq-words .mfq-accent .mfq-w > span,
html.mfq-dark .mfq-words.mfq-in .mfq-accent .mfq-w > span { color: var(--mfq-accent); }
/* hero progress fills red */
html.mfq-dark .mfq-fx.owl-carousel .owl-dots button.active span::after { background: var(--mfq-accent); }
/* cards glow deep red on hover / centre-of-screen */
html.mfq-dark .product .thumbnail-wrapper { transition: box-shadow 0.5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	html.mfq-dark .product:hover .thumbnail-wrapper { box-shadow: 0 0 0 1px rgba(214, 54, 61, 0.35), 0 22px 48px -26px rgba(214, 54, 61, 0.55); }
}
html.mfq-dark .product[data-active] .thumbnail-wrapper { box-shadow: 0 0 0 1px rgba(214, 54, 61, 0.35), 0 22px 48px -26px rgba(214, 54, 61, 0.55); }
/* link underline draws in red */
html.mfq-dark .elementor-widget-clotya-button .btn::after { background: var(--mfq-accent); }
/* loader: white logo with a red heartbeat glow */
html.mfq-dark .site-loading { background: #000 !important; }
html.mfq-dark .site-loading .preloading { background-image: url("/wp-content/themes/moafrique-luxe/assets/img/mark-white.svg") !important; filter: drop-shadow(0 0 18px rgba(214, 54, 61, 0.45)); }

@media (prefers-reduced-motion: reduce) {
	.mfq-i { transition: opacity 0.15s linear; }
	html.mfq-dark .mfq-words .mfq-w > span { transition: none; color: inherit; }
}