/* ==========================================================================
   ÉCLAT STORE — design system  (rebuild, Woodmart-derived)
   ==========================================================================

   WHAT WAS WRONG BEFORE
   Previous passes treated the brand brown as the *dominant* colour: full-width
   brown bands, brown headings, brown everywhere. That is not how Woodmart —
   or any premium storefront — works, and it is why the result read as blocky
   and primitive.

   THE WOODMART SYSTEM, AS APPLIED HERE
   1. Neutral canvas.        White, plus one warm grey (#F7F6F4) for alternate
                             bands. Nothing else is a background colour.
   2. Neutral text.          Headings #2E2E2E, body #777. Never brand-coloured.
   3. Accent, sparingly.     The brand brown appears on price, primary button,
                             link hover, and the cart badge. That is all.
   4. Small type, wide space. Base 14px / 1.7. Headings are restrained; the
                             luxury signal comes from whitespace, not size.
   5. Hairlines, not boxes.  1px #E8E6E3 separates things. Shadows only on
                             hover, and only barely.
   6. One typeface.          Cairo, 400/500/600/700. A Latin serif was dropped
                             because it has no Arabic glyphs — the Arabic side
                             fell back to a different face, so the three
                             languages did not look like one brand.

   Layout order is logical-property based, so RTL mirrors with no extra CSS.
   ========================================================================== */

:root {
	/* canvas */
	--wd-bg:        #FFFFFF;
	--wd-alt:       #F7F6F4;
	--wd-alt-2:     #FBFAF9;

	/* ink */
	--wd-head:      #333333;
	--wd-dark:      #242424;
	--wd-text:      #767676;
	--wd-soft:      #838383;

	/* lines */
	--wd-line:      #E9E9E9;
	--wd-line-soft: #F0EEEB;

	/* accent — the ONLY place brand colour lives */
	--wd-accent:    #AE6F4D;
	--wd-accent-dk: #915A3C;
	--wd-gold:      #C9973F;
	--wd-sale:      #D41212;
	--wd-ok:        #4B8B5B;

	/* rhythm
	   --------------------------------------------------------------------
	   Phase 2: the site layout is FULL-WIDTH, not boxed. Every container on
	   the site — header tiers, hero, sections, shop archive, page title band,
	   footer — resolves its width through this one token, so switching it from
	   the old 1222px box to 100% spans the whole viewport edge to edge in a
	   single place. Readability is preserved by the gutter instead: it scales
	   with the viewport rather than staying at the 15px a boxed layout needed,
	   so content never runs into the screen edge on a wide monitor.
	   -------------------------------------------------------------------- */
	--wd-max:       100%;
	--wd-gutter:    clamp(20px, 3vw, 55px);
	--wd-sec:       78px;
	--wd-radius:    0px;

	/* Woodmart pairs Lato (body) with Poppins (headings). Arabic has no
	   glyphs in either, so Cairo carries Arabic and is appended as the
	   fallback — one stack, correct rendering in all three languages. */
	--wd-font-body: "Lato", "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--wd-font-head: "Poppins", "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 1024px) {
	:root {
		--wd-gutter: 18px;
		--wd-sec: 52px;
	}
}

/* ==========================================================================
   BRAND PARITY — The7's demo palette remapped onto our tokens
   --------------------------------------------------------------------------
   `uploads/the7-css/css-vars.css` still carries the theme demo's colours, and
   every element we have not explicitly styled reads them: cyan `#1ebbf0` on
   links, buttons, menu decor, counters and hovers; `#23aadd` on button hover;
   `#594492` purple on breadcrumbs; `#8b8d94` grey on body copy, inputs and
   widgets; `#1a1c20` on the footer. That is where the stray colours were
   coming from — not from one rogue rule but from twenty-eight variables.

   Remapping the variables fixes every consumer at once, including plugin and
   theme markup we never touch, and it keeps working if The7 adds new rules
   later. Declared here rather than in css-vars.css because that file is
   regenerated from the theme options panel and would overwrite an edit.

   The one authority for these values stays `eclat_palette()` in functions.php
   and the `--wd-*` tokens above; nothing below invents a colour.
   ========================================================================== */
:root {
	/* accent — every cyan */
	--the7-accent-color: var(--wd-accent);
	--the7-accent-bg-color: var(--wd-accent);
	--the7-links-color: var(--wd-accent);
	--the7-menu-decor-color: var(--wd-accent);
	--the7-product-counter-bg: var(--wd-accent);
	--the7-submenu-active-color: var(--wd-accent);
	--the7-submenu-hover-color: var(--wd-accent);
	--the7-mobile-menu-active-color: var(--wd-accent);
	--the7-mobile-menu-hover-color: var(--wd-accent);
	--the7-top-icons-bg-color-hover: var(--wd-accent);

	/* buttons */
	--the7-btn-bg-color: var(--wd-accent);
	--the7-btn-border-color: var(--wd-accent);
	--the7-btn-hover-bg-color: var(--wd-accent-dk);
	--the7-btn-border-hover-color: var(--wd-accent-dk);
	--the7-btn-color: #ffffff;
	--the7-btn-hover-color: #ffffff;

	/* The7's "microwidget" buttons, used by its own widgets */
	--the7-microwidget-button-bg: var(--wd-accent);
	--the7-microwidget-button-border-color: var(--wd-accent);
	--the7-microwidget-button-hover-bg: var(--wd-accent-dk);
	--the7-microwidget-button-hover-border-color: var(--wd-accent-dk);
	--the7-microwidget-button-2-bg: var(--wd-accent);
	--the7-microwidget-button-2-border-color: var(--wd-accent);
	--the7-microwidget-button-2-hover-bg: var(--wd-accent-dk);
	--the7-microwidget-button-2-hover-border-color: var(--wd-accent-dk);

	/* type and surfaces */
	--the7-base-color: var(--wd-text);
	--the7-input-color: var(--wd-head);
	--the7-widget-sidebar-color: var(--wd-text);
	--the7-widget-footer-color: var(--wd-foot-text, #A6A6A6);
	--the7-breadcrumbs-bg-color: var(--wd-alt);
	--the7-footer-bg-color: var(--wd-foot-bg, #232323);
}

/* Elementor ships its own global palette and paints links and buttons from it
   on any page built with a widget. Same treatment, same source of truth. */
:root {
	--e-global-color-primary: var(--wd-accent);
	--e-global-color-secondary: var(--wd-head);
	--e-global-color-text: var(--wd-text);
	--e-global-color-accent: var(--wd-accent);
}

/* WordPress's own editor preset palette, printed inline by core from the
   theme's registered colours. Only block content that picks the "accent"
   preset reads it, so nothing on the site uses it today — but it is the last
   place the demo cyan was still declared, and a future block would inherit it. */
:root {
	--wp--preset--color--accent: var(--wd-accent);
	--wp--preset--color--primary: var(--wd-accent);
	--wp--preset--color--secondary: var(--wd-head);
}

/* --------------------------------------------------------------------------
   Interactive states that read a colour directly rather than from a variable.
   Scoped to the surfaces the theme and plugins own — our own components
   already use the tokens and are not touched here.
   ----------------------------------------------------------------------- */
#main a:not([class]):hover,
#main .entry-content a:not([class]):hover,
.sidebar-content a:hover,
.woocommerce-breadcrumb a:hover,
.woocommerce-MyAccount-content a:hover { color: var(--wd-accent); }

/* WooCommerce's own accent, used on notices, badges and the price slider */
.woocommerce .onsale,
.woocommerce span.onsale { background: var(--wd-sale); color: #fff; }

.woocommerce .ui-slider .ui-slider-range,
.woocommerce .ui-slider .ui-slider-handle { background: var(--wd-accent) !important; }

/* focus rings site-wide use the brand accent, never a browser default blue */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wd-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   BASE
   ----------------------------------------------------------------------- */
body,
body.woocommerce,
.eclat-header,
.eclat-footer {
	font-family: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: var(--wd-text);
	background: var(--wd-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.product_title,
.woocommerce-loop-product__title {
	font-family: "Cairo", "Segoe UI", system-ui, sans-serif;
	color: var(--wd-head);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

a {
	color: var(--wd-head);
	text-decoration: none;
	transition: color 0.18s ease;
}

a:hover {
	color: var(--wd-accent);
}

img {
	max-width: 100%;
	height: auto;
}

.eclat-wrap {
	max-width: var(--wd-max);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
}

/* --------------------------------------------------------------------------
   FULL-WIDTH LAYOUT (Phase 2)
   --------------------------------------------------------------------------
   Our containers now resolve to 100% (see --wd-max), but everything the theme
   renders still sits inside The7's `#main > .wf-wrap > .wf-container-main`, and
   `.wf-wrap` carries a hard `padding: 0 44px`. That padding is what kept the
   page off the viewport edge, so it is removed here and the gutter becomes the
   single source of inner padding.

   A page built from our own section shortcodes already carries that gutter on
   `.eclat-wrap` / `.eclat-shop__wrap`, so `.wf-container-main` must NOT add a
   second one there. Anything else — cart, checkout, my account, a post, a
   search page — has no container of ours and does need it. `:has()` makes that
   distinction structurally; where it is unsupported the page simply keeps a
   little extra side padding, which is a cosmetic difference and not a break.
   ----------------------------------------------------------------------- */
#main > .wf-wrap {
	max-width: 100%;
	padding-inline: 0;
}

#main > .wf-wrap > .wf-container-main {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding-inline: var(--wd-gutter);
}

/* Matched on descendants, not children: the shop archive is a direct child of
   `.wf-container-main` but a shortcode-composed page is wrapped in The7's
   `#content` first, so a child combinator would have caught one and missed the
   other — and missing it is what would double the gutter. */
.wf-container-main:has(.eclat-sec),
.wf-container-main:has(.eclat-shop),
.wf-container-main:has(.eclat-hero),
.wf-container-main:has(.eclat-bands),
.wf-container-main:has(.eclat-showcase) {
	padding-inline: 0;
}

/* --------------------------------------------------------------------------
   The same thing again, driven by a body class instead of `:has()`.
   --------------------------------------------------------------------------
   `:has()` works in every current browser, but it is a single point of failure
   for the whole full-width layout: where it is unsupported the selector above
   is dropped, `.wf-container-main` keeps its gutter, our own wrapper adds a
   second one, and the shop reads as inset rather than edge to edge. The
   `eclat-fullbleed` body class is set in inc/woo-pages.php from the template
   itself and cannot fail; the rules above stay as a backstop for anything the
   flag does not cover.
   ----------------------------------------------------------------------- */
.eclat-fullbleed .wf-container-main {
	padding-inline: 0;
	max-width: 100%;
	width: 100%;
}

/* The7 lays `.wf-container-main` out as a two-column grid whenever `#main` is
   not `.sidebar-none`, and pins `.content` into the narrow track. Our templates
   force `sidebar-none` in PHP; this is the belt to that braces, so a stray
   layout class can never squeeze the blog grid again. */
.eclat-fullbleed #main .wf-container-main {
	display: block;
	grid-template-areas: none;
	grid-template-columns: none;
}

.eclat-fullbleed #content.content,
.eclat-fullbleed .wf-container-main > .content {
	width: 100%;
	max-width: 100%;
	float: none;
	margin-inline: 0;
}

/* Section rhythm — the single most important Woodmart trait */
.eclat-sec {
	padding-block: var(--wd-sec);
}

.eclat-sec--alt {
	background: var(--wd-alt);
}

.eclat-sec--tight {
	padding-block: calc(var(--wd-sec) * 0.62);
}

/* Centred section heading: micro-label, title, short rule */
.eclat-sechead {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 46px;
}

.eclat-sechead__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--wd-accent);
	margin-bottom: 12px;
}

.eclat-sechead__title {
	font-size: 30px;
	font-weight: 600;
	color: var(--wd-head);
	margin: 0 0 14px;
	line-height: 1.25;
}

.eclat-sechead__sub {
	font-size: 14.5px;
	color: var(--wd-text);
	margin: 0;
	line-height: 1.8;
}

.eclat-sechead__rule {
	width: 46px;
	height: 2px;
	background: var(--wd-accent);
	margin: 16px auto 0;
	border: 0;
}

@media (max-width: 767px) {
	.eclat-sechead {
		margin-bottom: 32px;
	}

	.eclat-sechead__title {
		font-size: 24px;
	}
}

/* --------------------------------------------------------------------------
   BUTTONS — uppercase, tight, small radius
   ----------------------------------------------------------------------- */
.eclat-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce div.product form.cart .button,
.wpcf7 input[type="submit"],
.eclat-drawer__body .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--wd-head);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	line-height: 1;
	padding: 15px 32px;
	border: 1px solid var(--wd-head);
	border-radius: var(--wd-radius);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.eclat-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wpcf7 input[type="submit"]:hover {
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}

.eclat-btn--accent,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce #respond input#submit.alt,
.woocommerce input.button.alt {
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}

.eclat-btn--accent:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.woocommerce input.button.alt:hover {
	background: var(--wd-accent-dk);
	border-color: var(--wd-accent-dk);
	color: #fff;
}

.eclat-btn--ghost {
	background: transparent;
	color: var(--wd-head);
	border-color: var(--wd-line);
}

.eclat-btn--ghost:hover {
	background: var(--wd-head);
	border-color: var(--wd-head);
	color: #fff;
}

.eclat-btn--light {
	background: #fff;
	color: var(--wd-head);
	border-color: #fff;
}

.eclat-btn--light:hover {
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}

/* ==========================================================================
   HEADER — three tiers, measured from the Woodmart demo
   tier 1  42px   accent background, white text
   tier 2  106px  white, logo | search 619x46 | icons
   tier 3  53px   white, hairline top, browse-categories | nav
   ========================================================================== */
.eclat-header {
	position: relative;
	z-index: 500;
	background: #fff;
}

.eclat-hd-wrap {
	max-width: var(--wd-max);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
	display: flex;
	align-items: center;
	gap: 20px;
	height: 100%;
}

/* --- tier 1 ------------------------------------------------------------ */
.eclat-hd-top {
	height: 42px;
	background: var(--wd-accent);
	color: #fff;
	font-size: 13px;
}

.eclat-hd-top .eclat-hd-wrap { justify-content: space-between; }
.eclat-hd-top__left,
.eclat-hd-top__right { display: flex; align-items: center; gap: 22px; }

.eclat-hd-meta { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.eclat-hd-top a { color: #fff; }
.eclat-hd-top a:hover { color: rgba(255, 255, 255, 0.75); }
.eclat-hd-top svg { color: rgba(255, 255, 255, 0.92); }

.eclat-hd-lang {
	display: flex;
	align-items: center;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1;
}

.eclat-hd-lang li { display: inline-flex; align-items: center; margin: 0; }
.eclat-hd-lang a { font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.eclat-hd-lang img { display: none; }
.eclat-hd-lang .current-lang a { font-weight: 700; text-decoration: underline; }

.eclat-hd-social { display: inline-flex; gap: 10px; }
.eclat-hd-social a { display: inline-flex; align-items: center; }
.eclat-hd-social--top a { opacity: 0.9; }
.eclat-hd-social--top a:hover { opacity: 1; }

/* --- tier 2 ------------------------------------------------------------ */
.eclat-hd-main { height: 106px; background: #fff; }
.eclat-hd-main .eclat-hd-wrap { gap: 30px; }

.eclat-hd-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.eclat-hd-logo img { max-height: 52px; width: auto; display: block; }

.eclat-hd-logo__text {
	font-family: var(--wd-font-head);
	font-size: 22px;
	font-weight: 700;
	color: var(--wd-dark);
	letter-spacing: 0.02em;
}

/* search: 619 x 46, category select 172 wide, submit 46 square */
.eclat-hd-search {
	flex: 1 1 auto;
	max-width: 619px;
	height: 46px;
	display: flex;
	align-items: stretch;
	border: 2px solid var(--wd-dark);
	background: #fff;
}

.eclat-hd-search__cat {
	flex: 0 0 172px;
	border: 0;
	border-inline-end: 1px solid var(--wd-line);
	background: #fff;
	padding: 0 12px;
	font-family: inherit;
	font-size: 13px;
	color: var(--wd-text);
	cursor: pointer;
	appearance: none;
}

.eclat-hd-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 0 15px;
	font-family: inherit;
	font-size: 14px;
	color: var(--wd-head);
	background: transparent;
}

.eclat-hd-search input[type="search"]:focus { outline: none; }

.eclat-hd-search button {
	flex: 0 0 46px;
	width: 46px;
	border: 0;
	background: var(--wd-dark);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.eclat-hd-search button:hover { background: var(--wd-accent); }

.eclat-hd-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; }

.eclat-hd-act {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wd-head);
	font-size: 13px;
}

.eclat-hd-act:hover { color: var(--wd-accent); }
.eclat-hd-act__label { white-space: nowrap; }

.eclat-hd-cart__icon { position: relative; display: inline-flex; }

.eclat-hd-cart__count {
	position: absolute;
	top: -6px;
	inset-inline-end: -8px;
	min-width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--wd-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.eclat-hd-burger {
	display: none;
	background: none;
	border: 0;
	padding: 4px;
	color: var(--wd-dark);
	cursor: pointer;
}

/* --- tier 3 ------------------------------------------------------------ */
.eclat-hd-nav {
	height: 53px;
	background: #fff;
	border-top: 1px solid var(--wd-line);
	border-bottom: 1px solid var(--wd-line);
}

.eclat-hd-nav .eclat-hd-wrap { gap: 0; }

/* browse-categories block, 270px so it lines up with the hero sidebar */
.eclat-hd-browse { position: relative; flex: 0 0 270px; align-self: stretch; }

.eclat-hd-browse__btn {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px;
	background: var(--wd-accent);
	border: 0;
	color: #fff;
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.eclat-hd-browse__btn:hover { background: var(--wd-accent-dk); }
.eclat-hd-browse__btn > span { flex: 1 1 auto; text-align: start; }

.eclat-hd-browse__list {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	z-index: 600;
	width: 270px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--wd-line);
	border-top: 0;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
	display: none;
}

.eclat-hd-browse.is-open .eclat-hd-browse__list { display: block; }
.eclat-hd-browse__list li + li { border-top: 1px solid var(--wd-line); }

.eclat-hd-browse__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	font-size: 14px;
	color: var(--wd-text);
}

.eclat-hd-browse__list a:hover { color: var(--wd-accent); background: var(--wd-alt); }

.eclat-hd-browse__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wd-accent);
	opacity: 0.65;
	flex: 0 0 auto;
}

.eclat-hd-browse__n { margin-inline-start: auto; font-size: 12px; color: var(--wd-soft); }

/* nav links: 13px / 700 / uppercase */
.eclat-hd-menu { flex: 1 1 auto; margin-inline-start: 30px; }

.eclat-hd-menu__list {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eclat-hd-menu__list > li > a {
	display: inline-flex;
	align-items: center;
	height: 53px;
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--wd-dark);
	transition: color 0.2s ease;
}

.eclat-hd-menu__list > li > a:hover,
.eclat-hd-menu__list > li.current-menu-item > a { color: var(--wd-accent); }

/* submenus */
.eclat-hd-menu__list li { position: relative; }

.eclat-hd-menu__list .sub-menu {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	z-index: 600;
	min-width: 210px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--wd-line);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.eclat-hd-menu__list li:hover > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.eclat-hd-menu__list .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 13.5px;
	color: var(--wd-text);
}

.eclat-hd-menu__list .sub-menu a:hover { color: var(--wd-accent); background: var(--wd-alt); }

.eclat-hd-nav__right { flex: 0 0 auto; margin-inline-start: auto; }

.eclat-hd-help {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wd-accent);
}

.eclat-hd-help:hover { color: var(--wd-accent-dk); }

/* sticky nav tier */
.eclat-header.is-stuck .eclat-hd-nav {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 900;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.admin-bar .eclat-header.is-stuck .eclat-hd-nav { top: 32px; }

/* --- mobile drawer ------------------------------------------------------ */
.eclat-hd-mobile-overlay {
	position: fixed;
	inset: 0;
	z-index: 990;
	background: rgba(0, 0, 0, 0.45);
}

.eclat-hd-mobile {
	position: fixed;
	top: 0;
	inset-inline-start: 0;
	z-index: 995;
	width: min(330px, 86vw);
	height: 100%;
	background: #fff;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
}

.eclat-hd-mobile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wd-dark);
}

.eclat-hd-mobile__head button { background: none; border: 0; color: var(--wd-head); cursor: pointer; }

.eclat-hd-mobile__list { list-style: none; margin: 0; padding: 0; }
.eclat-hd-mobile__list li { border-bottom: 1px solid var(--wd-line); }

.eclat-hd-mobile__list a {
	display: block;
	padding: 14px 20px;
	font-family: var(--wd-font-head);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wd-dark);
}

.eclat-hd-mobile__cats { padding: 10px 0; border-bottom: 1px solid var(--wd-line); }
.eclat-hd-mobile__cats a { display: block; padding: 10px 20px; font-size: 14px; color: var(--wd-text); }
.eclat-hd-mobile__cats a:hover { color: var(--wd-accent); }

.eclat-hd-mobile__foot { margin-top: auto; padding: 20px; display: grid; gap: 12px; justify-items: start; }
.eclat-hd-mobile__foot .eclat-btn { width: 100%; justify-content: center; }
.eclat-hd-mobile__foot .eclat-hd-social a { color: var(--wd-head); }

body.eclat-menu-open { overflow: hidden; }

/* [hidden] must win over any display we set — this was the click-blocker bug */
.eclat-hd-mobile[hidden],
.eclat-hd-mobile-overlay[hidden] { display: none !important; }

/* --- header responsive -------------------------------------------------- */
@media (max-width: 1100px) {
	.eclat-hd-search__cat { display: none; }
	.eclat-hd-menu__list { gap: 18px; }
}

@media (max-width: 991px) {
	.eclat-hd-nav { display: none; }
	.eclat-hd-burger { display: inline-flex; }
	.eclat-hd-act__label { display: none; }
	.eclat-hd-main { height: 84px; }
	.eclat-hd-main .eclat-hd-wrap { gap: 16px; }
	.eclat-hd-logo img { max-height: 42px; }
}

@media (max-width: 767px) {
	.eclat-hd-meta--hide-sm { display: none; }
	.eclat-hd-social--top { display: none; }
	.eclat-hd-top { font-size: 12px; }
}

@media (max-width: 600px) {
	.eclat-hd-main { height: auto; padding: 12px 0; }
	.eclat-hd-main .eclat-hd-wrap { flex-wrap: wrap; }
	.eclat-hd-search { order: 3; flex: 1 0 100%; max-width: none; height: 42px; }
	.eclat-hd-actions { margin-inline-start: auto; }
}

/* ==========================================================================
   FOOTER — five columns + bottom bar
   The demo's own footer is light (white, #767676 text). This one is dark by
   request: swap the two tokens below to go back to light.
   ========================================================================== */
:root {
	--wd-foot-bg:     #232323;
	--wd-foot-bg-2:   #1B1B1B;
	--wd-foot-text:   #A6A6A6;
	--wd-foot-head:   #FFFFFF;
	--wd-foot-line:   rgba(255, 255, 255, 0.10);
}

.eclat-footer {
	background: var(--wd-foot-bg);
	color: var(--wd-foot-text);
	font-size: 14px;
	margin-top: auto;
}

.eclat-ft-wrap {
	max-width: var(--wd-max);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
}

.eclat-ft-main { padding-block: 58px 46px; }

.eclat-ft-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
	gap: 34px;
}

.eclat-ft-title {
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wd-foot-head);
	margin: 0 0 20px;
}

.eclat-ft-links { list-style: none; margin: 0; padding: 0; }
.eclat-ft-links li { margin-bottom: 11px; }
.eclat-ft-links a,
.eclat-ft-links span { font-size: 14px; color: var(--wd-foot-text); }
.eclat-ft-links a:hover { color: var(--wd-accent); }

.eclat-ft-logo { display: inline-block; margin-bottom: 18px; }
.eclat-ft-logo img { max-height: 46px; width: auto; filter: brightness(0) invert(1); opacity: 0.95; }

.eclat-ft-logo__text {
	font-family: var(--wd-font-head);
	font-size: 20px;
	font-weight: 700;
	color: var(--wd-foot-head);
}

.eclat-ft-about { font-size: 14px; line-height: 1.75; margin: 0 0 20px; max-width: 34ch; }

.eclat-ft-follow {
	display: block;
	font-family: var(--wd-font-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wd-foot-head);
	margin-bottom: 12px;
}

.eclat-ft-social { display: flex; gap: 10px; }

.eclat-ft-social a {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wd-foot-line);
	color: var(--wd-foot-text);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.eclat-ft-social a:hover { background: var(--wd-accent); border-color: var(--wd-accent); color: #fff; }

.eclat-ft-address { font-style: normal; font-size: 14px; line-height: 1.75; margin: 0 0 12px; }
.eclat-ft-phone { margin: 0 0 8px; }
.eclat-ft-phone a { font-size: 16px; font-weight: 700; color: var(--wd-foot-head); }
.eclat-ft-phone a:hover { color: var(--wd-accent); }
.eclat-ft-wa { margin: 0 0 12px; }
.eclat-ft-wa a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--wd-foot-text); }
.eclat-ft-wa a:hover { color: var(--wd-accent); }
.eclat-ft-hours { font-size: 13.5px; margin: 0; color: var(--wd-foot-text); }

/* bottom bar — 65px, 20px vertical padding */
.eclat-ft-bottom {
	background: var(--wd-foot-bg-2);
	border-top: 1px solid var(--wd-foot-line);
	padding-block: 20px;
}

.eclat-ft-bottom__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.eclat-ft-copy { margin: 0; font-size: 13px; color: var(--wd-foot-text); }
.eclat-ft-copy a { color: var(--wd-foot-head); }
.eclat-ft-copy a:hover { color: var(--wd-accent); }

.eclat-ft-pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.eclat-ft-pay__label {
	font-size: 11px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wd-foot-text);
	margin-inline-end: 4px;
}

.eclat-ft-pay__chip {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border: 1px solid var(--wd-foot-line);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--wd-foot-text);
	white-space: nowrap;
}

@media (max-width: 1100px) {
	.eclat-ft-grid { grid-template-columns: 1.4fr 1fr 1fr; }
	.eclat-ft-col--contact { grid-column: span 3; }
}

@media (max-width: 700px) {
	.eclat-ft-grid { grid-template-columns: 1fr; gap: 30px; }
	.eclat-ft-col--contact { grid-column: auto; }
	.eclat-ft-main { padding-block: 42px 32px; }
	.eclat-ft-bottom__inner { justify-content: center; text-align: center; }
	.eclat-ft-about { max-width: none; }
}

/* the footer must sit at the bottom even on short pages */
#page { display: flex; flex-direction: column; min-height: 100vh; }
#main { flex: 1 0 auto; }

/* ==========================================================================
   PHASE 0 — categories menu is a dropdown, never a static block
   --------------------------------------------------------------------------
   The header control was already a real dropdown after the previous round. The
   block that kept reading as "permanently open" was a SECOND copy of the same
   list: `.eclat-hero__side`, the hero's static departments column, sitting
   directly under the header's Browse button on the front page. It is no longer
   rendered (see inc/home-sections.php), and these rules make sure nothing can
   bring it back and that the hero row reflows to full width without it.
   ========================================================================== */

/* belt to the PHP braces — if any cached markup still carries the column, it
   must not paint. The categories live in the header dropdown only. */
.eclat-hero__side { display: none !important; }

/* the slider now owns the whole hero row at every width */
.eclat-hero__wrap {
	grid-template-columns: minmax(0, 1fr) !important;
}

.eclat-hero__stage {
	border-inline-start: 0;
	width: 100%;
	min-width: 0;
}

/* ==========================================================================
   Dropdown behaviour and RTL alignment
   --------------------------------------------------------------------------
   Collapsed by default; opens on hover on a pointer device and on click
   everywhere (the click path is the JS in inc/header-builder.php, which
   toggles `.is-open`). Positioning is written in logical properties, so the
   panel hangs from the inline-start edge of the button — the left edge in
   French and English, the right edge in Arabic — with no direction-specific
   rule needed.
   ========================================================================== */
.eclat-hd-browse__list {
	display: none;
	inset-inline-start: 0;
	inset-inline-end: auto;
}

.eclat-hd-browse.is-open > .eclat-hd-browse__list { display: block; }

/* hover opens it on a pointer device; touch devices use the click handler and
   are excluded so a tap does not open and immediately re-close the panel */
@media (hover: hover) and (pointer: fine) {
	.eclat-hd-browse:hover > .eclat-hd-browse__list { display: block; }
}

/* the chevron reflects state in both directions */
.eclat-hd-browse__btn > svg:last-child {
	margin-inline-start: auto;
	transition: transform 0.2s ease;
}

.eclat-hd-browse.is-open .eclat-hd-browse__btn > svg:last-child { transform: rotate(180deg); }

/* RTL: the row contents and the count badge follow the text direction. These
   are already logical properties elsewhere; stated here so the dropdown's
   alignment is guaranteed by this file rather than inherited by luck. */
[dir="rtl"] .eclat-hd-browse__list { text-align: right; }
[dir="rtl"] .eclat-hd-browse__list a { flex-direction: row; }
[dir="rtl"] .eclat-hd-browse__n { margin-inline-start: auto; margin-inline-end: 0; }

/* the panel must never be clipped by the nav tier it hangs from */
.eclat-hd-nav { overflow: visible; }
.eclat-hd-nav .eclat-hd-wrap { overflow: visible; }