/*
Theme Name: Dar Dmana Decor
Theme URI: https://dardmanadecor.ma
Author: Dar Dmana Decor
Description: Menuiserie artisanale — salons marocains traditionnels et modernes, chambres à coucher sur mesure. Casablanca, Maroc.
Version: 1.11.3
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: dar-dmana-decor
*/

/* ==========================================================================
   Design tokens — palette lifted from the original Netlify one-pager
   ========================================================================== */
:root {
	--color-ink: #1A1410;
	--color-ink-soft: #3D2B1F;
	--color-charcoal: #4A3728;
	--color-charcoal-soft: #5C4033;
	--color-gold: #C8A45C;
	--color-gold-light: #E8D5A3;
	--color-gold-deep: #9A7B3A;
	--color-gold-rgb: 200, 164, 92;
	--color-ink-rgb: 26, 20, 16;
	--color-cream: #F5F0E8;
	--color-cream-dim: #E8DFD0;
	--color-white: #FFFDF8;
	--color-text-muted: #5C4033;
	--color-border-light: #E8DFD0;

	--font-heading-fr: "Cormorant Garamond", "Georgia", serif;
	--font-body-fr: "Outfit", "Segoe UI", sans-serif;
	--font-heading-ar: "Amiri", "Traditional Arabic", serif;
	--font-body-ar: "Tajawal", "Segoe UI", sans-serif;

	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6.25rem;

	--radius-sm: 4px;
	--container-max: 1200px;
	--ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-body-fr);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}
html[lang^="ar"] body { font-family: var(--font-body-ar); font-weight: 400; }

::selection { background: var(--color-gold); color: var(--color-white); }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-gold-deep); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--color-gold); }

h1, h2, h3, h4 { font-family: var(--font-heading-fr); color: var(--color-ink-soft); line-height: 1.15; margin: 0 0 var(--space-sm); font-weight: 300; }
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3, html[lang^="ar"] h4 { font-family: var(--font-heading-ar); font-weight: 700; }

.section-head h1, .section-head h2 { font-size: clamp(2rem, 4vw, 3.5rem); }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: 40px; }

.eyebrow {
	font-family: var(--font-body-fr);
	color: var(--color-gold);
	font-size: 0.72rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.35em;
	display: inline-flex;
	align-items: center;
	gap: 1em;
	margin-bottom: var(--space-xs);
}
.eyebrow::before { content: ""; display: inline-block; width: 50px; height: 1px; background: var(--color-gold); }
.section-head .eyebrow::before { display: none; }
html[lang^="ar"] .eyebrow { font-family: var(--font-body-ar); font-size: 0.85rem; letter-spacing: 0.15em; }

.accent-gold { font-style: italic; color: var(--color-gold); }

.btn {
	display: inline-block;
	font-family: var(--font-body-fr);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	background: var(--color-gold);
	color: var(--color-ink-soft);
	border: 1px solid var(--color-gold);
	border-radius: 0;
	padding: 16px 40px;
	cursor: pointer;
	transition: all 0.4s var(--ease-lux);
}
html[lang^="ar"] .btn { font-family: var(--font-body-ar); letter-spacing: 0.5px; font-weight: 500; }
.btn:hover { background: var(--color-gold-light); border-color: var(--color-gold-light); color: var(--color-ink-soft); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--color-gold-rgb), 0.3); }
.btn-outline {
	background: transparent;
	color: var(--color-gold);
	border-color: var(--color-gold);
}
.btn-outline:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-ink-soft); box-shadow: none; }

/* ==========================================================================
   Star motif (echoes the logo's khatam / 8-pointed star)
   ========================================================================== */
.star-divider {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	margin: 20px 0;
	color: var(--color-gold);
}
.star-divider::before, .star-divider::after {
	content: "";
	height: 1px;
	flex: 1;
	max-width: 60px;
	background: linear-gradient(90deg, transparent, var(--color-gold));
}
.star-divider::after { background: linear-gradient(90deg, var(--color-gold), transparent); }
.star-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ==========================================================================
   Decorative geometric pattern overlay (echoes zellige lattice motifs)
   ========================================================================== */
.pattern-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ==========================================================================
   Header — fixed and transparent over the dark hero on the front page,
   solid dark elsewhere; main.js toggles .is-scrolled past 50px.
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(var(--color-ink-rgb), 0.95);
	backdrop-filter: blur(20px);
	transition: background 0.4s, padding 0.4s;
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 14px;
	gap: var(--space-md);
	transition: padding 0.4s;
}
body.is-front-page .site-header { position: fixed; inset-inline: 0; }
body.is-front-page .site-header:not(.is-scrolled) {
	background: transparent;
	backdrop-filter: none;
}
body.is-front-page .site-header:not(.is-scrolled) .container {
	padding-block: 22px;
}

/* The logo image contains the wordmark, so it stands alone and is sized to be
   legible rather than sitting next to repeated text. */
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 68px; width: auto; border-radius: var(--radius-sm); }

.main-nav ul { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
	font-family: var(--font-body-fr);
	color: var(--color-cream);
	font-weight: 400;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: relative;
	padding-bottom: 2px;
}
html[lang^="ar"] .main-nav a { font-family: var(--font-body-ar); font-size: 15px; letter-spacing: 0.5px; }
.main-nav a::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	width: 0;
	height: 1px;
	background: var(--color-gold);
	transition: width 0.4s var(--ease-lux);
}
.main-nav a:hover, .main-nav .current-menu-item > a { color: var(--color-gold); }
.main-nav a:hover::after, .main-nav .current-menu-item > a::after { width: 100%; }

/* Collections dropdown. The toggle is a <button> so it's reachable by keyboard
   and announces its state; it's styled to match the sibling <a> links. */
.main-nav .has-submenu { position: relative; }
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: none;
	border: 0;
	padding: 0 0 2px;
	cursor: pointer;
	font-family: var(--font-body-fr);
	color: var(--color-cream);
	font-weight: 400;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: color 0.3s;
}
html[lang^="ar"] .submenu-toggle { font-family: var(--font-body-ar); font-size: 15px; letter-spacing: 0.5px; }
.submenu-toggle:hover, .has-submenu.is-open .submenu-toggle { color: var(--color-gold); }
.submenu-caret {
	width: 6px;
	height: 6px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.3s var(--ease-lux);
}
.has-submenu.is-open .submenu-caret { transform: rotate(225deg) translateY(-2px); }

.main-nav .submenu {
	position: absolute;
	inset-block-start: calc(100% + 18px);
	inset-inline-start: 0;
	min-width: 240px;
	flex-direction: column;
	gap: 0;
	padding: var(--space-sm) 0;
	background: rgba(var(--color-ink-rgb), 0.98);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(var(--color-gold-rgb), 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.3s var(--ease-lux), transform 0.3s var(--ease-lux), visibility 0.3s;
}
.has-submenu.is-open .submenu { opacity: 1; visibility: visible; transform: none; }
.main-nav .submenu li { display: block; }
.main-nav .submenu a { display: block; padding: 0.6em var(--space-sm); letter-spacing: 1.5px; }
.main-nav .submenu a::after { display: none; }
.main-nav .submenu a:hover { background: rgba(var(--color-gold-rgb), 0.1); }

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.lang-switcher { display: flex; gap: 0.5rem; }
.lang-switcher a { border: 1px solid rgba(var(--color-gold-rgb), 0.35); padding: 0.3em 0.7em; font-size: 0.8rem; letter-spacing: 1px; color: var(--color-cream-dim); }
.lang-switcher a.current-lang, .lang-switcher a:hover { border-color: var(--color-gold); color: var(--color-gold); }

/* Header CTA — gold pill like the old site's "Devis Gratuit", not green */
.whatsapp-btn {
	display: inline-block;
	font-family: var(--font-body-fr);
	background: var(--color-gold);
	color: var(--color-ink-soft);
	padding: 12px 28px;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: all 0.4s var(--ease-lux);
}
html[lang^="ar"] .whatsapp-btn { font-family: var(--font-body-ar); font-size: 13px; letter-spacing: 0.5px; }
.whatsapp-btn:hover { background: var(--color-gold-light); color: var(--color-ink-soft); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--color-gold-rgb), 0.3); }

.nav-toggle { display: none; }

/* ==========================================================================
   Floating WhatsApp button (site-wide)
   ========================================================================== */
.whatsapp-float {
	position: fixed;
	/* Intentionally physical right/bottom, not inset-inline-end: chat bubbles
	   conventionally stay bottom-right regardless of page direction — do not
	   mirror this for RTL. */
	right: 24px;
	bottom: 24px;
	width: 60px;
	height: 60px;
	background: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
	z-index: 1000;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	animation: ddd-pulse 2s infinite;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5); }
.whatsapp-float svg { width: 28px; height: 28px; }
@keyframes ddd-pulse {
	0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
	50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.6); }
}
@keyframes ddd-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
	.whatsapp-float, .hero::before, .hero::after { animation: none; }
}

/* ==========================================================================
   Hero — full-viewport dark opener, start-aligned, oversized light serif
   ========================================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-block: var(--space-xl);
	/* Soft brown-gold wash on the trailing half, echoing the old hero's
	   clipped wedge panel. Physical "right" — flipped in style-rtl.css. */
	background:
		linear-gradient(115deg, transparent 45%, rgba(74, 55, 40, 0.35) 70%, rgba(var(--color-gold-rgb), 0.07) 100%),
		var(--color-ink);
	color: var(--color-cream-dim);
	text-align: start;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	bottom: -100px;
	right: -100px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	border: 1px solid rgba(var(--color-gold-rgb), 0.08);
	animation: ddd-float 6s ease-in-out infinite;
	pointer-events: none;
}
.hero::after {
	content: "";
	position: absolute;
	top: 20%;
	left: 10%;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 1px solid rgba(var(--color-gold-rgb), 0.06);
	animation: ddd-float 8s ease-in-out infinite 1s;
	pointer-events: none;
}
.hero .container { position: relative; z-index: 1; width: 100%; padding-top: 60px; }
.hero h1 {
	font-size: clamp(2.6rem, 7vw, 5.2rem);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -1px;
	color: var(--color-cream);
	max-width: 18ch;
	margin-bottom: var(--space-sm);
}
.hero p.lead { font-family: var(--font-body-fr); font-size: 1rem; font-weight: 300; color: var(--color-cream-dim); opacity: 0.8; max-width: 500px; margin: 0 0 var(--space-md); }
html[lang^="ar"] .hero p.lead { font-family: var(--font-body-ar); }
.hero-cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.hero .eyebrow { color: var(--color-gold); margin-bottom: var(--space-md); }
.hero .accent-gold { color: var(--color-gold); }
.hero .btn-outline { color: var(--color-gold); border-color: var(--color-gold); }
.hero .btn-outline:hover { color: var(--color-ink-soft); background: var(--color-gold); }

.hero-stats { display: flex; gap: 60px; flex-wrap: wrap; margin-top: 70px; }
.hero-stat { text-align: start; }
.hero-stat strong { display: block; font-family: var(--font-heading-fr); font-size: 2.25rem; font-weight: 300; color: var(--color-gold); }
html[lang^="ar"] .hero-stat strong { font-family: var(--font-heading-ar); }
.hero-stat span { display: block; margin-top: 0.3em; font-family: var(--font-body-fr); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--color-cream-dim); opacity: 0.6; }
html[lang^="ar"] .hero-stat span { font-family: var(--font-body-ar); letter-spacing: 0.5px; font-size: 13px; }

/* ==========================================================================
   Sections & cards
   ========================================================================== */
.section { padding-block: var(--space-xl); }
.section-alt { background: var(--color-cream); color: var(--color-ink); }
.section-head { text-align: center; max-width: 700px; margin-inline: auto; margin-bottom: var(--space-lg); }
.section-head .eyebrow { justify-content: center; }
.section-head p { font-size: 0.95rem; color: var(--color-text-muted); opacity: 0.85; }

.section-dark {
	background: var(--color-ink);
	color: var(--color-cream-dim);
	position: relative;
	overflow: hidden;
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--color-cream); }
.section-dark .container { position: relative; z-index: 1; }
.section-dark .eyebrow { color: var(--color-gold); }
.section-dark .accent-gold { color: var(--color-gold); }
.section-dark p { color: var(--color-cream-dim); opacity: 0.8; }
.section-dark .btn-outline { color: var(--color-gold); border-color: var(--color-gold); }
.section-dark .btn-outline:hover { color: var(--color-ink-soft); background: var(--color-gold); }

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

/* Default card = light "service" card from the old site: white on cream,
   hairline border, generous padding. Cards that carry media (products,
   categories) instead get the dark gradient treatment below. */
.card {
	background: var(--color-white);
	color: var(--color-text-muted);
	border: 1px solid var(--color-cream-dim);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux), border-color 0.3s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(61, 43, 31, 0.08); }
.card h1, .card h2, .card h3, .card h4 { color: var(--color-ink-soft); font-weight: 500; }

.card:has(.card-media) {
	background: linear-gradient(135deg, var(--color-ink-soft) 0%, var(--color-charcoal-soft) 55%, var(--color-gold-deep) 130%);
	color: var(--color-cream-dim);
	border: none;
}
.card:has(.card-media):hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(var(--color-ink-rgb), 0.25); }
.card:has(.card-media) h1, .card:has(.card-media) h2, .card:has(.card-media) h3 { color: var(--color-cream); }

.card-media { aspect-ratio: 4 / 3; background: transparent; display: flex; align-items: center; justify-content: center; color: rgba(var(--color-gold-rgb), 0.5); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .star-icon { width: 48px; height: 48px; }
.card-body { padding: var(--space-md); }
.card-body h3 { font-size: 1.4rem; margin-bottom: 0.4em; }
.card-meta { font-family: var(--font-body-fr); color: var(--color-gold); font-size: 10px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 0.8em; }
html[lang^="ar"] .card-meta { font-family: var(--font-body-ar); font-size: 12px; letter-spacing: 1px; }
.card-excerpt { font-size: 13px; line-height: 1.7; margin: 0; }
.card:has(.card-media) .card-excerpt { color: var(--color-cream-dim); opacity: 0.75; }

.product-specs { list-style: none; margin: var(--space-sm) 0; padding: 0; display: grid; gap: 0.5em; }
.product-specs li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--color-border-light); padding-bottom: 0.4em; color: var(--color-text-muted); }
.product-specs li strong { color: var(--color-ink-soft); }

/* ==========================================================================
   Product filter pills (archive-produit.php)
   ========================================================================== */
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--space-lg); }

/* Pagination.
   the_posts_pagination() had no styling at all, so the numbers fell out as bare
   browser links flush to the left margin. The catalogue now fits on one page,
   so this normally never renders — it is here for the day a collection grows
   past the cap, and because an unstyled fallback is exactly the kind of thing
   nobody notices until a client does. */
.pagination { margin-top: var(--space-lg); }
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--color-border-light);
	color: var(--color-text-muted);
	font-family: var(--font-body-fr);
	font-size: 14px;
	letter-spacing: 1px;
	transition: border-color 0.3s, color 0.3s;
}
html[lang^="ar"] .pagination .page-numbers { font-family: var(--font-body-ar); letter-spacing: 0; }
.pagination .page-numbers:hover { border-color: var(--color-gold); color: var(--color-gold-deep); }
.pagination .page-numbers.current {
	border-color: var(--color-gold);
	color: var(--color-gold-deep);
	font-weight: 500;
}
.pagination .page-numbers.dots { border-color: transparent; min-width: 0; padding: 0 4px; }

/* ==========================================================================
   Footer — minimal black band like the old site
   ========================================================================== */
.site-footer { background: var(--color-ink); border-top: 1px solid rgba(61, 43, 31, 0.4); padding-block: var(--space-lg) var(--space-md); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); } }
.footer-grid h4 { font-family: var(--font-body-fr); color: var(--color-gold); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 3px; }
html[lang^="ar"] .footer-grid h4 { font-family: var(--font-body-ar); font-size: 13px; letter-spacing: 1px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; }
.footer-grid li { color: var(--color-cream-dim); opacity: 0.7; font-size: 14px; }
.footer-grid a { color: var(--color-cream-dim); opacity: 0.7; font-size: 14px; }
.footer-grid a:hover { color: var(--color-gold); opacity: 1; }
.footer-grid p { color: var(--color-cream-dim); opacity: 0.6; font-size: 14px; }
.footer-bottom { text-align: center; color: var(--color-cream-dim); opacity: 0.4; font-size: 12px; margin-top: var(--space-lg); border-top: 1px solid rgba(61, 43, 31, 0.4); padding-top: var(--space-sm); }

.footer-grid .social-title { margin-top: var(--space-md); }
.social-links { display: flex; gap: 12px; }
.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(var(--color-gold-rgb), 0.35);
	color: var(--color-cream-dim);
	opacity: 0.8;
	transition: color 0.3s, border-color 0.3s, background 0.3s, opacity 0.3s, transform 0.3s var(--ease-lux);
}
.social-link svg { width: 19px; height: 19px; }
.social-link:hover {
	color: var(--color-ink);
	background: var(--color-gold);
	border-color: var(--color-gold);
	opacity: 1;
	transform: translateY(-2px);
}

/* ==========================================================================
   Pills (collection filters)
   ========================================================================== */
.pill {
	font-family: var(--font-body-fr);
	border: 1px solid transparent;
	background: none;
	color: var(--color-charcoal-soft);
	padding: 10px 24px;
	border-radius: 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
	cursor: pointer;
	transition: border-color 0.3s, color 0.3s;
}
html[lang^="ar"] .pill { font-family: var(--font-body-ar); font-size: 14px; letter-spacing: 0.5px; }
.pill:hover { border-color: var(--color-gold); color: var(--color-gold); }
.pill.is-active { border-color: var(--color-gold); color: var(--color-gold); background: none; font-weight: 500; }

/* ==========================================================================
   Model page
   ========================================================================== */
.model-page { padding-top: var(--space-lg); }
.model-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-lg); align-items: start; }

/* No fixed ratio: the workshop photos are mostly portrait, and forcing them
   into a landscape frame cuts the bottom off the furniture. The image keeps
   its own proportions; only the empty placeholder needs a defined box. */
.model-main-media { background: var(--color-cream); }
.model-main-media img { width: 100%; height: auto; display: block; }
.model-main-trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
}
.model-main-trigger img { transition: transform 1.2s var(--ease-lux); }
.model-main-trigger:hover img { transform: scale(1.03); }
.model-main-trigger:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

.model-media-placeholder {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(var(--color-gold-rgb), 0.5);
}
.model-media-placeholder .star-icon { width: 64px; height: 64px; }

.model-intro h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 0.2em; }
.model-tagline {
	font-family: var(--font-heading-fr);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--color-charcoal-soft);
	margin: 0 0 var(--space-sm);
}
html[lang^="ar"] .model-tagline { font-family: var(--font-heading-ar); font-style: normal; }
a.eyebrow { text-decoration: none; }
a.eyebrow:hover { color: var(--color-gold-light); }
.model-price {
	font-family: var(--font-heading-fr);
	font-size: 1.6rem;
	color: var(--color-gold-deep);
	margin: 0 0 var(--space-md);
}
html[lang^="ar"] .model-price { font-family: var(--font-heading-ar); }
.model-description { margin-bottom: var(--space-md); }
.model-description p { color: var(--color-text-muted); }
.model-intro .hero-cta { margin-top: var(--space-md); }

.model-gallery-block { margin-top: var(--space-xl); }
.model-gallery-title { text-align: center; font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: var(--space-lg); }
.model-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Square tiles: the photo sets mix portrait and landscape, and a square is the
   least destructive uniform crop for both. Clicking opens the uncropped image. */
.model-gallery-item {
	padding: 0;
	border: none;
	background: var(--color-cream);
	aspect-ratio: 1 / 1;
	cursor: zoom-in;
	overflow: hidden;
}
.model-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-lux); }
.model-gallery-item:hover img { transform: scale(1.05); }

/* Sticky quote bar — mobile only, see the media query at the end of the file.
   Hidden by default so it never appears on desktop. */
.model-sticky-cta { display: none; }

.collection-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--space-xl) var(--space-md);
	border: 1px dashed var(--color-cream-dim);
	color: var(--color-text-muted);
}
.collection-empty .star-icon { width: 40px; height: 40px; color: var(--color-gold); margin-bottom: var(--space-sm); }
.collection-empty p { max-width: 40ch; margin-inline: auto; margin-bottom: var(--space-md); }

/* Lightbox — built by main.js on first use */
.ddd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	background: rgba(var(--color-ink-rgb), 0.95);
	backdrop-filter: blur(8px);
}
.ddd-lightbox.is-open { display: flex; }
.ddd-lightbox img { max-width: min(1200px, 92vw); max-height: 88vh; object-fit: contain; }
.ddd-lightbox-close {
	position: absolute;
	top: 24px;
	inset-inline-end: 24px;
	width: 48px;
	height: 48px;
	font-size: 2rem;
	line-height: 1;
	background: none;
	border: 1px solid rgba(var(--color-gold-rgb), 0.4);
	color: var(--color-gold);
	cursor: pointer;
}
.ddd-lightbox-close:hover { background: var(--color-gold); color: var(--color-ink); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info-list { list-style: none; margin: var(--space-sm) 0; padding: 0; display: grid; gap: var(--space-sm); }
.contact-info-list li { display: flex; gap: 0.8em; color: var(--color-text-muted); }
.contact-info-list strong { color: var(--color-ink-soft); font-weight: 500; }
.contact-map { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-cream-dim); }
.contact-map iframe { width: 100%; height: 360px; border: 0; }

form.contact-form { display: grid; gap: var(--space-sm); }
form.contact-form label { display: block; margin-bottom: 0.4em; color: var(--color-gold-deep); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
form.contact-form input, form.contact-form textarea, form.contact-form select {
	width: 100%;
	padding: 0.9em 1em;
	background: var(--color-white);
	border: 1px solid var(--color-cream-dim);
	border-radius: 0;
	color: var(--color-ink);
	font-family: inherit;
	font-size: 15px;
}
form.contact-form input:focus, form.contact-form textarea:focus { outline: none; border-color: var(--color-gold); }

/* ==========================================================================
   Scroll fade-in
   ========================================================================== */
.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s var(--ease-lux), transform 0.8s var(--ease-lux);
	transition-delay: calc(var(--fade-i, 0) * 100ms);
}
.fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.fade-in { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Landing page — photo-led storefront sections
   ========================================================================== */

/* Hero with a full-bleed photo behind it. The source renders carry a baked-in
   watermark (studio logo bottom-centre, phone numbers at mid-left and
   mid-right), so the scrim is deliberately heavy on the text side and the
   image is scaled past the frame to push the bottom badge out of view.
   Revisit these values once unwatermarked exports land. */
:root {
	--hero-scrim-angle: 90deg;

	/* Every source render carries a baked-in studio badge across the bottom
	   centre. Photo frames render the image taller than their box and anchor
	   it to the top, so the badge is clipped away. Set this to 1 (or delete
	   the .has-watermark-crop rules further down) once unwatermarked exports
	   are supplied. */
	--watermark-crop: 1.45;
}

.hero-media { background: var(--color-ink); }
.hero-media::before, .hero-media::after { display: none; }

.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg-img,
.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}

/* Only when the hero falls back to a watermarked render: scale up and anchor
   high so the studio badge along the bottom is pushed out of frame. A clean
   photograph is shown as composed. */
.hero-bg.is-watermarked img {
	object-position: center 28%;
	transform: scale(1.18);
	transform-origin: center 25%;
}
/* Scrim tuned to keep the cream text readable while letting the salon show.
   Heavier on the text side, opening up towards the far edge. */
.hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(var(--hero-scrim-angle),
			rgba(var(--color-ink-rgb), 0.90) 0%,
			rgba(var(--color-ink-rgb), 0.72) 40%,
			rgba(var(--color-ink-rgb), 0.34) 72%,
			rgba(var(--color-ink-rgb), 0.20) 100%),
		linear-gradient(to bottom,
			rgba(var(--color-ink-rgb), 0.50) 0%,
			transparent 32%,
			transparent 64%,
			rgba(var(--color-ink-rgb), 0.80) 100%);
}

/* The fallback render carries phone numbers at mid-height on both sides, so
   it needs a much denser wash to stay presentable. */
.hero-bg.is-watermarked::after {
	background:
		linear-gradient(var(--hero-scrim-angle),
			rgba(var(--color-ink-rgb), 0.96) 0%,
			rgba(var(--color-ink-rgb), 0.88) 38%,
			rgba(var(--color-ink-rgb), 0.55) 68%,
			rgba(var(--color-ink-rgb), 0.42) 100%),
		linear-gradient(to bottom,
			rgba(var(--color-ink-rgb), 0.55) 0%,
			transparent 30%,
			transparent 62%,
			rgba(var(--color-ink-rgb), 0.85) 100%);
}

/* Category tiles — tall portrait crop with the label beneath, storefront style */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tile-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tile { display: block; color: inherit; }
.tile-media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--color-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(var(--color-gold-rgb), 0.5);
}
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-lux); }
.tile-media .star-icon { width: 56px; height: 56px; }
.tile-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 55%, rgba(var(--color-ink-rgb), 0.45) 100%);
	opacity: 0;
	transition: opacity 0.5s var(--ease-lux);
}
.tile:hover .tile-media img { transform: scale(1.06); }
.tile:hover .tile-media::after { opacity: 1; }
.tile-body { padding-top: var(--space-sm); }
.tile-body h3 { font-size: 1.35rem; margin-bottom: 0.35em; color: var(--color-ink-soft); }
.tile-body p { font-size: 13px; line-height: 1.7; color: var(--color-text-muted); opacity: 0.85; margin: 0 0 0.9em; }
.tile-link {
	font-family: var(--font-body-fr);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--color-gold-deep);
	border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.4);
	padding-bottom: 3px;
	transition: color 0.3s, border-color 0.3s;
}
html[lang^="ar"] .tile-link { font-family: var(--font-body-ar); font-size: 13px; letter-spacing: 0.5px; }
.tile:hover .tile-link { color: var(--color-gold); border-color: var(--color-gold); }
.tile-price {
	font-family: var(--font-heading-fr);
	font-size: 1.1rem;
	color: var(--color-gold-deep);
	margin: 0 0 0.7em;
}
html[lang^="ar"] .tile-price { font-family: var(--font-heading-ar); }

/* Notre Atelier — team shot then the three stages of the work.
   The team photo is portrait at source; a 16/9 frame would crop it to a band of
   torsos, so it sits in a 3/2 frame with the crop biased upward to keep faces
   and the hangar roof rather than the concrete floor. */
/* Capped rather than full-bleed: at container width the 3/2 frame ran ~750px
   tall and pushed the whole page down before a word was read. Capped to the
   prose column below it, so image and text share one measure. */
.atelier-team { margin: 0 auto var(--space-lg); overflow: hidden; max-width: 780px; }
.atelier-team img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 32%;
	display: block;
}
.atelier-team figcaption,
.atelier-step figcaption p {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	line-height: 1.7;
}
.atelier-team figcaption { margin-top: var(--space-xs); text-align: center; }
.atelier-prose { max-width: 780px; margin-inline: auto; }

.atelier-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.atelier-step { margin: 0; }
.atelier-step-media { overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: var(--space-sm); }
.atelier-step-media img { width: 100%; height: 100%; object-fit: cover; }
.atelier-step h3 { font-size: 1.25rem; margin-bottom: var(--space-xs); }

@media (max-width: 900px) {
	.atelier-steps { grid-template-columns: 1fr; gap: var(--space-lg); }
	.atelier-team img { aspect-ratio: 4 / 3; }
}

/* Split feature — large image beside a copy block */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.feature-split-reverse .feature-media { order: 2; }
.feature-media { overflow: hidden; aspect-ratio: 4 / 3; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
/* Portrait source in a square frame. The default 4/3 would keep barely half the
   height and lose the work itself; a full 3/4 frame ran 704px tall and dwarfed
   the short copy block beside it. Square splits the difference — it trims the
   apron at the top and the shavings at the bottom, and leaves the hands and the
   plane, which is the whole subject, dead centre. */
.feature-media-portrait { aspect-ratio: 1 / 1; }
.feature-body h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: var(--space-sm); }
.feature-body p { font-size: 0.95rem; line-height: 1.9; margin-bottom: var(--space-md); }

.variant-strip { margin-bottom: var(--space-md); }
.variant-label {
	display: block;
	font-family: var(--font-body-fr);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--color-gold-deep);
	margin-bottom: 0.8em;
}
html[lang^="ar"] .variant-label { font-family: var(--font-body-ar); font-size: 12px; letter-spacing: 1px; }
.variant-thumbs { display: flex; gap: 10px; }
.variant-thumb { width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--color-cream-dim); }
.variant-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Realisations mosaic — one lead image plus a 2x2 of supporting shots */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 20px; }
.mosaic-item { margin: 0; overflow: hidden; background: var(--color-cream); }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-lux); }
.mosaic-item:hover img { transform: scale(1.05); }
.mosaic-item:first-child { grid-column: span 2; grid-row: span 2; }

.section-foot { text-align: center; margin-top: var(--space-lg); }

/* Trust band — warm brown rule between the cream and dark sections */
.trust-band { background: var(--color-charcoal); color: var(--color-cream-dim); padding-block: var(--space-lg); }
.trust-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-md); align-items: start; }
.trust-title {
	font-size: 1.6rem;
	line-height: 1.3;
	color: var(--color-cream);
	margin: 0;
	padding-inline-end: var(--space-sm);
}
.trust-item h3 { font-family: var(--font-body-fr); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: var(--color-gold-light); margin-bottom: 0.6em; }
html[lang^="ar"] .trust-item h3 { font-family: var(--font-body-ar); font-size: 15px; letter-spacing: 0.5px; }
.trust-item p { font-size: 13px; line-height: 1.7; color: var(--color-cream-dim); opacity: 0.75; margin: 0; }
.trust-icon { width: 22px; height: 22px; color: var(--color-gold); margin-bottom: 0.9em; }

/* Process — numbered rail with a hairline connecting the steps */
.process-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.process-step { position: relative; padding-top: var(--space-md); }
.process-step::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 1px;
	background: rgba(var(--color-gold-rgb), 0.35);
}
.process-step::after {
	content: "";
	position: absolute;
	inset-block-start: -3px;
	inset-inline-start: 0;
	width: 7px;
	height: 7px;
	background: var(--color-gold);
	border-radius: 50%;
}
.process-num { display: block; font-family: var(--font-heading-fr); font-size: 2.4rem; font-weight: 300; color: var(--color-gold); line-height: 1; margin-bottom: 0.25em; }
html[lang^="ar"] .process-num { font-family: var(--font-heading-ar); }
.process-step h3 { font-size: 1.05rem; margin: 0; }

/* Watermark crop utility — declared after the photo-frame components so it
   wins the equal-specificity tie on `height`. Renders the image taller than
   its frame and anchors it to the top, pushing the baked-in studio badge
   below the clip line. Temporary; see --watermark-crop above. */
.has-watermark-crop { overflow: hidden; }
.has-watermark-crop img {
	height: calc(100% * var(--watermark-crop));
	object-position: center top;
}

/* ==========================================================================
   Responsive nav (mobile)
   ========================================================================== */
@media (max-width: 1024px) {
	.trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
	.trust-title { grid-column: 1 / -1; }
	.process-rail { grid-template-columns: repeat(2, 1fr); }
	.tile-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.model-head { grid-template-columns: 1fr; gap: var(--space-md); }
	.model-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	/* One tile per row: the 3/4 portrait crop would otherwise be taller than
	   the viewport on a phone. */
	.tile-grid { grid-template-columns: 1fr; }
	/* Square rather than 4/3, and the crop biased downward.
	   The catalogue is shot in portrait, and in almost every frame the salon
	   sits in the lower two thirds with wall and ceiling above it. A 4/3 tile
	   kept only the middle 56% of a portrait source and centred it, so a phone
	   showed more moulding than sedari. Square keeps 75%, and 65% pulls that
	   window down onto the furniture without losing the carved ceilings that
	   are themselves part of the sell. */
	.tile-media { aspect-ratio: 1 / 1; }
	.tile-media img { object-position: center 65%; }
	.feature-split { grid-template-columns: 1fr; gap: var(--space-md); }
	.feature-split-reverse .feature-media { order: 0; }
	.mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
	.mosaic-item:first-child { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 600px) {
	.tile-grid-4 { grid-template-columns: 1fr; }

	/* Two per row rather than one: at 375px a single square tile is ~335px of
	   scrolling per photo, and a 15-shot gallery becomes a very long page. */
	.model-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }

	/* 40px of side padding costs 21% of a 375px screen. */
	.container { padding-inline: 20px; }

	/* 100px band padding reads as generous on a desktop and as dead space on a
	   phone. */
	:root { --space-xl: 3.5rem; --space-lg: 2.5rem; }

	.hero { min-height: 0; padding-block: var(--space-lg) var(--space-xl); }
	.hero .container { padding-top: var(--space-md); }
	.hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
	.hero p.lead { font-size: 0.95rem; }
	.hero-cta { gap: 0.6rem; }
	.hero-cta .btn { width: 100%; text-align: center; }

	/* Three across instead of wrapping onto three lines. */
	.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); }
	.hero-stat strong { font-size: 1.6rem; }
	.hero-stat span { font-size: 10px; letter-spacing: 1px; }

	.section-head { margin-bottom: var(--space-md); }
	.model-head { gap: var(--space-md); }
	.model-intro .hero-cta .btn { width: 100%; }
	/* Keeps "à partir de 990 DH / mètre linéaire" on one line at 375px. */
	.model-price { font-size: 1.2rem; }
	.trust-grid { grid-template-columns: 1fr; }
	.process-rail { grid-template-columns: 1fr; gap: var(--space-sm); }

	/* Comfortable tap targets for the language switcher. */
	.lang-switcher a { padding: 0.5em 0.8em; }

	/* Slightly smaller so it sits less on top of full-width buttons. */
	.whatsapp-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
	.whatsapp-float svg { width: 24px; height: 24px; }

	/* ----- Sticky quote bar on model pages ----- */
	.model-sticky-cta {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 1001;
		padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
		background: var(--color-ink);
		border-top: 1px solid rgba(var(--color-gold-rgb), 0.25);
		box-shadow: 0 -8px 24px rgba(var(--color-ink-rgb), 0.35);
	}
	.model-sticky-price { flex: 1; min-width: 0; line-height: 1.25; }
	.model-sticky-label {
		display: block;
		font-family: var(--font-body-fr);
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: 1.5px;
		color: var(--color-cream-dim);
		opacity: 0.6;
	}
	html[lang^="ar"] .model-sticky-label { font-family: var(--font-body-ar); font-size: 11px; letter-spacing: 0.5px; }
	.model-sticky-price strong {
		font-family: var(--font-heading-fr);
		font-size: 1.2rem;
		font-weight: 400;
		color: var(--color-gold);
		white-space: nowrap;
	}
	html[lang^="ar"] .model-sticky-price strong { font-family: var(--font-heading-ar); }
	.model-sticky-cta .btn { padding: 13px 20px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }

	/* The bar and the bubble both open WhatsApp; two floating triggers stacked
	   on each other is noise, and the bubble was covering the page CTA. */
	.single-produit .whatsapp-float { display: none; }

	/* Clear the bar so it never covers the end of the footer. */
	.single-produit { padding-bottom: 76px; }
}

@media (max-width: 860px) {
	/* Cibles tactiles. À 10px de padding vertical les pilules de collection
	   faisaient 37px de haut, sous le minimum de 44px retenu par Apple comme
	   par Google — et elles se retrouvent empilées sur trois rangées serrées,
	   là où un appui imprécis atteint la voisine. Le flex sert à recentrer le
	   texte une fois la hauteur imposée. */
	.pill {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Anchored to the header rather than a hard-coded 72px: the header's height
	   changes with the logo and language switcher, and a fixed offset opened
	   the panel underneath it. */
	.main-nav {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		/* Fully opaque: the panel overlays photography, and at 0.98 the image
		   behind it still showed through enough to hurt legibility. */
		background: var(--color-ink);
		padding: var(--space-md);
		display: none;
		max-height: 75vh;
		overflow-y: auto;
		border-top: 1px solid rgba(var(--color-gold-rgb), 0.18);
		box-shadow: 0 20px 40px rgba(var(--color-ink-rgb), 0.4);
	}
	.main-nav.is-open { display: block; }
	.main-nav ul { flex-direction: column; gap: var(--space-sm); }
	.nav-toggle { display: inline-flex; background: none; border: 1px solid rgba(var(--color-gold-rgb), 0.4); color: var(--color-gold); border-radius: var(--radius-sm); padding: 0.5em 0.7em; }
	.hero h1 { max-width: none; }

	.site-logo img { height: 56px; }

	/* Menu button first, logo centred, language switcher last. `order` on the
	   flex row means this mirrors on its own under dir="rtl", so the button
	   stays on the reading-start side in both languages. */
	.nav-toggle { order: -1; }
	.site-logo { order: 0; }
	.header-actions { order: 1; }

	/* `order` alone does not centre the logo. space-between shares the free
	   space out evenly, so the wider flank shifts the middle item across by half
	   the difference — 28px to the left here, a 32px menu button facing an 88px
	   language switcher. Taking the logo out of the flow puts it on the true
	   centre line whatever sits either side of it, and left/translate (rather
	   than an inset-inline property) keeps that centre identical under RTL.
	   min-height then holds the bar open, since the tallest item no longer
	   contributes to it: 56px of logo plus the 10px padding either side. */
	.site-header .container { position: relative; min-height: 76px; }
	.site-logo { position: absolute; left: 50%; transform: translateX(-50%); }

	/* The header CTA ran off the right edge. The floating WhatsApp button is
	   always on screen on mobile and does the same job. */
	.header-actions .whatsapp-btn { display: none; }

	.site-header .container { padding-block: 10px; gap: var(--space-sm); }
	body.is-front-page .site-header:not(.is-scrolled) .container { padding-block: 12px; }

	/* Inside the collapsed panel the dropdown becomes a plain indented list —
	   the menu is already behind a tap, a second one buys nothing. */
	.submenu-toggle { pointer-events: none; }
	.submenu-caret { display: none; }
	.main-nav .submenu {
		position: static;
		min-width: 0;
		padding: var(--space-sm) 0 0;
		margin-inline-start: var(--space-sm);
		background: none;
		backdrop-filter: none;
		border: 0;
		border-inline-start: 1px solid rgba(var(--color-gold-rgb), 0.25);
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.main-nav .submenu a { padding-block: 0.35em; }
}