/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ─── Footer design (.dsf-root) ──────────────────────────────────────────
   Le conteneur footer WoodMart est blanc (footer-style: light) : sans la
   barre copyrights sombre, son fond apparaît en bande blanche sous le
   footer design (et sur les côtés > 1222px). On aligne le fond sur l'ink
   du footer design et on neutralise les espaces parasites. */
footer.wd-footer {
	background-color: #0E0E0E;
	/* Fond full-bleed mesuré (mx-vw-global pose --mx-foot-w / --mx-foot-ml) :
	   le calc 50% − mxvw/2 supposait le wrapper centré dans le viewport, or la
	   barre verticale du mega menu le décale — aux résolutions basses le footer
	   passait sous la barre à gauche et se faisait rogner à droite (constat
	   30/07). Le JS mesure la position réelle : le footer couvre du bord gauche
	   du wrapper visible (à droite de la barre) au bord droit du viewport.
	   Le calc reste en repli sans JS. */
	width: var(--mx-foot-w, var(--mxvw, 100vw));
	margin-left: var(--mx-foot-ml, calc(50% - var(--mxvw, 100vw) / 2));
}
footer.wd-footer .main-footer {
	padding-block: 0;
	/* Le bloc design (.dsf-root) gère sa propre largeur (.dsf-inner 1600px) :
	   on libère le conteneur WoodMart (1222px) pour un fond full-bleed. */
	max-width: none;
	padding-inline: 0;
}
footer.wd-footer .main-footer > p:empty {
	display: none;
}
/* Le margin-bottom: 20px hérité par le <footer> du bloc design fusionne
   avec les marges parentes (.main-footer sans padding) et ressort sous
   footer.wd-footer → 20px de body blanc. flow-root bloque toute fuite
   de marge par collapse. */
footer.wd-footer {
	display: flow-root;
}
footer.wd-footer .main-footer > footer {
	margin-bottom: 0;
}

/* Gouttière du footer alignée sur le header (DVS 29/07).
   .main-footer libère le .container (max-width:none, padding-inline:0) pour
   obtenir un fond bord à bord ; .dsf-inner reprend alors la main avec 48px de
   padding, soit 33px de plus que les 15px du .container — le contenu du footer
   se retrouvait plus rentré que celui de l'en-tête. Le padding vertical
   (72px / 28px) reste inchangé.
   Sélecteur volontairement plus spécifique que `.dsf-inner` : la règle d'origine
   est injectée en <style> dans le corps du footer, donc APRÈS cette feuille. */
footer.wd-footer .dsf-inner {
	max-width: min(var(--wd-container-w, 1600px), 100%);
	padding-inline: 15px;
}

/* ─── Switcher de langue Polylang (header) ──────────────────────────────── */
/* Item courant (parent) : drapeau seul, pas de nom */
.pll-parent-menu-item > .woodmart-nav-link .nav-link-text > span { display: none; }

/* Drapeaux SVG nets (les PNG 16x11 de Polylang pixellisaient une fois agrandis) :
   on masque l'image PNG et on affiche une pastille SVG via ::before. */
.pll-parent-menu-item img { display: none !important; }

/* Parent : drapeau sur .nav-link-text::before (le lien top-level a déjà un ::before WoodMart). */
.pll-parent-menu-item > .woodmart-nav-link .nav-link-text::before,
.pll-parent-menu-item .lang-item > a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 26px;
	height: 19px;
	border-radius: 3px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	vertical-align: middle;
}
/* Dropdown : drapeau par langue */
.pll-parent-menu-item .lang-item-fr > a::before { background-image: url(/wp-content/themes/woodmart-child/flags/fr.svg); }
.pll-parent-menu-item .lang-item-en > a::before { background-image: url(/wp-content/themes/woodmart-child/flags/gb.svg); }
.pll-parent-menu-item .lang-item-es > a::before { background-image: url(/wp-content/themes/woodmart-child/flags/es.svg); }
.pll-parent-menu-item .lang-item-de > a::before { background-image: url(/wp-content/themes/woodmart-child/flags/de.svg); }
/* Item courant (parent) : drapeau selon la langue de la page */
html[lang^="fr"] .pll-parent-menu-item > .woodmart-nav-link .nav-link-text::before { background-image: url(/wp-content/themes/woodmart-child/flags/fr.svg); }
html[lang^="en"] .pll-parent-menu-item > .woodmart-nav-link .nav-link-text::before { background-image: url(/wp-content/themes/woodmart-child/flags/gb.svg); }
html[lang^="es"] .pll-parent-menu-item > .woodmart-nav-link .nav-link-text::before { background-image: url(/wp-content/themes/woodmart-child/flags/es.svg); }
html[lang^="de"] .pll-parent-menu-item > .woodmart-nav-link .nav-link-text::before { background-image: url(/wp-content/themes/woodmart-child/flags/de.svg); }

/* Dropdown : marges internes + items aérés (drapeau + nom) */
.pll-parent-menu-item .wd-dropdown-menu .wd-entry-content { padding: 6px; }
.pll-parent-menu-item .wd-dropdown-menu .wd-sub-menu { padding: 0; }
.pll-parent-menu-item .lang-item > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	white-space: nowrap;
	border-radius: 8px;
}
.pll-parent-menu-item .lang-item > a span { margin-left: 0 !important; }

/* ─── Mini-cart : bouton « Voir le panier » en noir (ink) ───────────────── */
.woocommerce-mini-cart__buttons .btn-cart,
.widget_shopping_cart .btn-cart,
.wd-cart-drawer .btn-cart {
	background-color: #0E0E0E;
	border-color: #0E0E0E;
	color: #fff;
}
.woocommerce-mini-cart__buttons .btn-cart:hover,
.widget_shopping_cart .btn-cart:hover,
.wd-cart-drawer .btn-cart:hover {
	background-color: #000;
	border-color: #000;
	color: #fff;
}

/* ─── Infobox WhatsApp header : resserrer l'interligne titre / numéro ──────── */
.mx-wa .info-box-title { margin-bottom: 1px; line-height: 1.1; }
.mx-wa .info-box-inner,
.mx-wa .info-box-inner p { margin: 0; line-height: 1.15; }

/* ─── Header : recherche en pleine largeur sur l'espace restant ───────────── */
@media (min-width: 1025px) {
	.whb-general-header .wd-header-search-form {
		max-width: none;
		width: 100%;
	}
}

/* ─── Widget livraison (Delivery Country MX) format large dans le header ───── */
.whb-general-header .dcmx-widget {
	line-height: 1.25;
}
.whb-general-header .dcmx-widget .dcmx-widget__line1 {
	font-weight: 600;
}
.whb-general-header .dcmx-widget .dcmx-origin {
	color: #0E0E0E;
}
.whb-general-header .dcmx-widget .dcmx-widget__remaining {
	font-weight: 700;
	color: #f91942;
}

/* ─── Top bar noire : horloge · ticker rotatif · services · langues ───────── */
.mx-topbar-black {
	background: #0E0E0E;
	color: #fff;
	font-family: inherit; /* police sans du site (façon Glozin) — pas le mono */
	font-size: 13px;
	position: relative;
	z-index: 50;
}
/* horloge = donnée → JetBrains Mono (charte) */
.mx-tb-clock {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
}
.mx-topbar-black .mx-tb-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 1660px;
	margin: 0 auto;
	padding: 0 24px;
	min-height: 38px;
}
.mx-topbar-black a { color: #fff; text-decoration: none; }
.mx-tb-left { flex: 0 0 auto; white-space: nowrap; color: rgba(255, 255, 255, .65); letter-spacing: .02em; }
.mx-tb-clock::first-letter { text-transform: uppercase; }
.mx-tb-center { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-start; }
/* Ticker aligné à gauche, juste après l'horloge */
.mx-topbar-black .mx-rot,
.mx-topbar-black .mx-rot__item,
.mx-topbar-black .mx-mq,
.mx-topbar-black .mx-mq__rail { justify-content: flex-start; }
.mx-tb-right { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }
.mx-tb-services { display: flex; gap: 14px; }
.mx-tb-services a { letter-spacing: .05em; text-transform: uppercase; font-size: 11px; transition: color .15s; }
.mx-tb-services a:hover { color: #f91942; }
.mx-tb-langs { display: flex; gap: 7px; align-items: center; }
.mx-tb-lang { display: inline-flex; opacity: .5; transition: opacity .15s; line-height: 0; }
.mx-tb-lang img { display: block; border-radius: 2px; }
.mx-tb-lang:hover { opacity: 1; }
.mx-tb-lang.is-current { opacity: 1; outline: 1.5px solid #f91942; outline-offset: 1px; border-radius: 2px; }
/* Ticker top bar (rotation OU marquee) — couleur + centrage vertical pleine hauteur */
.mx-topbar-black .mx-mq,
.mx-topbar-black .mx-mq__item,
.mx-topbar-black .mx-rot,
.mx-topbar-black .mx-rot__item a { color: #fff; }
/* Anti-dérive verticale : svg en block (pas d'espace baseline inline), line-height stable */
.mx-topbar-black .mx-rot__item,
.mx-topbar-black .mx-rot__item a,
.mx-topbar-black .mx-mq__item { line-height: 1; }
.mx-topbar-black .mx-ico svg { display: block; }
/* Ticker = même mécanisme que l'horloge : petit bloc à hauteur de ligne (.mx-rot height:1.4em),
   centré dans la barre par .mx-tb-inner{align-items:center}. Pas d'étirement, pas de %.
   Les items absolus se calent sur .mx-rot (positionné, hauteur définie) → contenu centré. */
.mx-topbar-black .mx-mq { height: 24px; }
.mx-topbar-black .mx-rot { position: relative; height: 24px; min-height: 0; }
.mx-topbar-black .mx-rot__list { position: static; min-height: 0; height: 24px; margin: 0; padding: 0; }
.mx-topbar-black .mx-rot__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; }
.mx-topbar-black .mx-rot__item a { display: inline-flex; align-items: center; line-height: 1; }
/* Neutralise les styles de contenu WoodMart sur le markup ul/li/a du ticker (marges, puces,
   line-height, padding) qui décalaient le texte vers le haut. */
.mx-topbar-black .mx-rot__list,
.mx-topbar-black .mx-rot__item { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.mx-topbar-black .mx-rot__item::before,
.mx-topbar-black .mx-rot__item::marker { content: none !important; display: none !important; }
.mx-topbar-black .mx-rot__item a,
.mx-topbar-black .mx-rot__item .mx-text { line-height: 1 !important; margin: 0 !important; padding: 0 !important; vertical-align: middle; }
/* Icônes du ticker en framboise (SVG currentColor) ; les drapeaux gardent leurs couleurs (fill fixe). */
.mx-topbar-black .mx-rot .mx-ico,
.mx-topbar-black .mx-mq .mx-ico { color: #f91942; }
/* Mots-clés en gras dans les messages. */
.mx-topbar-black .mx-text strong,
.mx-topbar-black .mx-mq__t strong { font-weight: 800; color: inherit; }
@media (max-width: 1024px) {
	.mx-topbar-black .mx-tb-left,
	.mx-topbar-black .mx-tb-right { display: none; }
	.mx-topbar-black .mx-tb-inner { justify-content: center; gap: 0; padding: 0 12px; min-height: 34px; }
}

/* ─── Filet accordéon menu mobile (fallback si WoodMart n'a pas posé ses openers) ── */
.wd-side-hidden-nav .wd-nav-mobile .menu-item-has-children.mx-acc-open > .wd-sub-menu,
.wd-side-hidden-nav .wd-nav-mobile .menu-item-has-children.mx-acc-open > ul {
	display: block !important;
}

/* ─── Bande livraison mobile (sous le header) ─────────────────────────────── */
.dcmx-mobile-bar { display: none; }
@media (max-width: 1024px) {
	.dcmx-mobile-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #0E0E0E;
		color: #fff;
		padding: 7px 14px;
		font-size: 13px;
		line-height: 1.25;
		position: relative;
	}
	.dcmx-mobile-bar .dcmx-wrapper { display: inline-flex; }
	.dcmx-mobile-bar .dcmx-widget {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		color: #fff;
		cursor: pointer;
	}
	.dcmx-mobile-bar .dcmx-widget__flag { font-size: 15px; line-height: 1; }
	.dcmx-mobile-bar .dcmx-widget__text {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: center;
		gap: 2px 7px;
		font-size: inherit;
	}
	.dcmx-mobile-bar .dcmx-widget__line1 { font-weight: 600; color: #fff; }
	.dcmx-mobile-bar .dcmx-widget__line1::after {
		content: "·";
		margin-left: 7px;
		opacity: .45;
	}
	.dcmx-mobile-bar .dcmx-widget__line2 { color: rgba(255, 255, 255, .85); }
	.dcmx-mobile-bar .dcmx-widget__remaining {
		font-weight: 700;
		color: #D6FC00;
	}
	.dcmx-mobile-bar .dcmx-widget__free-ok { font-weight: 700; color: #D6FC00; }
	.dcmx-mobile-bar .dcmx-widget__arrow { opacity: .6; }

	/* Panel sélecteur de pays : directement sous la barre (pas en bottom-sheet),
	   ancré à la barre et centré. Surclasse le @media(max-width:600px) du plugin. */
	.dcmx-mobile-bar .dcmx-wrapper { position: static; }
	.dcmx-mobile-bar .dcmx-panel,
	.dcmx-mobile-bar .dcmx-panel--dropdown {
		position: absolute;
		top: 100%;
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translateX(-50%);
		width: min(360px, 94vw);
		max-height: 60vh;
		border-radius: 0 0 14px 14px;
		text-align: left;
		color: #0E0E0E;
	}
}

/* ─── Page 404 (override child) ───────────────────────────────────────────── */
.mx-404 { padding: 80px 24px 96px; }
.mx-404__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.mx-404__code { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: clamp(64px, 12vw, 140px); font-weight: 800; line-height: 1; letter-spacing: -2px;
	background: linear-gradient(120deg, #f91942, #D6FC00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mx-404__title { font-size: clamp(34px, 6.5vw, 68px); font-weight: 800; line-height: 1.05; letter-spacing: -1.5px; margin: 12px 0 14px; color: #0E0E0E; }
.mx-404__text { font-size: 1.1em; line-height: 1.6; color: #555; margin: 0 0 28px; }
.mx-404__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.mx-404__btn { display: inline-flex; align-items: center; padding: 13px 28px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .15s, background .15s, color .15s; }
.mx-404__btn--primary { background: #f91942; color: #fff; }
.mx-404__btn--primary:hover { background: #0E0E0E; color: #fff; transform: translateY(-1px); }
.mx-404__btn--ghost { background: transparent; color: #0E0E0E; box-shadow: inset 0 0 0 1.5px #0E0E0E; }
.mx-404__btn--ghost:hover { background: #0E0E0E; color: #fff; transform: translateY(-1px); }
.mx-404__search { max-width: 480px; margin: 0 auto; }

/* ── Fix shimmer badge produit (Custom CSS WoodMart « dvs-shimmer ») ──────────
   Le reflet `.product-label::after` est en position:absolute mais le custom CSS
   refuse position:relative sur .product-label → il s'ancre sur le 1er ancêtre
   positionné. Hors contexte loop WoodMart (ex. page nouveautés, carrousels/bento),
   .product-labels n'est pas positionné → le shimmer couvre TOUTE la card.
   On ancre + clippe le reflet au badge lui-même : effet limité au badge partout.
   (border-radius hérité conservé, n'écrase ni la forme ronde ni les couleurs WoodMart.) */
.product-labels .product-label { position: relative; overflow: hidden; }

/* ── Hover cellule produit : contour 1px framboise sur la carte ───────────────
   Cible .wd-product-wrapper (porte le border-radius = boîte visible) ; .wd-product
   est la colonne (gouttière). outline peint au-dessus du contenu + suit le radius. */
/* Pas de carte blanche permanente : fond de la carte produit transparent. */
.wd-products.wd-products-with-bg .wd-product-wrapper { background-color: transparent !important; }
/* Contour framboise au survol — box-shadow (suit le radius, non clippé par overflow:clip
   du wrapper, contrairement à outline). */
.wd-products .product-grid-item:hover .wd-product-wrapper {
    box-shadow: 0 0 0 1px #f91942 !important;
}

/* ── Barre sticky d'achat (fiche produit) : fond glassmorphism ──────────────
   La barre WoodMart .wd-sticky-btn apparaît en bas au défilement avec un fond
   blanc opaque. On l'aligne sur le glassmorphism de Search MX (cohérence UI) :
   fond translucide + flou d'arrière-plan. Les boutons CTA gardent leurs couleurs. */
.wd-sticky-btn {
	background: rgba(255, 255, 255, .72) !important;
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	border-top: 1px solid rgba(14, 14, 14, .08);
}

/* ── Mini-cart latéral (tiroir qui slide) : fond glassmorphism ──────────────
   Le panneau WoodMart .cart-widget-side glisse depuis la droite avec un fond
   blanc opaque. Même traitement glass que la barre sticky / Search MX.
   Les contrôles (qty) et boutons CTA gardent leur style. */
.cart-widget-side {
	/* .72 → .86 : plus clair/lisible (MA 07/08), blur augmenté pour garder l'effet */
	background: rgba(255, 255, 255, .86) !important;
	-webkit-backdrop-filter: blur(26px) saturate(150%);
	backdrop-filter: blur(26px) saturate(150%);
}

/* ── Menu mobile + panneau connexion (tiroirs latéraux) : glassmorphism ─────
   Mêmes panneaux .wd-side-hidden que le mini-cart → même traitement glass. */
.mobile-nav,
.login-form-side {
	background: rgba(255, 255, 255, .72) !important;
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
}

/* Dispo native WoodMart masquée sur les fiches : le bloc Delivery Manager fait
   foi (3 affichages sinon — décision DVS 20/07). Grille non concernée. */
.single-product div.product .wd-product-stock { display: none; }

/* Points clés (excerpt) : interligne resserré (DVS 16/08) */
.single-product div.product .woocommerce-product-details__short-description { line-height: 1.4; }
.single-product div.product .woocommerce-product-details__short-description ul { margin-block: 8px 10px; }
.single-product div.product .woocommerce-product-details__short-description li { line-height: 1.4; margin-bottom: 2px; }

/* Prix fiche : mention TTC + rappel HT discret à droite (gris encre doux) */
.single-product div.product .summary .price .digi-price-tax { font-size: .5em; font-weight: 700; letter-spacing: .02em; }
.single-product div.product .summary .price .digi-price-ht { display: inline-block; font-size: .45em; font-weight: 500; color: #3A3A3F; margin-left: .7em; vertical-align: baseline; }

/* Livraison offerte : pastille flashy charte (lime + encre), progression framboise */
.single-product div.product .wd-shipping-progress-bar .progress-msg {
    display: inline-block; background: #D6FC00; color: #0E0E0E;
    font-weight: 700; font-size: 14px; line-height: 1.35;
    padding: 4px 10px; border-radius: 0; box-shadow: none;
}
.single-product div.product .wd-shipping-progress-bar .progress-area .progress-bar { background: #f91942; }
.single-product div.product .wd-shipping-progress-bar { margin: 10px 0 14px; }

/* Label stock WoodMart masqué PARTOUT (fiche + grille) — Delivery Manager fait foi :
   bloc complet sur fiche, chips positives (Stock central/Strasbourg) en grille */
.wd-product-stock { display: none !important; }
.dm-delivery-compact { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.dm-stock-chip { font-size: 11px; font-weight: 600; color: #0E0E0E; }
.dm-stock-chip .dm-indicator { color: #28a745; font-size: 9px; vertical-align: 1px; }

/* Produit EN PROMO : SEUL le prix final TTC est surligné framboise (padding
   resserré), prix barré à droite en style normal, HT à la ligne — DVS 20/07 */
.single-product div.product .summary .price .digi-price-promo {
    display: inline-block; background: #E8123F; color: #fff;
    padding: 0 6px; border-radius: 0; line-height: 1.3;
}
.single-product div.product .summary .price .digi-price-promo .amount,
.single-product div.product .summary .price .digi-price-promo bdi { color: #fff; }
.single-product div.product .summary .price .digi-price-old {
    margin-left: .6em; font-size: .55em; color: #777780; vertical-align: baseline;
}
.single-product div.product .summary .price .digi-ht-block {
    display: block; margin-left: 0; margin-top: 4px;
}

/* Barre du bas (sticky add-to-cart) : pas de rappel HT */
.wd-sticky-btn .digi-price-ht, .wd-sticky-add-to-cart .digi-price-ht { display: none !important; }

/* Meta fiche produit : rangée 1 = SKU + EAN · rangée 2 = catégories + tags.
   WoodMart : .product_meta est en flex avec span{flex:1 1 100%} (1 item/ligne) →
   items en largeur auto + élément de rupture (meta-row-break) avant les cats. */
.single-product div.product .product_meta > span,
.single-product div.product .product_meta > .posted_in,
.single-product div.product .product_meta > .tagged_as { flex: 0 1 auto !important; }
.single-product div.product .product_meta > .meta-row-break {
    flex-basis: 100% !important; height: 0; padding: 0; margin: 0 !important;
}
/* rangées resserrées (le gap flex WoodMart est à 10px) */
.single-product div.product .product_meta { row-gap: 2px !important; }

/* ── Slider nouveautés sidebar blog (shortcode mx_nouveautes_slider) ── */
.mx-ns { overflow: hidden; border: 1px solid #ececec; border-radius: 8px; }
.mx-ns-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mx-ns-track::-webkit-scrollbar { display: none; }
.mx-ns-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 16px; text-align: center; color: inherit; }
.mx-ns-slide img { max-width: 78%; height: auto; }
.mx-ns-name { font-weight: 600; font-size: 13px; line-height: 1.3; }
.mx-ns-price { font-family: "JetBrains Mono", monospace; font-size: 13px; color: #f91942; }

/* ── Page /tops ── */
.mx-tops-cat { margin: 0 0 42px; }
.mx-tops-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.mx-tops-head h2 { margin: 0; font-size: 26px; }
.mx-tops-link { font-family: "JetBrains Mono", monospace; font-size: 13px; white-space: nowrap; }

/* ── Hero /tops (même langage visuel que /nouveautes et /promotions) ── */
/* ── FORMAT TYPE header de page (référence : /tops) — décision DVS 22/07.
   Paddings réduits (36px desktop / 26px mobile), appliqué à TOUS les heros
   de pages MX (tops, devis, promotions, nouveautés, marques). ── */
/* Hero de /tops et /devis : rendu bord à bord comme ceux de /marques,
   /nouveautes et /promotions (DVS 29/07). Il vivait DANS #main-content.container ;
   lui retirer sa gouttière alignait bien son texte sur le contenu, mais collait
   celui-ci au bord de son propre fond sombre. Le sortir du container règle les
   deux : le fond va d'un bord à l'autre, et l'inner ramène le texte sur la
   verticale du contenu.
   `margin-inline: calc(50% - 50vw)` : 50% se résout sur la largeur intérieure du
   container (1570px), ce qui place exactement le bord du hero à 0. */
.mx-tops-hero { position: relative; overflow: hidden; margin: 0 calc(50% - 50vw) 40px; padding: 36px 0; background: radial-gradient(120% 140% at 0% 0%, #1b1b1f 0%, #0E0E0E 60%); color: #fff; text-align: left; }
.mx-promo-hero, .nmx-hero, .bmx-brands-hero { padding-top: 36px !important; padding-bottom: 36px !important; }
@media (max-width: 768px) {
    .mx-promo-hero, .nmx-hero, .bmx-brands-hero { padding-top: 26px !important; padding-bottom: 26px !important; }
}
/* Gouttière alignée sur le header (DVS 29/07) — le hero de /marques sert de
   référence. Le motif `padding: 0 clamp(16px,3vw,40px)` plaçait le texte à 40px
   du bord sur grand écran, là où `.container` WoodMart n'en met que 15 : les
   titres de hero flottaient vers la droite par rapport à l'en-tête. Toutes les
   pages MX (marques, tops, nouveautés, promos, déstockage, occasions) partagent
   désormais la même verticale. */
.mx-tops-hero__in { position: relative; z-index: 1; box-sizing: border-box; max-width: min(var(--wd-container-w, 1600px), 100%); margin: 0 auto; padding-inline: 15px; }
.mx-tops-hero__kicker { display: inline-block; font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: #D6FC00; background: rgba(200,255,62,.12); padding: 7px 13px; border-radius: 999px; margin-bottom: 14px; }
.mx-tops-hero__title { font-family: "Inter Tight", system-ui, sans-serif; font-weight: 900; font-size: clamp(30px, 5vw, 52px); letter-spacing: -1.5px; line-height: 1.05; margin: 0 0 10px; color: #fff; }
.mx-tops-hero__subtitle { color: rgba(255,255,255,.82); font-size: clamp(15px, 2vw, 18px); max-width: 640px; margin: 0; }
.page-id-66445 .page-title, .page-id-66445 .entry-title:not(.mx-tops-hero__title),
.page-id-2476 .page-title, .blog .page-title { display: none; }
.page-id-66445 #main-content, .page-id-2476 #main-content, .blog #main-content { padding-top: 0; }
@media (max-width: 768px) { .mx-tops-hero { padding-top: 26px; padding-bottom: 26px; margin-bottom: 28px; } }

/* ── Notice dispo spéciale (DM special_info : réappro, production limitée…) en rouge ── */
.dm-special-info { color: #E8123F; font-weight: 600; }

/* ── Zone dispo fiche produit (DM) : texte un peu plus grand, fond un peu plus sombre ── */
.dm-delivery-block { background: #f4f3f1; font-size: 15px; } /* gris très léger (validé DVS 22/07, préféré au lime pastel) */
.dm-delivery-block .dm-stock-label { font-size: 14px; }
.dm-delivery-block .dm-delivery-text { font-size: 15px; }

/* ─── Heros MX (nouveautés, tops, promos, marques, devis, actu) : marge de
   sécurité à gauche = largeur de la sticky nav WoodMart (--wd-sticky-nav-w).
   Les heros sont bord à bord (30/07) : sous ~1720px le conteneur interne
   colle au bord du viewport et le titre/texte passait DERRIÈRE la barre
   verticale du mega menu. Au-delà, le centrage naturel dégage déjà la barre ;
   sans barre (mobile), la variable vaut ~0 → règle inerte. ─── */
@media (max-width: 1719px) {
	/* nouveautés et marques : règle équivalente portée par chaque plugin
	   (leur padding-inline shorthand arrive après ce fichier dans le
	   combinateur LiteSpeed et écraserait celle-ci) */
	.mx-tops-hero__in,
	.mx-promo-hero__inner {
		padding-inline-start: calc(15px + var(--wd-sticky-nav-w, 0px));
	}
}

/* ── Linked Variations en cartes (vignette + version + prix), modèle camara ── */
.mx-lv { margin: 14px 0 6px; }
.mx-lv__title {
	font-family: "Inter Tight", system-ui, sans-serif;
	font-weight: 700; font-size: 13px; letter-spacing: .04em;
	text-transform: uppercase; color: #0E0E0E; margin-bottom: 8px;
}
.mx-lv__list { display: flex; flex-direction: column; gap: 6px; }
.mx-lv__card {
	display: flex; align-items: center; gap: 12px;
	padding: 7px 12px 7px 7px; border: 1px solid rgba(14,14,14,.12);
	border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.mx-lv__card:hover { border-color: #0E0E0E; box-shadow: 0 2px 10px rgba(14,14,14,.08); }
.mx-lv__card.is-current { border-color: #f91942; box-shadow: 0 0 0 1px #f91942 inset; pointer-events: none; }
.mx-lv__card img {
	width: 56px; height: 56px; object-fit: contain; border-radius: 7px;
	background: #F7F5F2; flex: 0 0 56px;
}
.mx-lv__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mx-lv__version {
	font-weight: 600; font-size: 14px; line-height: 1.25; color: #0E0E0E;
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mx-lv__card.is-current .mx-lv__version { color: #f91942; }
.mx-lv__price { font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgba(14,14,14,.75); }
.mx-lv__price del { opacity: .55; margin-right: 6px; }
.mx-lv__price ins { text-decoration: none; color: #f91942; }

/* ── Dispo à droite des tuiles Linked Variations ── */
.mx-lv__card { position: relative; }
.mx-lv__stock {
	margin-left: auto; flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 600; white-space: nowrap; padding-left: 10px;
}
.mx-lv__stock-dot { width: 8px; height: 8px; border-radius: 50%; }
.mx-lv__stock.is-in  { color: #1e7e34; }
.mx-lv__stock.is-in  .mx-lv__stock-dot { background: #28a745; animation: dm-dot-pulse 1.6s ease-out infinite; }
.mx-lv__stock.is-bo  { color: #b35c00; }
.mx-lv__stock.is-bo  .mx-lv__stock-dot { background: #fd7e14; }
.mx-lv__stock.is-out { color: rgba(14,14,14,.45); }
.mx-lv__stock.is-out .mx-lv__stock-dot { background: #adb5bd; }
@media (max-width: 480px) {
	.mx-lv__stock { font-size: 0; gap: 0; } /* mobile : puce seule */
}

/* ── Widget ALMA sans cadre (MA 07/08) : le conteneur du widget embarque sa
   propre bordure/ombre même avec hide_border selon les versions → kill CSS. */
.alma-default-widget .alma-payment-plans-container,
.alma-widget .alma-payment-plans-container,
.alma-default-widget [class*="paymentPlans"],
.alma-default-widget [class*="container"] {
	border: 0 !important;
	box-shadow: none !important;
}
.alma-default-widget { border: 0 !important; }

/* ── Titre fiche produit : interligne resserré quand le nom passe sur
   plusieurs lignes (MA 25/08). */
.single-product h1.product_title.entry-title {
	line-height: 1.2;
}