/* ==========================================================================
   ÉCLAT STORE — home & landing sections
   Rebuilt against the measured Woodmart blueprint (reference/woodmart-spec.md,
   data/blueprint/home.json, data/screens/target-home.png).

   Every value below comes from a computed style read off the demo or a
   measurement taken from the screenshot — not from memory. The one deliberate
   substitution is the accent: Woodmart's #83B735 green becomes our #AE6F4D.

   Woodmart traits reproduced:
     · 1222px container, 15px side padding
     · square corners everywhere (radius 0)
     · centred section blocks: grey eyebrow → UPPERCASE title → grey subtitle
     · no divider rules under titles
     · product cards centred, title above category above price
     · circular badges, top-left
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION SHELL
   ----------------------------------------------------------------------- */
.eclat-sec { padding-block: var(--wd-sec); }

.eclat-sec--alt   { background: var(--wd-alt); }
.eclat-sec--tight { padding-block: calc(var(--wd-sec) * 0.55); }
.eclat-sec--flush { padding-block: 0; }

/* full-bleed sections opt out of the container */
.eclat-sec--bleed { padding-block: 0; }
.eclat-sec--bleed > .eclat-wrap { max-width: none; padding-inline: 0; }

/* section title block — eyebrow, uppercase title, subtitle, no rule */
.eclat-sechead {
	text-align: center;
	margin-bottom: 40px;
}

.eclat-sechead__label {
	display: block;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wd-soft);
	margin-bottom: 6px;
}

.eclat-sechead__title {
	margin: 0;
	font-family: var(--wd-font-head);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--wd-dark);
}

.eclat-sechead__sub {
	max-width: 62ch;
	margin: 8px auto 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wd-text);
}

/* the rule is gone on the demo; keep the element harmless if markup emits it */
.eclat-sechead__rule { display: none; }

.eclat-sechead--start { text-align: start; }
.eclat-sechead--start .eclat-sechead__sub { margin-inline-start: 0; }

@media (max-width: 768px) {
	.eclat-sechead { margin-bottom: 28px; }
	.eclat-sechead__title { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   1. HERO — category sidebar + slider
   ----------------------------------------------------------------------- */
.eclat-hero {
	background: #fff;
	border-bottom: 1px solid var(--wd-line);
}

.eclat-hero__wrap {
	max-width: var(--wd-max);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
	display: grid;
	grid-template-columns: 267px 1fr;
	gap: 0;
	align-items: stretch;
}

/* departments sidebar */
.eclat-hero__side {
	border: 1px solid var(--wd-line);
	border-top: 0;
	background: #fff;
	padding: 0;
	margin: 0;
	list-style: none;
}

.eclat-hero__side li + li { border-top: 1px solid var(--wd-line); }

.eclat-hero__side a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	font-size: 14px;
	color: var(--wd-text);
	transition: color 0.2s ease, background 0.2s ease;
}

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

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

.eclat-hero__side-more {
	display: block;
	padding: 11px 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-accent);
	border-top: 1px solid var(--wd-line);
}

/* slider */
.eclat-hero__stage {
	position: relative;
	background: var(--wd-alt-2);
	overflow: hidden;
}

.eclat-hero__track { position: relative; min-height: 440px; }

.eclat-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}

.eclat-hero__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.eclat-hero__inner {
	min-height: 440px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 20px;
	padding: 40px 46px;
}

.eclat-hero__copy { max-width: 420px; }

.eclat-hero__slide.is-active .eclat-hero__copy > * {
	animation: eclat-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.eclat-hero__slide.is-active .eclat-hero__copy > *:nth-child(2) { animation-delay: 0.08s; }
.eclat-hero__slide.is-active .eclat-hero__copy > *:nth-child(3) { animation-delay: 0.16s; }
.eclat-hero__slide.is-active .eclat-hero__copy > *:nth-child(4) { animation-delay: 0.24s; }

@keyframes eclat-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.eclat-hero__slide.is-active .eclat-hero__copy > * { animation: none; }
}

.eclat-hero__title {
	font-family: var(--wd-font-head);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wd-dark);
	margin: 0 0 14px;
}

.eclat-hero__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wd-text);
	margin: 0 0 20px;
	max-width: 40ch;
}

.eclat-hero__price {
	font-family: var(--wd-font-head);
	font-size: 26px;
	font-weight: 600;
	color: var(--wd-accent);
	margin-bottom: 22px;
}

.eclat-hero__price del { color: var(--wd-soft); font-size: 17px; font-weight: 400; margin-inline-end: 8px; }
.eclat-hero__price ins { text-decoration: none; background: none; }

.eclat-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

.eclat-hero__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.eclat-hero__media img {
	max-height: 340px;
	width: auto;
	mix-blend-mode: multiply;
}

.eclat-hero__dots {
	position: absolute;
	inset-inline: 0;
	bottom: 18px;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 7px;
}

.eclat-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wd-line);
	cursor: pointer;
	transition: background 0.2s ease;
}

.eclat-hero__dot.is-active { background: var(--wd-accent); }

.eclat-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--wd-soft);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease, color 0.2s ease;
}

.eclat-hero__stage:hover .eclat-hero__nav { opacity: 1; }
.eclat-hero__nav:hover { color: var(--wd-dark); }
.eclat-hero__nav--prev { inset-inline-start: 6px; }
.eclat-hero__nav--next { inset-inline-end: 6px; }
[dir="rtl"] .eclat-hero__nav svg { transform: scaleX(-1); }

@media (max-width: 1024px) {
	.eclat-hero__wrap { grid-template-columns: 1fr; }
	.eclat-hero__side { display: none; }
}

@media (max-width: 860px) {
	.eclat-hero__track, .eclat-hero__inner { min-height: 0; }
	.eclat-hero__inner { grid-template-columns: 1fr; text-align: center; padding: 34px 22px 44px; }
	.eclat-hero__copy { max-width: none; margin-inline: auto; }
	.eclat-hero__text { margin-inline: auto; }
	.eclat-hero__cta { justify-content: center; }
	.eclat-hero__media { order: -1; margin-bottom: 18px; }
	.eclat-hero__media img { max-height: 220px; }
	.eclat-hero__title { font-size: 29px; }
	.eclat-hero__nav { display: none; }
}

/* --------------------------------------------------------------------------
   2. FEATURED CATEGORIES — mosaic, 1 large + 4 small, caption overlaid
   ----------------------------------------------------------------------- */
.eclat-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 186px;
	gap: 20px;
}

.eclat-cat {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--wd-alt);
}

.eclat-cat:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.eclat-cat__img {
	position: absolute;
	inset: 0;
	display: block;
}

.eclat-cat__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) {
	.eclat-cat:hover .eclat-cat__img img { transform: scale(1.06); }
}

.eclat-cat__cap {
	position: absolute;
	inset-inline-start: 22px;
	bottom: 18px;
	z-index: 2;
}

.eclat-cat__name {
	display: block;
	font-family: var(--wd-font-head);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--wd-dark);
	margin-bottom: 2px;
	transition: color 0.2s ease;
}

.eclat-cat:hover .eclat-cat__name { color: var(--wd-accent); }

.eclat-cat__count {
	display: block;
	font-size: 13px;
	color: var(--wd-soft);
}

@media (max-width: 900px) {
	.eclat-cats { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
	.eclat-cat:first-child { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 480px) {
	.eclat-cats { grid-template-columns: 1fr; }
	.eclat-cat:first-child { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   3. PRODUCT TABS
   ----------------------------------------------------------------------- */
.eclat-tabs {
	display: flex;
	justify-content: center;
	gap: 26px;
	margin: -22px 0 32px;
	flex-wrap: wrap;
}

.eclat-tab {
	background: none;
	border: 0;
	padding: 4px 0;
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-soft);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.eclat-tab:hover { color: var(--wd-dark); }

.eclat-tab.is-active {
	color: var(--wd-dark);
	border-bottom-color: var(--wd-dark);
}

.eclat-tabpane { display: none; }
.eclat-tabpane.is-active { display: block; }

/* --------------------------------------------------------------------------
   6. SHOWCASE — full-width accent carousel
   ----------------------------------------------------------------------- */
.eclat-showcase {
	position: relative;
	background: var(--wd-accent);
	overflow: hidden;
}

.eclat-showcase__track { position: relative; min-height: 420px; }

.eclat-showcase__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}

.eclat-showcase__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.eclat-showcase__inner {
	max-width: var(--wd-max);
	margin-inline: auto;
	padding: 54px var(--wd-gutter);
	min-height: 420px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
}

.eclat-showcase__media { display: flex; align-items: center; justify-content: center; }
.eclat-showcase__media img { max-height: 300px; width: auto; }

.eclat-showcase__label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 12px;
}

.eclat-showcase__title {
	font-family: var(--wd-font-head);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 24px;
}

.eclat-showcase__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 24px;
}

.eclat-showcase__meta dt {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 5px;
}

.eclat-showcase__meta dd {
	margin: 0;
	font-size: 13.5px;
	font-style: italic;
	color: #fff;
}

.eclat-showcase__buy { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.eclat-showcase__price {
	font-family: var(--wd-font-head);
	font-size: 30px;
	font-weight: 600;
	color: #fff;
}

.eclat-showcase__price del { opacity: 0.6; font-size: 19px; font-weight: 400; margin-inline-end: 8px; }
.eclat-showcase__price ins { text-decoration: none; background: none; }
.eclat-showcase__price .woocommerce-Price-amount { color: #fff; }

.eclat-showcase__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	background: transparent;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}

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

.eclat-showcase__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	transition: color 0.2s ease;
}

.eclat-showcase__nav:hover { color: #fff; }
.eclat-showcase__nav--prev { inset-inline-start: 10px; }
.eclat-showcase__nav--next { inset-inline-end: 10px; }
[dir="rtl"] .eclat-showcase__nav svg { transform: scaleX(-1); }

.eclat-showcase__dots {
	position: absolute;
	inset-inline: 0;
	bottom: 18px;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 7px;
}

.eclat-showcase__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.eclat-showcase__dot.is-active { background: #fff; }

@media (max-width: 860px) {
	.eclat-showcase__track, .eclat-showcase__inner { min-height: 0; }
	.eclat-showcase__inner { grid-template-columns: 1fr; text-align: center; padding: 40px 22px 46px; }
	.eclat-showcase__media { order: -1; }
	.eclat-showcase__media img { max-height: 200px; }
	.eclat-showcase__title { font-size: 27px; }
	.eclat-showcase__meta, .eclat-showcase__buy { justify-content: center; }
	.eclat-showcase__nav { display: none; }
}

/* --------------------------------------------------------------------------
   7. ABOUT STRIP
   ----------------------------------------------------------------------- */
.eclat-strip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 50px;
}

.eclat-strip__label {
	display: block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wd-soft);
	margin-bottom: 6px;
}

.eclat-strip__title {
	font-family: var(--wd-font-head);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wd-dark);
	margin: 0 0 14px;
}

.eclat-strip__text { font-size: 15px; line-height: 1.6; color: var(--wd-text); margin: 0 0 22px; }
.eclat-strip__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.eclat-strip__media { display: flex; align-items: center; justify-content: center; }
.eclat-strip__media img { max-height: 300px; width: auto; mix-blend-mode: multiply; }

@media (max-width: 860px) {
	.eclat-strip { grid-template-columns: 1fr; gap: 26px; text-align: center; }
	.eclat-strip__cta { justify-content: center; }
	.eclat-strip__media { order: -1; }
}

/* --------------------------------------------------------------------------
   8. NEWSLETTER
   ----------------------------------------------------------------------- */
.eclat-news { text-align: center; max-width: 560px; margin-inline: auto; }

.eclat-news__title {
	font-family: var(--wd-font-head);
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wd-dark);
	margin: 0 0 22px;
}

.eclat-news__form { display: flex; gap: 0; justify-content: center; flex-wrap: wrap; }

.eclat-news__input {
	flex: 1 1 300px;
	max-width: 330px;
	padding: 12px 16px;
	border: 1px solid var(--wd-line);
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	color: var(--wd-head);
	background: #fff;
}

.eclat-news__input:focus { outline: none; border-color: var(--wd-accent); }

.eclat-news__note { font-size: 13px; color: var(--wd-text); margin: 14px 0 0; }
.eclat-news__note a { color: var(--wd-dark); font-weight: 600; }
.eclat-news__note a:hover { color: var(--wd-accent); }

/* --------------------------------------------------------------------------
   9. LATEST NEWS — 3 columns
   ----------------------------------------------------------------------- */
.eclat-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.eclat-postcard {
	background: #fff;
	border: 1px solid var(--wd-line);
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease;
}

@media (hover: hover) {
	.eclat-postcard:hover { box-shadow: 0 6px 26px rgba(0, 0, 0, 0.08); }
	.eclat-postcard:hover .eclat-postcard__img img { transform: scale(1.05); }
}

.eclat-postcard__img {
	position: relative;
	display: block;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: var(--wd-alt);
}

.eclat-postcard__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* date chip, top-left on the image */
.eclat-postcard__date {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	z-index: 2;
	background: #fff;
	padding: 7px 10px;
	text-align: center;
	line-height: 1.1;
}

.eclat-postcard__day { display: block; font-size: 15px; font-weight: 600; color: var(--wd-dark); }
.eclat-postcard__mon { display: block; font-size: 10px; text-transform: uppercase; color: var(--wd-soft); }

/* category tag, bottom of the image */
.eclat-postcard__tag {
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	z-index: 2;
	background: var(--wd-accent);
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 5px 12px;
}

.eclat-postcard__body { padding: 20px; display: flex; flex-direction: column; flex: 1; text-align: center; }

.eclat-postcard__title {
	font-family: var(--wd-font-head);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 8px;
}

.eclat-postcard__title a { color: var(--wd-dark); }
.eclat-postcard__title a:hover { color: var(--wd-accent); }

.eclat-postcard__by { font-size: 13px; color: var(--wd-soft); margin: 0 0 12px; }
.eclat-postcard__by strong { color: var(--wd-text); font-weight: 600; }

.eclat-postcard__excerpt { font-size: 14px; line-height: 1.6; color: var(--wd-text); margin: 0 0 16px; }

.eclat-postcard__more {
	margin-top: auto;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-accent);
}

@media (max-width: 900px) { .eclat-posts { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   10. BRAND LOGOS
   ----------------------------------------------------------------------- */
.eclat-brands {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: center;
	gap: 10px;
}

.eclat-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 74px;
	padding: 10px;
	text-align: center;
	color: #C9C9C9;
	font-family: var(--wd-font-head);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.5px;
	transition: color 0.25s ease;
}

.eclat-brand:hover { color: var(--wd-accent); }
.eclat-brand__name { display: block; line-height: 1.15; }

.eclat-brand__kind {
	display: block;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	margin-top: 4px;
	opacity: 0.8;
}

@media (max-width: 900px) { .eclat-brands { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .eclat-brands { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   USP ROW
   ----------------------------------------------------------------------- */
.eclat-usp {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--wd-line);
	background: #fff;
}

.eclat-usp__item { display: flex; align-items: center; gap: 14px; padding: 26px 22px; }
.eclat-usp__item + .eclat-usp__item { border-inline-start: 1px solid var(--wd-line); }
.eclat-usp__item svg { color: var(--wd-accent); flex: 0 0 auto; }

.eclat-usp__t {
	display: block;
	font-family: var(--wd-font-head);
	font-size: 13.5px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wd-dark);
}

.eclat-usp__d { display: block; font-size: 13px; color: var(--wd-soft); margin-top: 2px; }

@media (max-width: 900px) {
	.eclat-usp { grid-template-columns: 1fr 1fr; }
	.eclat-usp__item:nth-child(3) { border-inline-start: 0; }
	.eclat-usp__item:nth-child(n + 3) { border-top: 1px solid var(--wd-line); }
}

@media (max-width: 520px) {
	.eclat-usp { grid-template-columns: 1fr; }
	.eclat-usp__item + .eclat-usp__item { border-inline-start: 0; border-top: 1px solid var(--wd-line); }
}

/* --------------------------------------------------------------------------
   PROMO BANNERS
   ----------------------------------------------------------------------- */
.eclat-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.eclat-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 230px;
	padding: 36px;
	background: var(--wd-alt);
	overflow: hidden;
}

.eclat-banner--accent { background: #F3EAE2; }
.eclat-banner__body { position: relative; z-index: 2; max-width: 62%; }

.eclat-banner__label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wd-soft);
	margin-bottom: 8px;
}

.eclat-banner__title {
	font-family: var(--wd-font-head);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wd-dark);
	margin: 0 0 10px;
}

.eclat-banner__text { font-size: 14px; color: var(--wd-text); margin: 0 0 16px; }

.eclat-banner__link {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--wd-dark);
	border-bottom: 1px solid var(--wd-dark);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.eclat-banner__link:hover { color: var(--wd-accent); border-color: var(--wd-accent); }

.eclat-banner__img {
	position: absolute;
	inset-inline-end: -16px;
	bottom: -10px;
	width: 44%;
	display: flex;
	justify-content: flex-end;
	z-index: 1;
}

.eclat-banner__img img {
	max-height: 220px;
	width: auto;
	mix-blend-mode: multiply;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) { .eclat-banner:hover .eclat-banner__img img { transform: scale(1.05); } }

@media (max-width: 900px) {
	.eclat-banners { grid-template-columns: 1fr; }
	.eclat-banner { padding: 28px; min-height: 200px; }
}

@media (max-width: 480px) {
	.eclat-banner__body { max-width: 100%; }
	.eclat-banner__img { opacity: 0.16; }
}

/* --------------------------------------------------------------------------
   TESTIMONIALS
   ----------------------------------------------------------------------- */
.eclat-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.eclat-quote {
	background: #fff;
	border: 1px solid var(--wd-line);
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.eclat-quote__stars { color: var(--wd-gold); font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; }
.eclat-quote__text { font-size: 14.5px; line-height: 1.7; color: var(--wd-text); margin: 0 0 18px; flex: 1; }
.eclat-quote__who { display: flex; align-items: center; justify-content: center; gap: 10px; }

.eclat-quote__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wd-alt);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--wd-accent);
	flex: 0 0 auto;
}

.eclat-quote__name { font-size: 14px; font-weight: 600; color: var(--wd-dark); display: block; text-align: start; }
.eclat-quote__city { font-size: 12.5px; color: var(--wd-soft); display: block; text-align: start; }

@media (max-width: 900px) { .eclat-quotes { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   ABOUT / CONTACT BLOCKS
   ----------------------------------------------------------------------- */
.eclat-lede { font-size: 16px; line-height: 1.7; color: var(--wd-text); max-width: 62ch; }

.eclat-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.eclat-value { border: 1px solid var(--wd-line); background: #fff; padding: 32px 26px; text-align: center; }
.eclat-value svg { color: var(--wd-accent); margin-bottom: 14px; }

.eclat-value__t {
	font-family: var(--wd-font-head);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wd-dark);
	margin: 0 0 8px;
}

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

.eclat-steps { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--wd-line); }
.eclat-step { padding: 30px 24px; background: #fff; text-align: center; }
.eclat-step + .eclat-step { border-inline-start: 1px solid var(--wd-line); }

.eclat-step__n {
	display: block;
	font-family: var(--wd-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	color: var(--wd-accent);
	margin-bottom: 10px;
}

.eclat-step__t {
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wd-dark);
	margin: 0 0 6px;
}

.eclat-step__d { font-size: 14px; line-height: 1.6; color: var(--wd-text); margin: 0; }

.eclat-info { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--wd-line); }
.eclat-info__item { padding: 30px 26px; background: #fff; text-align: center; }
.eclat-info__item + .eclat-info__item { border-inline-start: 1px solid var(--wd-line); }
.eclat-info__item svg { color: var(--wd-accent); margin-bottom: 12px; }

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

.eclat-info__d { font-size: 14.5px; line-height: 1.7; color: var(--wd-text); margin: 0; }
.eclat-info__d a { color: var(--wd-accent); }

.eclat-map { border: 1px solid var(--wd-line); line-height: 0; }
.eclat-map iframe { display: block; filter: grayscale(0.25); }

@media (max-width: 900px) {
	.eclat-values { grid-template-columns: 1fr; }
	.eclat-steps, .eclat-info { grid-template-columns: 1fr; }
	.eclat-step + .eclat-step,
	.eclat-info__item + .eclat-info__item { border-inline-start: 0; border-top: 1px solid var(--wd-line); }
}

/* --------------------------------------------------------------------------
   FAQ
   ----------------------------------------------------------------------- */
.eclat-faq { border: 1px solid var(--wd-line); background: #fff; }
.eclat-faq__item + .eclat-faq__item { border-top: 1px solid var(--wd-line); }

.eclat-faq__q {
	width: 100%;
	background: none;
	border: 0;
	text-align: start;
	padding: 18px 22px;
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--wd-dark);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.eclat-faq__q:hover { color: var(--wd-accent); }

.eclat-faq__q::after {
	content: "+";
	font-size: 19px;
	font-weight: 400;
	color: var(--wd-accent);
	flex: 0 0 auto;
	line-height: 1;
}

.eclat-faq__item.is-open .eclat-faq__q::after { content: "–"; }

.eclat-faq__a {
	padding: 0 22px 20px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--wd-text);
	display: none;
}

.eclat-faq__item.is-open .eclat-faq__a { display: block; }

/* ==========================================================================
   FIX PASS — the four reported visual failures, corrected against
   data/blueprint/home-sections.json and data/screens/target-home.png
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — grey stage, 270px sidebar, oversized display type
   Measured: the demo's vertical categories menu (.wd-nav-vertical) is 270px
   wide and display:flex. Its slide sits on a light grey field, not on white.
   ----------------------------------------------------------------------- */
.eclat-hero__wrap {
	grid-template-columns: 270px 1fr;
	gap: 0;
	padding-block: 0;
}

.eclat-hero__side {
	border: 1px solid var(--wd-line);
	border-top: 0;
	border-inline-end: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.eclat-hero__side a { padding: 10px 20px; font-size: 15px; }

.eclat-hero__stage { background: #F2F2F2; }

.eclat-hero__inner { padding: 44px 56px; }

.eclat-hero__title {
	font-size: 54px;
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

.eclat-hero__text { font-size: 15px; max-width: 34ch; margin-bottom: 22px; }
.eclat-hero__price { font-size: 30px; font-weight: 700; margin-bottom: 24px; }

/* transparent cut-outs float — no panel, no blend hack */
.eclat-hero__media img {
	max-height: 360px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	background: none;
	mix-blend-mode: normal;
	filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.13));
}

@media (max-width: 1200px) { .eclat-hero__title { font-size: 42px; } }

@media (max-width: 1024px) {
	.eclat-hero__wrap { grid-template-columns: 1fr; }
	.eclat-hero__side { display: none; }
}

@media (max-width: 860px) {
	.eclat-hero__title { font-size: 30px; }
	.eclat-hero__inner { padding: 32px 22px 44px; }
	.eclat-hero__media img { max-height: 220px; }
}

/* --------------------------------------------------------------------------
   2. CATEGORY MOSAIC — 1 large (2x2) + 4 small, caption bottom-left
   ----------------------------------------------------------------------- */
.eclat-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 200px);
	gap: 20px;
}

.eclat-cat {
	position: relative;
	grid-column: span 1;
	grid-row: span 1;
	background: var(--wd-alt);
	overflow: hidden;
	display: block;
	transition: background 0.25s ease;
}

.eclat-cat:first-child {
	grid-column: span 2;
	grid-row: span 2;
	background: #F1EBE5;
}

.eclat-cat:hover { background: #EDE7E1; }

.eclat-cat__img {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 22px 74px;
}

.eclat-cat:first-child .eclat-cat__img { padding: 40px 40px 92px; }

.eclat-cat__img img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.10));
}

@media (hover: hover) { .eclat-cat:hover .eclat-cat__img img { transform: scale(1.06); } }

/* the scrim is no longer needed: the tile carries the tint, the caption sits
   on the tinted field rather than on top of a photograph */
.eclat-cat::after { content: none; }

.eclat-cat__cap {
	position: absolute;
	inset-inline-start: 24px;
	inset-inline-end: auto;
	bottom: 20px;
	z-index: 2;
	text-align: start;
	padding: 0;
}

.eclat-cat:first-child .eclat-cat__cap { inset-inline-start: 34px; bottom: 30px; }

.eclat-cat__name {
	display: block;
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-dark);
	margin-bottom: 2px;
}

.eclat-cat:first-child .eclat-cat__name { font-size: 19px; }
.eclat-cat__count { display: block; font-size: 13px; color: var(--wd-soft); }

@media (max-width: 900px) {
	.eclat-cats { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 165px); }
	.eclat-cat:first-child { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 480px) {
	.eclat-cats { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 190px; }
	.eclat-cat:first-child { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   3. PROMO BANNER — seamless, cut-out floating on the accent field
   ----------------------------------------------------------------------- */
.eclat-showcase__media img {
	max-height: 330px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	background: none;
	padding: 0;
	filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.22));
}

.eclat-showcase__inner { padding: 58px var(--wd-gutter); gap: 50px; }
.eclat-showcase__title { font-size: 44px; line-height: 1.08; margin: 0 0 26px; }

.eclat-showcase__track::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 62%);
	pointer-events: none;
	z-index: 1;
}

.eclat-strip__media img {
	max-height: 310px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: normal;
	filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.12));
}

@media (max-width: 860px) { .eclat-showcase__title { font-size: 28px; } }

/* --------------------------------------------------------------------------
   4. BLOG CARDS — date chip overlapping the corner of the thumbnail
   ----------------------------------------------------------------------- */
.eclat-postcard { border: 0; background: transparent; }

.eclat-postcard__img {
	position: relative;
	display: block;
	aspect-ratio: 16 / 11;
	overflow: visible;          /* the chip has to break the frame */
	background: var(--wd-alt);
}

.eclat-postcard__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eclat-postcard__date {
	position: absolute;
	top: 16px;
	inset-inline-start: -12px;
	z-index: 3;
	min-width: 54px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	padding: 9px 8px;
	text-align: center;
	line-height: 1.05;
}

.eclat-postcard__day {
	display: block;
	font-family: var(--wd-font-head);
	font-size: 17px;
	font-weight: 700;
	color: var(--wd-dark);
}

.eclat-postcard__mon {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-soft);
	margin-top: 1px;
}

.eclat-postcard__tag {
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	z-index: 2;
	background: var(--wd-accent);
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 6px 12px;
}

.eclat-postcard__body { padding: 22px 4px 0; text-align: center; }
.eclat-postcard__title { font-size: 19px; font-weight: 600; line-height: 1.32; margin: 0 0 8px; }
.eclat-postcard__by { font-size: 13px; color: var(--wd-soft); margin: 0 0 10px; }
.eclat-postcard__excerpt { font-size: 14px; line-height: 1.65; margin: 0 0 14px; }

/* cut-outs need no white panel on the product cards either */
.eclat-pc__imglink img { mix-blend-mode: normal; }

/* ==========================================================================
   MOBILE UX FIXES — driven by the audit in scripts/74-audit-mobile.py
   Item 5 (promo banner edge-to-edge) already passed and is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Category icons — shared by the hero sidebar, the browse dropdown and the
   mobile drawer
   ----------------------------------------------------------------------- */
.eclat-cat-ico {
	flex: 0 0 auto;
	color: var(--wd-accent);
	opacity: 0.9;
}

.eclat-hd-browse__list a .eclat-cat-ico,
.eclat-hero__side a .eclat-cat-ico { color: var(--wd-accent); }

.eclat-hd-browse__list a:hover .eclat-cat-ico,
.eclat-hero__side a:hover .eclat-cat-ico { opacity: 1; }

.eclat-hero__side a { gap: 12px; }
.eclat-hero__side a > span { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   1. OFF-CANVAS DRAWER — two tabs
   ----------------------------------------------------------------------- */
.eclat-hd-mtabs {
	display: flex;
	border-bottom: 1px solid var(--wd-line);
}

.eclat-hd-mtab {
	flex: 1 1 50%;
	padding: 14px 10px;
	background: var(--wd-alt);
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: var(--wd-font-head);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-soft);
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.eclat-hd-mtab.is-active {
	background: #fff;
	color: var(--wd-dark);
	border-bottom-color: var(--wd-accent);
}

.eclat-hd-mpane { display: none; }
.eclat-hd-mpane.is-active { display: block; }

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

.eclat-hd-mobile__cats a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	font-size: 14.5px;
	color: var(--wd-head);
}

.eclat-hd-mobile__cats a > span:first-of-type { flex: 1 1 auto; }
.eclat-hd-mobile__cats a:hover { color: var(--wd-accent); }

/* --------------------------------------------------------------------------
   2. HERO — text block first, product image below it
   The image previously carried order:-1, which put it above the copy.
   ----------------------------------------------------------------------- */
@media (max-width: 860px) {
	.eclat-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 30px 20px 46px;
		gap: 22px;
	}

	.eclat-hero__copy  { order: 1; max-width: none; margin-inline: auto; }
	.eclat-hero__media { order: 2; margin-bottom: 0; }

	.eclat-hero__text { margin-inline: auto; }
	.eclat-hero__price,
	.eclat-hero__cta { justify-content: center; }
	.eclat-hero__cta .eclat-btn { flex: 1 1 auto; justify-content: center; }
	.eclat-hero__media img { max-height: 230px; }
	.eclat-hero__dots { bottom: 14px; }
}

/* --------------------------------------------------------------------------
   3. FEATURED CATEGORIES — 1 full-width, then a 2-column grid
   At 480px and below this had collapsed to a single column.
   ----------------------------------------------------------------------- */
@media (max-width: 900px) {
	.eclat-cats {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		grid-auto-rows: 155px;
		gap: 14px;
	}

	/* span two tracks rather than using min-height: an item taller than its
	   grid row overflows and lands on top of the row beneath it */
	.eclat-cat:first-child {
		grid-column: 1 / -1;
		grid-row: span 2;
		min-height: 0;
	}

	/* the tiles are short on a phone, so the product needs to clear the caption
	   and the caption needs a scrim to stay legible over any image */
	.eclat-cat:first-child .eclat-cat__img { padding: 20px 20px 82px; }
	.eclat-cat__img { padding: 12px 12px 62px; }

	.eclat-cat::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		height: 58px;
		background: linear-gradient(to top, var(--wd-alt) 46%, rgba(247, 246, 244, 0));
		z-index: 1;
		pointer-events: none;
	}

	.eclat-cat:first-child::after {
		height: 78px;
		background: linear-gradient(to top, #F1EBE5 46%, rgba(241, 235, 229, 0));
	}

	.eclat-cat__cap { inset-inline-start: 14px; bottom: 12px; z-index: 2; }
	.eclat-cat:first-child .eclat-cat__cap { inset-inline-start: 20px; bottom: 18px; }
	.eclat-cat__name { font-size: 13px; }
	.eclat-cat:first-child .eclat-cat__name { font-size: 17px; }
	.eclat-cat__count { font-size: 12px; }
}

/* stays two-across on the narrowest phones — no single-column fallback */
@media (max-width: 480px) {
	.eclat-cats {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 140px;
	}

	.eclat-cat:first-child { grid-column: 1 / -1; grid-row: span 2; min-height: 0; }
}

/* --------------------------------------------------------------------------
   4. FEATURED PRODUCTS — horizontal swipeable carousel on mobile
   Was a vertical stack, which made the section endlessly tall.
   ----------------------------------------------------------------------- */
@media (max-width: 820px) {
	.eclat-pgrid {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 6px;
		/* bleed to the screen edges so the last card is not clipped short */
		margin-inline: calc(var(--wd-gutter) * -1);
		padding-inline: var(--wd-gutter);
	}

	.eclat-pgrid::-webkit-scrollbar { display: none; }

	.eclat-pgrid > .eclat-pc {
		flex: 0 0 62%;
		max-width: 62%;
		scroll-snap-align: start;
	}

	/* There is no hover on touch, so the button is always visible — but it has
	   to stay absolutely positioned. .eclat-pc__media is display:flex, so a
	   static child joins the row and lands beside the image instead of under it. */
	.eclat-pgrid .eclat-pc__actions {
		position: absolute;
		inset-inline: 0;
		bottom: 6px;
		opacity: 1;
		transform: none;
		margin-top: 0;
	}

	.eclat-pgrid .eclat-pc__btn {
		padding: 9px 14px;
		font-size: 10.5px;
		letter-spacing: 0.5px;
		white-space: nowrap;
	}

	.eclat-tabs { gap: 16px; margin: -10px 0 22px; }
	.eclat-tab { font-size: 12px; }
}

@media (max-width: 520px) {
	.eclat-pgrid > .eclat-pc { flex: 0 0 74%; max-width: 74%; }
}

/* --------------------------------------------------------------------------
   6. FOOTER ACCORDIONS — mobile only
   Above the breakpoint the toggle renders as a plain heading and every list
   stays open, so the desktop footer is unchanged.
   ----------------------------------------------------------------------- */
.eclat-ft-acc {
	all: unset;
	display: block;
	width: 100%;
	font: inherit;
	color: inherit;
	cursor: default;
}

.eclat-ft-acc__ico { display: none; }

@media (max-width: 700px) {
	.eclat-ft-grid { gap: 0; }

	.eclat-ft-col { border-bottom: 1px solid var(--wd-foot-line); }
	.eclat-ft-col--brand { border-bottom: 1px solid var(--wd-foot-line); padding-bottom: 26px; }

	.eclat-ft-title { margin: 0; }

	.eclat-ft-acc {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 16px 0;
		cursor: pointer;
	}

	.eclat-ft-acc__ico {
		display: block;
		position: relative;
		width: 12px;
		height: 12px;
		flex: 0 0 12px;
	}

	.eclat-ft-acc__ico::before,
	.eclat-ft-acc__ico::after {
		content: "";
		position: absolute;
		background: var(--wd-foot-head);
		transition: transform 0.22s ease, opacity 0.22s ease;
	}

	.eclat-ft-acc__ico::before { top: 5px; left: 0; width: 12px; height: 2px; }
	.eclat-ft-acc__ico::after  { left: 5px; top: 0; width: 2px; height: 12px; }

	/* open state: the vertical bar folds away, leaving a minus */
	.eclat-ft-col:not(.is-collapsed) .eclat-ft-acc__ico::after { transform: scaleY(0); opacity: 0; }

	/* collapsed panel */
	.eclat-ft-col.is-collapsed .eclat-ft-links,
	.eclat-ft-col.is-collapsed .eclat-ft-address,
	.eclat-ft-col.is-collapsed .eclat-ft-phone,
	.eclat-ft-col.is-collapsed .eclat-ft-wa,
	.eclat-ft-col.is-collapsed .eclat-ft-hours { display: none; }

	.eclat-ft-links { padding-bottom: 14px; }
	.eclat-ft-col--contact .eclat-ft-address { padding-bottom: 4px; }
	.eclat-ft-col--contact .eclat-ft-hours { padding-bottom: 14px; }

	/* two-up city list reads better than one long column */
	.eclat-ft-links--plain { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
}

/* --------------------------------------------------------------------------
   General mobile polish
   ----------------------------------------------------------------------- */
@media (max-width: 700px) {
	.eclat-sec { padding-block: 42px; }
	.eclat-sec--tight { padding-block: 28px; }
	.eclat-sechead { margin-bottom: 22px; }
	.eclat-sechead__title { font-size: 18px; }
	.eclat-sechead__sub { font-size: 14px; }
	.eclat-showcase__inner { padding: 34px 20px 44px; }
	.eclat-brands { gap: 4px; }
	.eclat-brand { min-height: 62px; font-size: 14px; }
}

/* ==========================================================================
   MASTER REFINEMENT PASS
   Measured from data/blueprint/dynamic.json (captured by hovering the demo):
     .hover-content   263 x 75   short description revealed on hover
     .wd-add-btn      126 x 36   primary action
     .wd-action-btn    35 x 35   wishlist / compare icon buttons
     cart drawer      340px wide, transform 0.5s cubic-bezier(.19,1,.22,1)
     overlay          rgba(0,0,0,.7), opacity 0.5s same easing
   ========================================================================== */

/* --------------------------------------------------------------------------
   RTL — icons that point somewhere must mirror
   ----------------------------------------------------------------------- */
[dir="rtl"] .eclat-ico--phone,
[dir="rtl"] .eclat-ico--truck,
[dir="rtl"] .eclat-wa-glyph,
[dir="rtl"] .eclat-pc__act svg,
[dir="rtl"] .eclat-banner__link svg,
[dir="rtl"] .eclat-postcard__more svg { transform: scaleX(-1); }

/* chevrons in a dropdown point down in both directions — do not flip them */
[dir="rtl"] .eclat-ico--chevron { transform: none; }

/* --------------------------------------------------------------------------
   HEADER — language dropdown
   ----------------------------------------------------------------------- */
.eclat-hd-lang { position: relative; display: inline-flex; align-items: center; }

.eclat-hd-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 4px 2px;
	font: inherit;
	font-size: 13px;
	color: #fff;
	cursor: pointer;
	line-height: 1;
}

.eclat-hd-lang__btn svg { transition: transform 0.2s ease; }
.eclat-hd-lang.is-open .eclat-hd-lang__btn svg { transform: rotate(180deg); }

.eclat-hd-lang__list {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	z-index: 700;
	width: max-content;
	min-width: 0;
	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.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.eclat-hd-lang.is-open .eclat-hd-lang__list { opacity: 1; visibility: visible; transform: none; }

.eclat-hd-lang__list li { margin: 0; }

.eclat-hd-lang__list a {
	display: block;
	padding: 9px 16px;
	font-size: 13.5px;
	color: var(--wd-text);
	white-space: nowrap;
}

.eclat-hd-lang__list a:hover { color: var(--wd-accent); background: var(--wd-alt); }
.eclat-hd-lang__list .is-current a { color: var(--wd-dark); font-weight: 700; }

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

/* --------------------------------------------------------------------------
   HEADER — sticky shrink, smooth
   ----------------------------------------------------------------------- */
.eclat-hd-main,
.eclat-hd-nav,
.eclat-hd-logo img {
	transition: height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
	            max-height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
	            box-shadow 0.28s ease;
}

.eclat-header.is-stuck .eclat-hd-nav {
	transform: translateZ(0);
	animation: eclat-slide-down 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes eclat-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.eclat-header.is-stuck .eclat-hd-nav { animation: none; }
}

/* the nav tier is fixed when stuck, so the page must not jump */
.eclat-header.is-stuck { padding-bottom: 53px; }

/* --------------------------------------------------------------------------
   BROWSE CATEGORIES — padding and rhythm corrected against the demo
   ----------------------------------------------------------------------- */
.eclat-hd-browse__list a { padding: 12px 20px; gap: 12px; font-size: 14px; }
.eclat-hd-browse__list a:hover { padding-inline-start: 24px; transition: padding 0.2s ease, color 0.2s ease; }
.eclat-hd-browse__n { font-size: 11.5px; opacity: 0.75; }

.eclat-hero__side a { padding: 12px 20px; gap: 12px; }
.eclat-hero__side a:hover { padding-inline-start: 24px; transition: padding 0.2s ease, color 0.2s ease, background 0.2s ease; }

/* --------------------------------------------------------------------------
   PRODUCT CARD — hover reveals description + actions over the lower section
   ----------------------------------------------------------------------- */
.eclat-pc {
	position: relative;
	padding-bottom: 0;
	transition: box-shadow 0.28s ease;
}

.eclat-pc__body {
	position: relative;
	padding-bottom: 4px;
}

.eclat-pc__stars {
	display: block;
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--wd-gold);
	margin-bottom: 4px;
	line-height: 1;
}

/* the revealed panel sits over the lower part of the card */
.eclat-pc__hover {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 6;
	background: #fff;
	padding: 4px 14px 16px;
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	pointer-events: none;
}

.eclat-pc__desc {
	font-size: 13px;
	line-height: 1.6;
	color: var(--wd-text);
	margin: 0 0 12px;
	min-height: 42px;
}

.eclat-pc__row { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* measured: 126 x 36 */
.eclat-pc__row .eclat-pc__btn {
	min-width: 126px;
	height: 36px;
	padding: 0 16px;
	font-size: 11px;
}

/* measured: 35 x 35 */
.eclat-pc__act {
	width: 35px;
	height: 35px;
	flex: 0 0 35px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--wd-line);
	color: var(--wd-head);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

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

@media (hover: hover) and (min-width: 992px) {
	.eclat-pc:hover {
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
		z-index: 5;
	}

	.eclat-pc:hover .eclat-pc__hover {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}
}

/* no hover on touch: show the button inline, drop the overlay entirely */
@media (hover: none), (max-width: 991px) {
	.eclat-pc__hover {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		box-shadow: none;
		padding: 8px 0 0;
	}

	.eclat-pc__desc { display: none; }
	.eclat-pc__act { display: none; }
	.eclat-pc__row .eclat-pc__btn { width: 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   CATEGORY TILES — count on hover only, image zooms
   ----------------------------------------------------------------------- */
.eclat-cat__count {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transform: translateY(-4px);
	transition: opacity 0.25s ease, max-height 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) {
	.eclat-cat:hover .eclat-cat__count { opacity: 1; max-height: 24px; transform: none; }
	.eclat-cat:hover .eclat-cat__img img { transform: scale(1.05); }
}

/* touch has no hover, so the count is simply always shown */
@media (hover: none) {
	.eclat-cat__count { opacity: 1; max-height: 24px; transform: none; }
}

.eclat-cat__img img { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* --------------------------------------------------------------------------
   TESTIMONIALS — slider
   ----------------------------------------------------------------------- */
.eclat-quotes { position: relative; }

.eclat-quotes__track { position: relative; }

.eclat-quotes__slide {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease;
}

.eclat-quotes__slide.is-active { position: relative; opacity: 1; visibility: visible; }

.eclat-quotes__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--wd-line);
	border-radius: 50%;
	color: var(--wd-head);
	cursor: pointer;
	opacity: 0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
	transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease;
}

.eclat-quotes:hover .eclat-quotes__nav { opacity: 1; }
.eclat-quotes__nav:hover { background: var(--wd-accent); border-color: var(--wd-accent); color: #fff; }
.eclat-quotes__nav--prev { inset-inline-start: -18px; }
.eclat-quotes__nav--next { inset-inline-end: -18px; }
[dir="rtl"] .eclat-quotes__nav svg { transform: scaleX(-1); }

.eclat-quotes__dots { display: flex; justify-content: center; gap: 7px; margin-top: 26px; }

.eclat-quotes__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #D6D2CD;
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}

.eclat-quotes__dot.is-active { background: var(--wd-accent); width: 22px; border-radius: 4px; }

@media (max-width: 900px) {
	.eclat-quotes__slide { grid-template-columns: 1fr; }
	.eclat-quotes__nav { display: none; }
}

/* --------------------------------------------------------------------------
   CAROUSEL ARROWS — rounded, shadowed, fade in on hover
   ----------------------------------------------------------------------- */
.eclat-hero__nav,
.eclat-showcase__nav {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	color: var(--wd-head);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	opacity: 0;
	transition: opacity 0.3s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.eclat-hero__stage:hover .eclat-hero__nav,
.eclat-showcase:hover .eclat-showcase__nav { opacity: 1; }

.eclat-hero__nav:hover,
.eclat-showcase__nav:hover {
	background: var(--wd-accent);
	color: #fff;
	transform: translateY(-50%) scale(1.06);
}

.eclat-showcase__nav { background: rgba(255, 255, 255, 0.9); }
.eclat-showcase__nav--prev { inset-inline-start: 24px; }
.eclat-showcase__nav--next { inset-inline-end: 24px; }

/* --------------------------------------------------------------------------
   NEWSLETTER — input and button exactly the same height
   ----------------------------------------------------------------------- */
.eclat-news__form { align-items: stretch; gap: 0; }

.eclat-news__input {
	height: 48px;
	padding: 0 18px;
	border-inline-end: 0;
	line-height: normal;
}

.eclat-news__form .eclat-btn {
	height: 48px;
	padding: 0 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	border-radius: 0;
}

@media (max-width: 520px) {
	.eclat-news__form { flex-direction: column; gap: 10px; }
	.eclat-news__input { border-inline-end: 1px solid var(--wd-line); max-width: none; }
	.eclat-news__form .eclat-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   SPACING — the sections were far too airy against the demo
   Woodmart runs roughly 55-60px between home sections, not 78px.
   ----------------------------------------------------------------------- */
:root { --wd-sec: 56px; }

.eclat-sec--tight { padding-block: 34px; }
.eclat-sechead { margin-bottom: 32px; }
.eclat-showcase__inner { padding-block: 48px; }
.eclat-ft-main { padding-block: 48px 38px; }

@media (max-width: 900px) {
	:root { --wd-sec: 38px; }
	.eclat-sec--tight { padding-block: 24px; }
	.eclat-sechead { margin-bottom: 20px; }
}

/* --------------------------------------------------------------------------
   BLOG — date chip overlap, confirmed against the demo
   ----------------------------------------------------------------------- */
.eclat-postcard__img { overflow: visible; }

.eclat-postcard__date {
	top: 14px;
	inset-inline-start: -14px;
	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
}

/* --------------------------------------------------------------------------
   CART DRAWER — matched to the demo: 340px, 0.5s cubic-bezier(.19,1,.22,1)
   ----------------------------------------------------------------------- */
.eclat-drawer {
	position: fixed;
	top: 0;
	inset-inline-end: 0;
	z-index: 99996;
	width: min(340px, 90vw);
	height: 100%;
	background: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden auto;
	transform: translateX(100%);
	transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	box-shadow: -8px 0 40px rgba(0, 0, 0, 0.16);
}

[dir="rtl"] .eclat-drawer { transform: translateX(-100%); }
.eclat-drawer.is-open { transform: translateX(0); }

.eclat-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 99995;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.eclat-drawer-overlay.is-open { opacity: 1; }

/* the guard that stops an invisible overlay swallowing every click */
.eclat-drawer[hidden],
.eclat-drawer-overlay[hidden] { display: none !important; }

.eclat-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid var(--wd-line);
}

.eclat-drawer__title {
	margin: 0;
	font-family: var(--wd-font-head);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-dark);
}

.eclat-drawer__close {
	background: none;
	border: 0;
	font-size: 13px;
	color: var(--wd-soft);
	cursor: pointer;
}

.eclat-drawer__close:hover { color: var(--wd-accent); }
.eclat-drawer__body { flex: 1 1 auto; padding: 20px; }
.eclat-drawer__foot { padding: 16px 20px 22px; border-top: 1px solid var(--wd-line); }

.eclat-drawer__continue {
	width: 100%;
	padding: 13px;
	background: var(--wd-dark);
	border: 0;
	color: #fff;
	font-family: var(--wd-font-head);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.eclat-drawer__continue:hover { background: var(--wd-accent); }

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

/* --------------------------------------------------------------------------
   FLOATING WHATSAPP — official mark
   ----------------------------------------------------------------------- */
.eclat-whatsapp {
	position: fixed;
	inset-inline-end: 18px;
	bottom: 18px;
	z-index: 9990;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 22px rgba(37, 211, 102, 0.42);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eclat-whatsapp:hover {
	color: #fff;
	transform: scale(1.06);
	box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);
}

.eclat-wa-glyph { display: block; }

/* --------------------------------------------------------------------------
   FOOTER ACCORDION — smooth toggle
   ----------------------------------------------------------------------- */
@media (max-width: 700px) {
	.eclat-ft-col .eclat-ft-links,
	.eclat-ft-col .eclat-ft-address,
	.eclat-ft-col .eclat-ft-phone,
	.eclat-ft-col .eclat-ft-wa,
	.eclat-ft-col .eclat-ft-hours {
		overflow: hidden;
		max-height: 420px;
		opacity: 1;
		transition: max-height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.24s ease;
	}

	.eclat-ft-col.is-collapsed .eclat-ft-links,
	.eclat-ft-col.is-collapsed .eclat-ft-address,
	.eclat-ft-col.is-collapsed .eclat-ft-phone,
	.eclat-ft-col.is-collapsed .eclat-ft-wa,
	.eclat-ft-col.is-collapsed .eclat-ft-hours {
		display: block;
		max-height: 0;
		opacity: 0;
		margin-bottom: 0;
		padding-bottom: 0;
	}
}

/* ==========================================================================
   FINAL SYNC PASS
   Measured from data/blueprint/final.json:
     sidebar   ul/li list-style none · a padding 5px 18px · display flex · 14px
     hero      slider sits flush right of the 270px sidebar
     arrows    65 x 65, absolute, hidden until hover
     brands    grayscale(1), opacity .5, logo width ~166px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.3  VERTICAL CATEGORY MENU — kill the bullets
   The theme sets list-style: disc on `ul li` with enough weight to beat a
   plain `.eclat-hero__side { list-style: none }`, so the marker is targeted
   directly as well.
   ----------------------------------------------------------------------- */
.eclat-hero__side,
.eclat-hero__side li,
.eclat-hd-browse__list,
.eclat-hd-browse__list li,
.eclat-hd-mobile__cats,
.eclat-hd-mobile__cats li,
.eclat-ft-links,
.eclat-ft-links li,
.eclat-hd-lang,
.eclat-hd-lang li,
.eclat-hd-menu__list,
.eclat-hd-menu__list li {
	list-style: none !important;
	list-style-type: none !important;
}

.eclat-hero__side li::marker,
.eclat-hd-browse__list li::marker,
.eclat-hd-mobile__cats li::marker,
.eclat-ft-links li::marker,
.eclat-hd-lang li::marker,
.eclat-hd-menu__list li::marker { content: none; font-size: 0; }

.eclat-hero__side li::before,
.eclat-hd-browse__list li::before { content: none; }

/* padding and icon alignment, matched to the demo.
   The theme sets `ul { margin-left: 20px }`, which pushed this 270px list 20px
   into the slider's grid track and overlapped the two. */
.eclat-hero__side,
.eclat-hd-browse__list,
.eclat-hd-mobile__cats,
.eclat-ft-links,
.eclat-hd-lang__list,
.eclat-hd-menu__list {
	margin: 0 !important;
	padding: 0 !important;
}

.eclat-hero__side a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 18px;
	font-size: 14px;
	line-height: 1.4;
}

.eclat-hero__side a > span { flex: 1 1 auto; min-width: 0; }

.eclat-hero__side .eclat-cat-ico,
.eclat-hd-browse__list .eclat-cat-ico {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	display: block;
}

.eclat-hd-browse__list a { padding: 9px 18px; gap: 11px; font-size: 14px; }
.eclat-hd-browse__list a:hover,
.eclat-hero__side a:hover { padding-inline-start: 22px; }

/* --------------------------------------------------------------------------
   1.4  HERO BOUNDARIES + arrow placement
   ----------------------------------------------------------------------- */
.eclat-hero__wrap { align-items: stretch; }

/* The list is a flex container inside a grid track, so it shrink-to-fits and
   leaves slack in the track. In LTR that slack fell outside the layout; in RTL
   it opened a 20px gap between the sidebar and the slider. */
.eclat-hero__side {
	align-self: stretch;
	justify-self: stretch;
	width: 100%;
	box-sizing: border-box;
}

.eclat-hero__stage { min-width: 0; }

/* 65 x 65 on the demo, vertically centred inside the slider only */
.eclat-hero__nav {
	width: 52px;
	height: 52px;
	top: 50%;
	transform: translateY(-50%);
}

.eclat-hero__nav--prev { inset-inline-start: 14px; }
.eclat-hero__nav--next { inset-inline-end: 14px; }

/* --------------------------------------------------------------------------
   1.1  HEADER ICONS — thin line, badge overlapping the top-right corner
   ----------------------------------------------------------------------- */
.eclat-hd-act--icon .eclat-hd-act__label { display: none; }

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

.eclat-hd-badge,
.eclat-hd-cart__count {
	position: absolute;
	top: -7px;
	inset-inline-end: -9px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 50%;
	background: var(--wd-accent);
	color: #fff;
	font-family: var(--wd-font-head);
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.eclat-hd-actions { gap: 18px; }
.eclat-hd-act svg { stroke-width: 1.4; }

/* --------------------------------------------------------------------------
   1.2  LANGUAGE SWITCHER — opens on hover, flags beside each language
   ----------------------------------------------------------------------- */
@media (hover: hover) {
	.eclat-hd-lang:hover .eclat-hd-lang__list {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.eclat-hd-lang:hover .eclat-hd-lang__btn svg { transform: rotate(180deg); }
}

/* keep a hoverable bridge so the panel does not close in the gap */
.eclat-hd-lang::after {
	content: "";
	position: absolute;
	top: 100%;
	inset-inline: 0;
	height: 10px;
}

.eclat-hd-lang__btn { gap: 7px; }
.eclat-hd-flag { font-size: 14px; line-height: 1; }
.eclat-hd-lang__list a { display: flex; align-items: center; gap: 9px; }

/* --------------------------------------------------------------------------
   2.1  SECTION SPACING — kill the oversized gaps
   ----------------------------------------------------------------------- */
.eclat-hero { margin-bottom: 0; }

/* the USP strip follows the hero directly on the demo */
.eclat-sec--tight { padding-block: 30px; }
.eclat-sec + .eclat-sec--alt,
.eclat-sec--alt + .eclat-sec { margin-top: 0; }

.eclat-wrap { width: 100%; }

/* centre every section's inner block */
.eclat-sec > .eclat-wrap { display: block; }
.eclat-usp, .eclat-cats, .eclat-pgrid, .eclat-banners,
.eclat-quotes, .eclat-posts, .eclat-brands { margin-inline: auto; }

/* --------------------------------------------------------------------------
   2.2  PRODUCT TABS — carousel per tab
   The demo renders each tab pane as a 4-column grid on desktop; the swipeable
   carousel is the mobile presentation. Both are implemented: grid above the
   breakpoint, scroll-snap carousel below it.
   ----------------------------------------------------------------------- */
.eclat-tabpane { position: relative; }

.eclat-tabpane.is-active .eclat-pgrid > .eclat-pc {
	animation: eclat-fade-up 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.eclat-tabpane.is-active .eclat-pgrid > .eclat-pc:nth-child(2) { animation-delay: 0.05s; }
.eclat-tabpane.is-active .eclat-pgrid > .eclat-pc:nth-child(3) { animation-delay: 0.10s; }
.eclat-tabpane.is-active .eclat-pgrid > .eclat-pc:nth-child(4) { animation-delay: 0.15s; }
.eclat-tabpane.is-active .eclat-pgrid > .eclat-pc:nth-child(n + 5) { animation-delay: 0.20s; }

@keyframes eclat-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.eclat-tabpane.is-active .eclat-pgrid > .eclat-pc { animation: none; }
}

/* --------------------------------------------------------------------------
   2.3  PRODUCT CARD — accent button slides up, rating revealed
   ----------------------------------------------------------------------- */
.eclat-pc__stars {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 0.25s ease, max-height 0.25s ease;
}

@media (hover: hover) and (min-width: 992px) {
	.eclat-pc:hover .eclat-pc__stars { opacity: 1; max-height: 20px; }
}

@media (hover: none), (max-width: 991px) {
	.eclat-pc__stars { opacity: 1; max-height: 20px; }
}

/* the primary action is the accent colour, and slides up into place */
.eclat-pc__row .eclat-pc__btn {
	background: var(--wd-accent);
	color: #fff;
	transform: translateY(8px);
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease;
}

.eclat-pc:hover .eclat-pc__row .eclat-pc__btn { transform: translateY(0); }
.eclat-pc__row .eclat-pc__btn:hover { background: var(--wd-accent-dk); }

/* --------------------------------------------------------------------------
   2.4  TESTIMONIALS — 3 per view, avatars, no links on names
   ----------------------------------------------------------------------- */
.eclat-quote { align-items: center; }
.eclat-quote__name a { pointer-events: none; color: inherit; text-decoration: none; }

.eclat-quote__avatar {
	width: 46px;
	height: 46px;
	font-size: 15px;
	background: var(--wd-alt);
	border: 1px solid var(--wd-line);
}

/* --------------------------------------------------------------------------
   2.7  BRAND LOGOS — auto-scrolling track
   ----------------------------------------------------------------------- */
.eclat-brands {
	display: block;
	overflow: hidden;
	position: relative;
	grid-template-columns: none;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.eclat-brands__track {
	display: flex;
	align-items: center;
	gap: 0;
	width: max-content;
	animation: eclat-marquee 34s linear infinite;
}

.eclat-brands:hover .eclat-brands__track { animation-play-state: paused; }

@keyframes eclat-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* RTL scrolls the other way */
[dir="rtl"] .eclat-brands__track { animation-name: eclat-marquee-rtl; }

@keyframes eclat-marquee-rtl {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
	.eclat-brands__track { animation: none; }
	.eclat-brands { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

.eclat-brands .eclat-brand {
	flex: 0 0 auto;
	width: 200px;
	min-height: 76px;
	border: 0;
	filter: grayscale(1);
	opacity: 0.5;
	transition: opacity 0.25s ease, filter 0.25s ease, color 0.25s ease;
}

.eclat-brands .eclat-brand:hover { opacity: 1; filter: none; color: var(--wd-accent); }

@media (max-width: 700px) {
	.eclat-brands .eclat-brand { width: 150px; min-height: 64px; }
}

/* --------------------------------------------------------------------------
   3.  CART DRAWER — empty state, matched to the demo
   ----------------------------------------------------------------------- */
.eclat-drawer__empty {
	text-align: center;
	padding: 46px 10px 20px;
}

.eclat-drawer__empty-ico {
	color: #DCDCDC;
	stroke-width: 1;
	margin-bottom: 18px;
}

.eclat-drawer__empty-text {
	font-size: 14px;
	color: var(--wd-text);
	margin: 0 0 22px;
}

.eclat-drawer__empty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 190px;
	height: 44px;
	padding: 0 24px;
	background: var(--wd-accent);
	color: #fff;
	font-family: var(--wd-font-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	transition: background 0.2s ease;
}

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

/* WooCommerce swaps the body for its own markup once something is in the cart;
   these keep that markup on-brand. */
.eclat-drawer__body .woocommerce-mini-cart__empty-message { text-align: center; padding: 30px 0; }
.eclat-drawer__body .woocommerce-mini-cart__buttons .button { width: 100%; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   FOOTER — contact labels
   ----------------------------------------------------------------------- */
.eclat-ft-label {
	display: block;
	font-family: var(--wd-font-head);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wd-foot-text);
	opacity: 0.7;
	margin-bottom: 2px;
}

.eclat-ft-wa a { align-items: flex-start; gap: 9px; }
.eclat-ft-wa a > span { display: block; }
.eclat-ft-wa a svg { margin-top: 3px; flex: 0 0 auto; }
.eclat-ft-phone { margin-bottom: 14px; }

/* ==========================================================================
   PHASE 1 — final home refinement
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.2  HERO ARROWS — at the extreme outer edges of the slider container
   ----------------------------------------------------------------------- */
.eclat-hero__stage { overflow: visible; }
.eclat-hero__track { overflow: hidden; }

.eclat-hero__nav {
	width: 46px;
	height: 46px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 8;
}

/* half outside the slider, so they sit on its outer edge */
.eclat-hero__nav--prev { inset-inline-start: -23px; }
.eclat-hero__nav--next { inset-inline-end: -23px; }

.eclat-hero__nav:hover { transform: translateY(-50%) scale(1.06); }

@media (max-width: 1300px) {
	.eclat-hero__nav--prev { inset-inline-start: 8px; }
	.eclat-hero__nav--next { inset-inline-end: 8px; }
}

/* --------------------------------------------------------------------------
   1.3  the static category block belongs to the hero only; the sticky header
   carries the same list as its dropdown once the hero has scrolled away
   ----------------------------------------------------------------------- */
.eclat-hero__side { position: static; float: none; }

/* --------------------------------------------------------------------------
   3.  PRODUCT TABS — desktop carousel with its own arrows
   ----------------------------------------------------------------------- */
.eclat-carousel { position: relative; }

.eclat-carousel .eclat-pgrid {
	display: flex;
	grid-template-columns: none;
	gap: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}

.eclat-carousel .eclat-pgrid::-webkit-scrollbar { display: none; }

/* four across on desktop, matching the demo's grid density */
.eclat-carousel .eclat-pgrid > .eclat-pc {
	flex: 0 0 calc((100% - 60px) / 4);
	max-width: calc((100% - 60px) / 4);
	scroll-snap-align: start;
}

.eclat-carousel__nav {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	z-index: 7;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--wd-line);
	border-radius: 50%;
	color: var(--wd-head);
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	opacity: 0;
	transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease;
}

.eclat-carousel:hover .eclat-carousel__nav { opacity: 1; }
.eclat-carousel__nav:hover { background: var(--wd-accent); border-color: var(--wd-accent); color: #fff; }

.eclat-carousel__nav[disabled] { opacity: 0 !important; pointer-events: none; }
.eclat-carousel__nav--prev { inset-inline-start: -21px; }
.eclat-carousel__nav--next { inset-inline-end: -21px; }
[dir="rtl"] .eclat-carousel__nav svg { transform: scaleX(-1); }

/* nothing to scroll — hide the controls entirely */
.eclat-carousel:not(.is-scrollable) .eclat-carousel__nav { display: none; }

@media (max-width: 1300px) {
	.eclat-carousel__nav--prev { inset-inline-start: 4px; }
	.eclat-carousel__nav--next { inset-inline-end: 4px; }
}

@media (max-width: 1100px) {
	.eclat-carousel .eclat-pgrid > .eclat-pc {
		flex: 0 0 calc((100% - 40px) / 3);
		max-width: calc((100% - 40px) / 3);
	}
}

@media (max-width: 820px) {
	.eclat-carousel .eclat-pgrid {
		gap: 12px;
		margin-inline: calc(var(--wd-gutter) * -1);
		padding-inline: var(--wd-gutter);
	}

	.eclat-carousel .eclat-pgrid > .eclat-pc { flex: 0 0 62%; max-width: 62%; }
	.eclat-carousel__nav { display: none; }
}

@media (max-width: 520px) {
	.eclat-carousel .eclat-pgrid > .eclat-pc { flex: 0 0 74%; max-width: 74%; }
}

/* the staggered entrance belongs to a grid, not a scroller */
.eclat-tabpane.is-active .eclat-pgrid > .eclat-pc { animation: none; }

/* --------------------------------------------------------------------------
   4.3  SPACING — remove the dead white bands, centre the delivery strip
   ----------------------------------------------------------------------- */
.eclat-hero + .eclat-sec,
.eclat-hero + .eclat-sec--tight { padding-top: 26px; }

/* the section that follows the USP strip should not double up on space */
.eclat-sec--tight + .eclat-sec { padding-top: 34px; }

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

.eclat-usp__item {
	justify-content: center;
	text-align: start;
	padding: 22px 18px;
}

.eclat-usp__item > div,
.eclat-usp__item > span:last-child { flex: 0 1 auto; }

/* the showcase band already carries its own padding */
.eclat-showcase + .eclat-sec { padding-top: 46px; }

/* --------------------------------------------------------------------------
   5.1  NEWSLETTER — visually separated block
   ----------------------------------------------------------------------- */
.eclat-news {
	background: #fff;
	border: 1px solid var(--wd-line);
	padding: 40px 30px;
	max-width: 720px;
}

.eclat-news__form { justify-content: center; }

@media (max-width: 600px) {
	.eclat-news { padding: 28px 18px; }
}

/* ==========================================================================
   HERO SIDEBAR — corrective pass
   --------------------------------------------------------------------------
   Diagnosis (scripts/80-diagnose-hero-side.py):

     sidebar box        270 x 528   (stretched to the slider's height)
     natural content    234px       (6 items)
     justify-content    center      -> 294px of dead space, 147px above and
                                       below, so the items floated in the middle
     borders (t/r/b/l)  0/0/1/1     -> only two edges drawn, so the panel never
                                       read as a block and bled into the slider

   Nothing was clipped or squeezed; the breakage was empty space plus a missing
   frame. Fix: start the items at the top, restore the frame on the three edges
   that are not butted against the browse button above, and anchor the last row
   to the bottom so the panel fills its height deliberately.
   ========================================================================== */
.eclat-hero__side {
	justify-content: flex-start;
	background: #fff;
	border: 1px solid var(--wd-line);
	border-top: 0;                 /* continues from the browse button above */
	overflow: hidden;
}

.eclat-hero__side > li { flex: 0 0 auto; }

/* The catch-all row sits at the foot of the panel. It must NOT use
   margin-top: auto — an auto margin swallows the free space that the promo
   tile's flex-grow is meant to absorb, which left a 146px hole between them. */
.eclat-hero__side > li:last-child {
	margin-top: 0;
	border-top: 1px solid var(--wd-line);
}

.eclat-hero__side > li:last-child a { padding-block: 12px; }

.eclat-hero__side-more {
	border-top: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-accent);
}

/* the slider keeps its own hairline so the two panels read as one unit */
.eclat-hero__stage { border: 1px solid var(--wd-line); border-top: 0; border-inline-start: 0; }

/* the promo tile absorbs the space the shorter category list leaves behind */
/* `.eclat-hero__side > li` is (0,2,1) and outranks a lone class, so the growing
   row has to be qualified or it never expands to fill the panel. */
.eclat-hero__side > li.eclat-hero__side-promo {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1px solid var(--wd-line);
	background: #FBF7F4;
	min-height: 0;
}

.eclat-hero__promo {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 20px 22px;
}

.eclat-hero__promo svg { color: var(--wd-accent); margin-bottom: 6px; }

.eclat-hero__promo-t {
	font-family: var(--wd-font-head);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--wd-dark);
}

.eclat-hero__promo-d { font-size: 12.5px; line-height: 1.55; color: var(--wd-soft); max-width: 20ch; }

@media (max-width: 1024px) { .eclat-hero__side-promo { display: none; } }

/* ==========================================================================
   HERO — full width, categories panel overlaid from the header
   --------------------------------------------------------------------------
   The static sidebar inside the hero duplicated the header's own Browse
   Categories dropdown; the two overlapped when the dropdown opened. The
   sidebar is gone. The slider now spans the full container, and the header
   panel floats over it instead of sitting beside it.
   ========================================================================== */
.eclat-hero__wrap {
	display: block;
	max-width: var(--wd-max);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
}

.eclat-hero__stage {
	width: 100%;
	border: 1px solid var(--wd-line);
	border-top: 0;
}

/* the panel is absolutely placed, so opening it never pushes the slider */
.eclat-hd-browse__list {
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.13);
	max-height: 528px;
	overflow-y: auto;
}

/* Home, before any scroll: open by default and floating over the slider */
.eclat-hd-browse.is-pinned .eclat-hd-browse__list { display: block; }
.eclat-hd-browse.is-pinned .eclat-hd-browse__btn svg:last-child { transform: rotate(180deg); }

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

/* once the sticky header engages the panel is a plain dropdown again */
.eclat-header.is-stuck .eclat-hd-browse.is-pinned .eclat-hd-browse__list { display: none; }
.eclat-header.is-stuck .eclat-hd-browse.is-pinned.is-open .eclat-hd-browse__list { display: block; }

/* the panel has no room to overlay a stacked hero on small screens */
@media (max-width: 1024px) {
	.eclat-hd-browse.is-pinned .eclat-hd-browse__list { display: none; }
	.eclat-hd-browse.is-pinned.is-open .eclat-hd-browse__list { display: block; }
}


/* ==========================================================================
   FINAL REFINEMENTS — static departments column, two-row carousel, hover panel
   --------------------------------------------------------------------------
   Supersedes the "full width, categories panel overlaid" block above: the
   departments list is back beside the slider as a permanent, non-collapsing
   column, and the header's Browse button is inert on Home instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A.  HERO — 270px departments column + slider, side by side
   ----------------------------------------------------------------------- */
.eclat-hero__wrap {
	display: grid;
	grid-template-columns: 270px 1fr;
	align-items: stretch;
	max-width: var(--wd-max);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
}

.eclat-hero__stage {
	width: auto;
	border: 1px solid var(--wd-line);
	border-inline-start: 0;
	border-top: 0;
}

.eclat-hero__side {
	display: block;
	position: static;
	float: none;
	margin: 0 !important;      /* The7 puts margin-left: 20px on every ul */
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--wd-line);
	border-top: 0;
}

.eclat-hero__side-all a {
	font-weight: 700;
	color: var(--wd-dark);
	text-transform: uppercase;
	font-size: 12.5px;
	letter-spacing: 0.4px;
}

/* the free-delivery note closes the column, matching the slider's height */
.eclat-hero__side-promo {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 20px;
	border-top: 1px solid var(--wd-line);
	background: var(--wd-alt);
}

.eclat-hero__side-promo svg { color: var(--wd-accent); flex: 0 0 26px; }

.eclat-hero__side-promo strong {
	display: block;
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--wd-dark);
}

.eclat-hero__side-promo em {
	display: block;
	margin-top: 3px;
	font-style: normal;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wd-soft);
}

/* --------------------------------------------------------------------------
   B.  HEADER BROWSE BUTTON — inert on Home, where the hero owns the list
   ----------------------------------------------------------------------- */
.eclat-hd-browse.is-static .eclat-hd-browse__btn { cursor: default; }
.eclat-hd-browse.is-static .eclat-hd-browse__btn svg:last-child { display: none; }
.eclat-hd-browse.is-static .eclat-hd-browse__list { display: none !important; }

/* once the sticky nav engages there is no hero on screen, so the header
   regains the dropdown it would otherwise duplicate */
.eclat-header.is-stuck .eclat-hd-browse.is-static .eclat-hd-browse__btn { cursor: pointer; }

@media (max-width: 1024px) {
	.eclat-hero__wrap { grid-template-columns: 1fr; }
	.eclat-hero__side { display: none; }
	.eclat-hero__stage { border-inline-start: 1px solid var(--wd-line); }
}

/* --------------------------------------------------------------------------
   C.  PRODUCT CAROUSEL — two rows deep, one swipe per page of four
   ----------------------------------------------------------------------- */
.eclat-carousel--rows .eclat-pgrid > .eclat-pcol {
	display: grid;
	grid-template-rows: auto auto;
	gap: 20px;
	flex: 0 0 calc((100% - 60px) / 4);
	max-width: calc((100% - 60px) / 4);
	scroll-snap-align: start;
}

/* the card itself no longer sizes the track; the column does */
.eclat-carousel--rows .eclat-pgrid > .eclat-pcol > .eclat-pc {
	flex: none;
	max-width: none;
	width: 100%;
}

/* the lower card's hover panel must clear the column below it */
.eclat-carousel--rows .eclat-pcol > .eclat-pc:hover { z-index: 6; }

@media (max-width: 1100px) {
	.eclat-carousel--rows .eclat-pgrid > .eclat-pcol {
		flex: 0 0 calc((100% - 40px) / 3);
		max-width: calc((100% - 40px) / 3);
	}
}

@media (max-width: 820px) {
	.eclat-carousel--rows .eclat-pgrid > .eclat-pcol {
		gap: 12px;
		flex: 0 0 62%;
		max-width: 62%;
	}
}

/* --------------------------------------------------------------------------
   D.  CARD HOVER PANEL — slides up from the bottom, quick view + wishlist
   ----------------------------------------------------------------------- */
.eclat-pc__hover {
	padding: 0 10px 10px;          /* measured on the demo */
	transform: translateY(12px);   /* rises into place rather than dropping */
}

.eclat-pc:hover .eclat-pc__hover { transform: translateY(0); }

.eclat-pc__swatches {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 10px 0 8px;
}

.eclat-pc__sw {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--sw, #ddd);
	box-shadow: 0 0 0 1px var(--wd-line) inset;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.eclat-pc__sw:hover { transform: scale(1.15); box-shadow: 0 0 0 1px var(--wd-dark) inset; }

.eclat-pc__desc { text-align: center; margin: 0 0 10px; min-height: 0; }

/* green button centred between the two 35px action squares */
.eclat-pc__row { gap: 6px; }
.eclat-pc__row .eclat-pc__btn { flex: 0 0 126px; justify-content: center; }
.eclat-pc__act { border-radius: 0; }

/* touch: no panel to slide, so the swatches and the extra icons go away */
@media (hover: none), (max-width: 991px) {
	.eclat-pc__hover { transform: none; padding: 8px 0 0; }
	.eclat-pc__swatches { display: none; }
	.eclat-pc__row .eclat-pc__btn { flex: 1 1 auto; }
}


/* --------------------------------------------------------------------------
   E.  ACCENT GREEN — the brand accent is brown (#AE6F4D); the demo's counters
   and the card's primary button are green, and were asked for by hex.
   ----------------------------------------------------------------------- */
:root { --wd-green: #83B735; --wd-green-dk: #74a32d; }

.eclat-hd-badge,
.eclat-hd-cart__count {
	background: var(--wd-green);
	border-radius: 50%;
	top: -8px;
	inset-inline-end: -10px;
	min-width: 19px;
	height: 19px;
	padding: 0;
	line-height: 1;
}

.eclat-pc__row .eclat-pc__btn { background: var(--wd-green); }
.eclat-pc__row .eclat-pc__btn:hover { background: var(--wd-green-dk); }


/* --------------------------------------------------------------------------
   F.  TWO-ROW TRACK — rows must line up across every column
   --------------------------------------------------------------------------
   Wrapping each pair in its own flex item let the second row start wherever
   the first card happened to end, so the columns drifted apart by a few px.
   The track itself becomes the grid instead: `grid-auto-flow: column` with two
   template rows aligns every card in the row band, and the wrappers step out
   of the box tree with `display: contents`.
   ----------------------------------------------------------------------- */
.eclat-carousel--rows .eclat-pgrid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 60px) / 4);
	grid-template-rows: auto auto;
	align-items: start;
	gap: 20px;
}

.eclat-carousel--rows .eclat-pgrid > .eclat-pcol { display: contents; }

.eclat-carousel--rows .eclat-pgrid .eclat-pc {
	flex: none;
	max-width: none;
	width: 100%;
	scroll-snap-align: start;
}

@media (max-width: 1100px) {
	.eclat-carousel--rows .eclat-pgrid { grid-auto-columns: calc((100% - 40px) / 3); }
}

@media (max-width: 820px) {
	.eclat-carousel--rows .eclat-pgrid { gap: 12px; grid-auto-columns: 62%; }
}

/* --------------------------------------------------------------------------
   G.  PRIMARY BUTTON — 126 x 36 including its padding
   ----------------------------------------------------------------------- */
.eclat-pc__row .eclat-pc__btn {
	box-sizing: border-box;
	flex: 0 0 126px;
	width: 126px;
	padding: 0 10px;
}

/* --------------------------------------------------------------------------
   H.  LANGUAGE MENU — one language per line
   --------------------------------------------------------------------------
   Polylang's markup inherits an inline-block `li` from The7, which turned the
   max-content list into a 304px horizontal strip. Force the stack back.
   ----------------------------------------------------------------------- */
.eclat-hd-lang__list { display: block; }
.eclat-hd-lang__list li { display: block; width: 100%; }


/* ==========================================================================
   REFINEMENTS 7 + 8
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.  BLOG DATE BADGE — square white chip inside the thumbnail's top corner
   --------------------------------------------------------------------------
   Measured on the demo (`.wd-post-date.wd-style-with-bg`): 53x53, absolutely
   placed 15px in from the top and the inline start, white on #333, no radius,
   day at 22px over an uppercase month. It sat 14px *outside* the image before,
   which is what made it read as flat and detached.
   ----------------------------------------------------------------------- */
.eclat-postcard__img { overflow: hidden; position: relative; }

.eclat-postcard__date {
	position: absolute;
	box-sizing: border-box;   /* 53x53 including the 7px padding, as on the demo */
	top: 15px;
	inset-inline-start: 15px;
	inset-inline-end: auto;
	z-index: 3;
	width: 53px;
	min-width: 53px;      /* an earlier generation left min-width: 54px behind */
	max-width: 53px;
	height: 53px;
	padding: 7px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--wd-head);
	border-radius: 0;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	line-height: 1;
	text-align: center;
}

.eclat-postcard__day {
	display: block;
	font-family: var(--wd-font-head);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	color: var(--wd-head);
}

.eclat-postcard__mon {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 1;
	color: var(--wd-soft);
}

/* the category tag keeps the opposite corner to itself */
.eclat-postcard__tag { inset-inline-end: 15px; inset-inline-start: auto; }

/* --------------------------------------------------------------------------
   8.  BRAND CAROUSEL — logos only, slow drift, drag, arrows
   ----------------------------------------------------------------------- */
.eclat-brands-wrap { position: relative; }

.eclat-brands {
	display: block;
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	touch-action: pan-y;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.eclat-brands::-webkit-scrollbar { display: none; }
.eclat-brands.is-dragging { cursor: grabbing; }
.eclat-brands:focus-visible { outline: 2px solid var(--wd-accent); outline-offset: 3px; }

/* the keyframe marquee is replaced by the scroll-driven one */
.eclat-brands__track {
	display: flex;
	align-items: center;
	gap: 0;
	width: max-content;
	animation: none !important;
	user-select: none;
}

.eclat-brand__name {
	display: block;
	line-height: 1.15;
	font-family: var(--wd-font-head);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.2px;
}

/* the Arabic descriptor under each name is gone */
.eclat-brand__kind { display: none; }

.eclat-brands__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--wd-line);
	border-radius: 50%;
	color: var(--wd-head);
	cursor: pointer;
	opacity: 0;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
	transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease;
}

.eclat-brands-wrap:hover .eclat-brands__nav,
.eclat-brands-wrap:focus-within .eclat-brands__nav { opacity: 1; }

.eclat-brands__nav:hover { background: var(--wd-accent); border-color: var(--wd-accent); color: #fff; }
.eclat-brands__nav--prev { inset-inline-start: -6px; }
.eclat-brands__nav--next { inset-inline-end: -6px; }
[dir="rtl"] .eclat-brands__nav svg { transform: scaleX(-1); }

/* the drift is JS-driven now, so reduced-motion only needs to stop the arrows
   from animating; the script itself respects the preference */
@media (prefers-reduced-motion: reduce) {
	.eclat-brands { -webkit-mask-image: none; mask-image: none; }
}


/* ==========================================================================
   REFINEMENTS 9 + 10
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.  NEWSLETTER — full-bleed band, button exactly as tall as the field
   --------------------------------------------------------------------------
   The shortcode sits inside a 1222px container, so the band is pulled out to
   the viewport edges here rather than by rewriting the page content.
   ----------------------------------------------------------------------- */
.eclat-news {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	padding: 58px var(--wd-gutter) 62px;
	box-sizing: border-box;
	text-align: center;
}

.eclat-news__form {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	max-width: 520px;
	margin-inline: auto;
}

.eclat-news__input,
.eclat-news__form .eclat-btn {
	height: 48px;
	min-height: 48px;
	box-sizing: border-box;
	border-radius: 0;
	align-self: stretch;
}

.eclat-news__input { flex: 1 1 auto; min-width: 0; }

.eclat-news__form .eclat-btn {
	flex: 0 0 auto;
	min-width: 130px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 26px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   10. PROMO BANDS — rebuilt from the Woodmart landing demo
   --------------------------------------------------------------------------
   Measured on woodmart.xtemos.com/landing/: row padding 150px 0, background
   rgb(10,10,10), heading 48px/300 weight/58px line-height in white, body copy
   16px/26px at 80% white, and two 42px buttons — one solid #F3F3F3 with #3E3E3E
   text, one bordered 2px rgba(255,255,255,.5).
   ----------------------------------------------------------------------- */
.eclat-bands {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.eclat-band {
	padding: 150px var(--wd-gutter);
	overflow: hidden;
}

.eclat-band--light { background: #F3F3F3; }
.eclat-band--dark  { background: #0A0A0A; }

.eclat-band__inner {
	max-width: var(--wd-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 456px) minmax(0, 1fr);
	align-items: center;
	gap: 60px;
}

.eclat-band--flip .eclat-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 456px); }
.eclat-band--flip .eclat-band__copy  { order: 2; }
.eclat-band--flip .eclat-band__media { order: 1; }

.eclat-band__label {
	display: block;
	margin-bottom: 14px;
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wd-accent);
}

.eclat-band__title {
	margin: 0 0 18px;
	font-family: var(--wd-font-head);
	font-size: 48px;
	font-weight: 300;
	line-height: 58px;
	color: var(--wd-head);
}

.eclat-band__text {
	margin: 0 0 30px;
	font-size: 16px;
	line-height: 26px;
	color: var(--wd-text);
	max-width: 46ch;
}

.eclat-band--dark .eclat-band__title { color: #fff; }
.eclat-band--dark .eclat-band__text  { color: rgba(255, 255, 255, 0.8); }

.eclat-band__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.eclat-band__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background: #F3F3F3;
	color: #3E3E3E;
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

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

.eclat-band__btn--ghost {
	background: transparent;
	border: 2px solid rgba(0, 0, 0, 0.35);
	color: var(--wd-head);
}

.eclat-band--dark .eclat-band__btn--ghost {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

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

[dir="rtl"] .eclat-band__btn svg { transform: scaleX(-1); }

/* the cut-out drifts gently, with a soft pool of light behind it */
.eclat-band__media { position: relative; display: flex; justify-content: center; }

.eclat-band__media img {
	position: relative;
	z-index: 2;
	max-width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: contain;
	animation: eclat-band-float 7s ease-in-out infinite;
	filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.28));
}

.eclat-band__glow {
	position: absolute;
	z-index: 1;
	inset: 50% auto auto 50%;
	width: 460px;
	height: 460px;
	max-width: 90%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(174, 111, 77, 0.30) 0%, rgba(174, 111, 77, 0) 68%);
	pointer-events: none;
}

.eclat-band--dark .eclat-band__glow {
	background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 68%);
}

@keyframes eclat-band-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-16px); }
}

/* fluid entrance, one step behind for the media column */
.eclat-band__copy,
.eclat-band__media {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eclat-band__media { transition-delay: 0.12s; }

.eclat-band.is-in .eclat-band__copy,
.eclat-band.is-in .eclat-band__media { opacity: 1; transform: none; }

@media (max-width: 1024px) {
	.eclat-band { padding: 90px var(--wd-gutter); }
	.eclat-band__inner,
	.eclat-band--flip .eclat-band__inner { grid-template-columns: 1fr; gap: 34px; }
	.eclat-band--flip .eclat-band__copy  { order: 1; }
	.eclat-band--flip .eclat-band__media { order: 2; }
	.eclat-band__title { font-size: 34px; line-height: 42px; }
	.eclat-band__media img { max-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
	.eclat-band__media img { animation: none; }
	.eclat-band__copy,
	.eclat-band__media { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   REFINEMENTS 11 + 12 — footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   11. CONTACT — icon then text on one line, 10px apart (demo: flex/center/10px)
   ----------------------------------------------------------------------- */
.eclat-ft-contact {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.eclat-ft-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.eclat-ft-contact__ico {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	margin-top: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wd-accent);
}

.eclat-ft-contact__t,
.eclat-ft-contact .eclat-ft-address {
	flex: 1 1 auto;
	margin: 0;
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
}

.eclat-ft-contact .eclat-ft-label { display: block; }

/* --------------------------------------------------------------------------
   11. RECENT POSTS — 75x65 thumb, 15px title, 13.5px date (all from the demo)
   ----------------------------------------------------------------------- */
.eclat-ft-posts {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.eclat-ft-post { display: flex; gap: 15px; margin: 0; align-items: flex-start; }

.eclat-ft-post__thumb {
	flex: 0 0 75px;
	width: 75px;
	height: 65px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
}

.eclat-ft-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.eclat-ft-post:hover .eclat-ft-post__thumb img { transform: scale(1.06); }

.eclat-ft-post__body { flex: 1 1 auto; min-width: 0; }

.eclat-ft-post__title {
	display: block;
	font-family: var(--wd-font-head);
	font-size: 15px;
	line-height: 1.45;
	color: inherit;
}

.eclat-ft-post__title:hover { color: var(--wd-accent); }

.eclat-ft-post__date {
	display: block;
	margin-top: 5px;
	font-size: 13.5px;
	color: #A5A5A5;
}

/* --------------------------------------------------------------------------
   12. SOCIAL ICONS — the "follow us" label is gone, so the row carries the gap
   ----------------------------------------------------------------------- */
.eclat-ft-follow { display: none; }
.eclat-ft-social { margin-top: 22px; }

/* The7 styles h3 with its own line-height (1.5), which beat the single-class
   rule above and stretched the band heading to 72px. */
.eclat-band .eclat-band__title { line-height: 58px; }

@media (max-width: 1024px) {
	.eclat-band .eclat-band__title { line-height: 42px; }
}

/* --------------------------------------------------------------------------
   FOOTER — column widths and the mobile accordion, after the rebuild
   --------------------------------------------------------------------------
   The recent-posts column carries a thumbnail plus a two-line title, so it
   needs about as much room as the brand column; the two plain link lists can
   give it back. The accordion also had to learn the two new list classes —
   `.eclat-ft-address` now lives *inside* `.eclat-ft-contact`, so collapsing the
   old selector hid the address text while leaving its icon behind.
   ----------------------------------------------------------------------- */
.eclat-ft-grid { grid-template-columns: 1.5fr 0.85fr 0.85fr 1.5fr 1.25fr; }

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

@media (max-width: 700px) {
	.eclat-ft-col .eclat-ft-contact,
	.eclat-ft-col .eclat-ft-posts {
		overflow: hidden;
		max-height: 620px;
		opacity: 1;
		transition: max-height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.24s ease;
	}

	.eclat-ft-col.is-collapsed .eclat-ft-contact,
	.eclat-ft-col.is-collapsed .eclat-ft-posts {
		max-height: 0;
		opacity: 0;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	/* the address is nested now, so it must not be collapsed on its own */
	.eclat-ft-col .eclat-ft-contact .eclat-ft-address,
	.eclat-ft-col.is-collapsed .eclat-ft-contact .eclat-ft-address {
		max-height: none;
		opacity: 1;
		display: block;
	}
}

/* The demo's solid band button is light because its row is near-black. On the
   light row that same fill disappears into the background, so it inverts. */
.eclat-band--light .eclat-band__btn {
	background: var(--wd-head);
	color: #fff;
}

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

/* Arabic month names are words, not three-letter codes: the demo's uppercase
   letter-spacing squeezes them, so RTL gets plain type at a smaller size. */
[dir="rtl"] .eclat-postcard__mon {
	letter-spacing: 0;
	text-transform: none;
	font-size: 10px;
}


/* ==========================================================================
   HEADER — relocated shipping line, resized icons, cart subtotal
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.  FREE DELIVERY — sits in the nav tier, right after Browse Categories
   ----------------------------------------------------------------------- */
.eclat-hd-ship {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-inline-start: 26px;
	font-size: 13px;
	line-height: 1.2;
	color: var(--wd-soft);
	white-space: nowrap;
}

.eclat-hd-ship svg { color: var(--wd-accent); flex: 0 0 18px; }

/* the menu keeps the remaining room, so the line never pushes it off-centre */
.eclat-hd-nav .eclat-hd-menu { margin-inline-start: auto; }

@media (max-width: 1200px) { .eclat-hd-ship { display: none; } }

/* --------------------------------------------------------------------------
   3.  HEADER ICONS — larger, further apart, with the live cart subtotal
   ----------------------------------------------------------------------- */
.eclat-hd-actions { gap: 26px; }
.eclat-hd-act svg { stroke-width: 1.2; }

.eclat-hd-cart {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

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

/* the amount follows the icon inline, so RTL puts it on the icon's left */
.eclat-hd-cart__total {
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--wd-head);
	white-space: nowrap;
}

.eclat-hd-cart__total .amount,
.eclat-hd-cart__total bdi { color: inherit; font: inherit; }

/* WooCommerce prints a "from" / range wrapper on some setups — keep one line */
.eclat-hd-cart__total del,
.eclat-hd-cart__total ins { display: none; }

/* --------------------------------------------------------------------------
   7.  INFO BOXES — every box centred, so the wrapped lines stay balanced
   ----------------------------------------------------------------------- */
.eclat-usp__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	text-align: center;
	padding: 26px 18px;
}

.eclat-usp__item > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.eclat-usp__t,
.eclat-usp__d {
	display: block;
	text-align: center;
	max-width: 22ch;
	margin-inline: auto;
}

.eclat-usp__d { line-height: 1.55; }

/* equal columns, so a longer subtitle cannot widen its own box */
.eclat-usp {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
}

@media (max-width: 900px) {
	.eclat-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.eclat-usp { grid-template-columns: 1fr; }
}


/* ==========================================================================
   REFINEMENTS 8 + 9
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.  SECOND-ROW HOVER — the panel was being clipped by the scroll container
   --------------------------------------------------------------------------
   The track needs `overflow-y: hidden` for horizontal scrolling to work, which
   also cut off anything hanging below it. The first row's panel opened into the
   second row's space and survived; the second row's had nowhere to go. Reserving
   the panel's height as bottom padding puts that space *inside* the scroll box,
   and a matching negative margin keeps the section's rhythm unchanged.
   ----------------------------------------------------------------------- */
.eclat-carousel--rows .eclat-pgrid {
	padding-bottom: 132px;
	margin-bottom: -118px;
}

/* both rows paint above the section that follows them */
.eclat-carousel--rows .eclat-pgrid .eclat-pc:hover { z-index: 7; }
.eclat-carousel--rows { position: relative; z-index: 2; }

@media (hover: none), (max-width: 991px) {
	.eclat-carousel--rows .eclat-pgrid { padding-bottom: 4px; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   9.  LATEST NEWS — the same carousel shell as the product tabs
   ----------------------------------------------------------------------- */
.eclat-carousel--posts .eclat-posts {
	display: flex;
	grid-template-columns: none;
	gap: 30px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}

.eclat-carousel--posts .eclat-posts::-webkit-scrollbar { display: none; }

.eclat-carousel--posts .eclat-postcard {
	flex: 0 0 calc((100% - 60px) / 3);
	max-width: calc((100% - 60px) / 3);
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.eclat-carousel--posts .eclat-postcard {
		flex: 0 0 calc((100% - 20px) / 2);
		max-width: calc((100% - 20px) / 2);
	}
	.eclat-carousel--posts .eclat-posts { gap: 20px; }
}

@media (max-width: 700px) {
	.eclat-carousel--posts .eclat-postcard { flex: 0 0 82%; max-width: 82%; }
	.eclat-carousel--posts .eclat-carousel__nav { display: none; }
}


/* ==========================================================================
   5.  COLOUR AUDIT — parent-theme defaults that were leaking through
   --------------------------------------------------------------------------
   The7 paints body copy #8B8D94 and its form fields #FDFDFD. Both were showing
   up inside our sections, one shade off the design system. These set the
   inherited colour explicitly at each wrapper so nothing falls back again.
   ========================================================================== */
.eclat-usp,
.eclat-usp__item,
.eclat-pc,
.eclat-pc__media,
.eclat-pc__body,
.eclat-postcard,
.eclat-cat,
.eclat-band__inner,
.eclat-news { color: var(--wd-text); }

.eclat-usp__t { color: var(--wd-head); }
.eclat-usp__d { color: var(--wd-text); }

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

.eclat-news__input::placeholder { color: var(--wd-soft); }

/* stars use the gold token rather than a loose hex */
.eclat-pc__stars { color: var(--wd-gold); }

/* every accent-coloured control shares one hover state */
.eclat-btn--primary:hover,
.eclat-banner__link:hover,
.eclat-postcard__more:hover,
.eclat-cat__link:hover { color: var(--wd-accent-dk); }

/* The7 targets the input by attribute selector, which outranked the class. */
.eclat-news .eclat-news__form input.eclat-news__input,
.eclat-news .eclat-news__form input[type="email"] {
	background: #fff;
	color: var(--wd-head);
	border-color: var(--wd-line);
}


/* --------------------------------------------------------------------------
   6.  DEPARTMENTS COLUMN — fills the slider's height now the extra row is gone
   --------------------------------------------------------------------------
   Deleting the "all categories" row left the column shorter than the slider,
   with a strip of empty border below the promo. Laying it out as a column and
   pushing the promo to the end closes that gap at any list length.
   ----------------------------------------------------------------------- */
.eclat-hero__side {
	display: flex;
	flex-direction: column;
}

.eclat-hero__side li { flex: 0 0 auto; }
.eclat-hero__side-promo { margin-top: auto; }

/* The flex rule above is later in the cascade than the stacked-hero media
   block, so the column has to be hidden again for small screens. */
@media (max-width: 1024px) {
	.eclat-hero__side { display: none; }
}


/* ==========================================================================
   MOBILE OVERHAUL
   ========================================================================== */

/* --------------------------------------------------------------------------
   0.  THE OFF-CENTRE BUG BEHIND MOST OF THE MOBILE MESS
   --------------------------------------------------------------------------
   `.eclat-wrap` is `width: 100%` with `padding-inline: var(--wd-gutter)` but was
   inheriting content-box sizing, so every section wrapper measured
   viewport + 36px. `margin-inline: auto` cannot centre an over-wide block: in
   RTL the whole column resolved to margin-left -36px and slid 18px off the
   left edge, taking the USP strip, the category tiles and the post grid with
   it, and leaving the full-bleed bands with 0px on one side and 36px on the
   other. Border-box sizing is the actual fix; the rules below are then free to
   do their own job instead of compensating for this.
   ----------------------------------------------------------------------- */
.eclat-wrap,
.eclat-sec,
.eclat-band,
.eclat-band__inner,
.eclat-news { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   5.  GLOBAL — no accidental horizontal scroll, images never exceed their box
   ----------------------------------------------------------------------- */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

img,
video,
svg.eclat-fluid { max-width: 100%; height: auto; }

/* the intentional scrollers keep their own axis */
.eclat-brands,
.eclat-pgrid,
.eclat-posts,
.eclat-quotes__track,
.eclat-showcase__track { max-width: none; }

@media (max-width: 768px) {

	/* ----------------------------------------------------------------------
	   1.  EQUAL CARD HEIGHTS
	   ----------------------------------------------------------------------
	   The card becomes a column, the body grows into whatever height the row
	   settles on, and the block that ends the card is pushed to the bottom with
	   `margin-top: auto`. Titles of any length then leave price, rating and the
	   action row on one line across the whole row.
	   ------------------------------------------------------------------- */
	.eclat-pgrid > .eclat-pc,
	.eclat-pcol > .eclat-pc,
	.eclat-products .product,
	.eclat-pc {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.eclat-pcol { align-items: stretch; }

	.eclat-pc__media { flex: 0 0 auto; }

	.eclat-pc__body {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	/* everything from the price down is the card's foot */
	.eclat-pc__price { margin-top: auto; }

	/* blog cards do the same, with "read more" as the foot */
	.eclat-postcard {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.eclat-postcard__img { flex: 0 0 auto; }

	.eclat-postcard__body {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.eclat-postcard__more { margin-top: auto; }

	/* ----------------------------------------------------------------------
	   2.  CAROUSEL SIZING — exactly two cards, snapping to the card edge
	   ------------------------------------------------------------------- */
	.eclat-carousel .eclat-pgrid,
	.eclat-carousel--rows .eclat-pgrid,
	.eclat-carousel--posts .eclat-posts {
		gap: 12px;
		margin-inline: 0;
		padding-inline: 0;
		scroll-padding-inline-start: 0;
	}

	.eclat-carousel .eclat-pgrid > .eclat-pc,
	.eclat-carousel--posts .eclat-postcard {
		flex: 0 0 calc((100% - 12px) / 2);
		max-width: calc((100% - 12px) / 2);
		scroll-snap-align: start;
	}

	.eclat-carousel--rows .eclat-pgrid {
		grid-auto-columns: calc((100% - 12px) / 2);
	}

	.eclat-carousel--rows .eclat-pgrid .eclat-pc { scroll-snap-align: start; }

	/* ----------------------------------------------------------------------
	   3.  SPACING — nothing touches the screen edge
	   ------------------------------------------------------------------- */
	.eclat-band { padding: 56px 0; }

	.eclat-band__inner {
		padding-inline: 15px;
		gap: 26px;
	}

	.eclat-news {
		padding: 44px 15px 46px;
	}

	.eclat-news__form { max-width: 100%; }

	.eclat-usp,
	.eclat-cats,
	.eclat-banners,
	.eclat-quotes { padding-inline: 0; }

	/* ----------------------------------------------------------------------
	   4.  FOOTER — the toggle spans its column so the sign sits on the far edge
	   ------------------------------------------------------------------- */
	.eclat-ft-title { display: block; width: 100%; }

	.eclat-ft-acc {
		width: 100%;
		min-height: 48px;
		padding-block: 14px;
		text-align: start;
	}

	.eclat-ft-acc__ico { margin-inline-start: auto; }

	/* comfortable touch targets throughout */
	.eclat-footer a,
	.eclat-hd-mobile a,
	.eclat-ft-links a,
	.eclat-hd-mobile__list a,
	.eclat-hd-mobile__cats a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.eclat-ft-social a,
	.eclat-ft-post__thumb,
	.eclat-ft-copy a,
	.eclat-ft-contact a { display: inline-flex; min-height: 0; }

	.eclat-ft-social a { width: 40px; height: 40px; justify-content: center; }

	.eclat-hd-burger,
	.eclat-hd-act { min-width: 44px; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   2b. UNDER 480px — one full card and a clean peek of the next
   ----------------------------------------------------------------------- */
@media (max-width: 479px) {
	.eclat-carousel .eclat-pgrid > .eclat-pc,
	.eclat-carousel--posts .eclat-postcard {
		flex: 0 0 82%;
		max-width: 82%;
	}

	.eclat-carousel--rows .eclat-pgrid { grid-auto-columns: 82%; }

	/* 3b. the newsletter stacks rather than squeezing */
	.eclat-news__form {
		flex-direction: column;
		gap: 10px;
	}

	.eclat-news__input,
	.eclat-news__form .eclat-btn {
		width: 100%;
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   MOBILE OVERHAUL — second pass
   ----------------------------------------------------------------------- */

/* The footer grid was left on a three-track layout below 1100px by the column
   rebalance in the previous round, which squeezed every phone column to ~73px
   and took the accordion toggle down with it. One track per row on a phone. */
@media (max-width: 768px) {
	.eclat-ft-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.eclat-ft-col { width: 100%; }
	.eclat-ft-title { width: 100%; }
	.eclat-ft-acc { width: 100%; }

	/* social buttons are controls, not inline text, so they get a full target */
	.eclat-ft-social a { width: 44px; height: 44px; min-height: 44px; }

	/* the tracks must stretch, or `height: 100%` on the cards has nothing to
	   measure against and the rows stay ragged */
	.eclat-carousel .eclat-pgrid,
	.eclat-carousel--rows .eclat-pgrid,
	.eclat-carousel--posts .eclat-posts { align-items: stretch; }

	.eclat-carousel--rows .eclat-pgrid > .eclat-pcol { align-items: stretch; }
}

/* --------------------------------------------------------------------------
   MOBILE OVERHAUL — third pass: the equal-height rule was fighting itself
   --------------------------------------------------------------------------
   `height: 100%` on a flex item cancels `align-items: stretch` — an item with a
   non-auto height is never stretched — and against a track whose own height is
   indefinite the percentage resolved to the card's content height. So every
   card kept its natural height and the rows stayed ragged. Letting the height
   stay auto and stretching from the track is what actually equalises them;
   `min-height: 100%` keeps the intent for any track that does have a height.
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
	.eclat-pgrid > .eclat-pc,
	.eclat-pcol > .eclat-pc,
	.eclat-products .product,
	.eclat-pc,
	.eclat-postcard {
		height: auto;
		min-height: 100%;
		align-self: stretch;
	}
}

/* Both rows of the product carousel share one height on mobile: `auto` tracks
   each size to their own content, `1fr` tracks match the tallest. */
@media (max-width: 768px) {
	.eclat-carousel--rows .eclat-pgrid { grid-template-rows: repeat(2, 1fr); }
}

/* The phone and WhatsApp links are primary actions on a phone, so they get a
   full target. The copyright credit stays inline — it sits mid-sentence and a
   44px box there would break the line. */
@media (max-width: 768px) {
	.eclat-ft-contact a,
	.eclat-ft-wa a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* The accordion only exists below 700px (the JS uses the same breakpoint), so
   its touch sizing must stop there too — otherwise tablet footer titles carry
   48px of accordion padding while behaving as plain headings. */
@media (min-width: 701px) and (max-width: 768px) {
	.eclat-ft-acc { min-height: 0; padding-block: 0; }
}

/* ==========================================================================
   360 SWEEP — UI POLISH
   ========================================================================== */

/* --------------------------------------------------------------------------
   A11Y / SEO — the page's single H1 is read, not seen
   ----------------------------------------------------------------------- */
.eclat-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SECTION RHYTHM — one scale instead of five ad-hoc pairs
   --------------------------------------------------------------------------
   The audit found 26/30, 30/30, 34/42, 42/42 and 46/42 in use at the same
   breakpoint: sections were breathing unevenly and the seams showed. Padding is
   now symmetric and driven by one token per breakpoint.
   ----------------------------------------------------------------------- */
:root { --wd-sec-pad: 56px; --wd-sec-pad-tight: 30px; }

.eclat-sec { padding-block: var(--wd-sec-pad); }
.eclat-sec--tight { padding-block: var(--wd-sec-pad-tight); }

@media (max-width: 1024px) { :root { --wd-sec-pad: 44px; --wd-sec-pad-tight: 26px; } }
@media (max-width: 768px)  { :root { --wd-sec-pad: 38px; --wd-sec-pad-tight: 24px; } }

/* --------------------------------------------------------------------------
   TYPOGRAPHY — line heights land on whole pixels
   --------------------------------------------------------------------------
   The info boxes were computing 24.975px and 20.15px from unitless multipliers,
   which puts text on half-pixels and softens it on non-retina screens.
   ----------------------------------------------------------------------- */
.eclat-usp__t { font-size: 14px; line-height: 22px; }
.eclat-usp__d { font-size: 13px; line-height: 20px; }
.eclat-pc__title { line-height: 22px; }
.eclat-postcard__title { line-height: 28px; }

/* Arabic sits lower on the line than Latin; a touch more leading stops the
   descenders in ج/ع from crowding the row beneath. */
[dir="rtl"] .eclat-pc__title,
[dir="rtl"] .eclat-postcard__title { line-height: 1.65; }

/* no orphaned single words at the end of a heading */
.eclat-sechead__title,
.eclat-band__title,
.eclat-postcard__title { text-wrap: balance; }

.eclat-sechead__sub,
.eclat-band__text { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   MICRO-INTERACTIONS — one easing curve, one shadow ramp
   --------------------------------------------------------------------------
   Everything was on the browser default `ease`, which reads cheap: it decelerates
   too early. These two curves are the Woodmart feel — a quick start and a long,
   soft settle — and the shadows step rather than jump.
   ----------------------------------------------------------------------- */
:root {
	--wd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--wd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--wd-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.05);
	--wd-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.09);
	--wd-shadow-3: 0 18px 46px rgba(0, 0, 0, 0.13);
}

.eclat-btn,
.eclat-pc__btn,
.eclat-band__btn,
.eclat-pc__act,
.eclat-carousel__nav,
.eclat-brands__nav,
.eclat-hd-act,
.eclat-postcard__more,
.eclat-cat,
.eclat-usp__item {
	transition-timing-function: var(--wd-ease);
	transition-duration: 0.28s;
}

.eclat-pc,
.eclat-postcard,
.eclat-cat,
.eclat-band__media img {
	transition-timing-function: var(--wd-ease-out);
}

/* the lift on hover is a shadow step, not a jump */
.eclat-pc:hover { box-shadow: var(--wd-shadow-2); }
.eclat-cat:hover { box-shadow: var(--wd-shadow-2); }
.eclat-postcard:hover .eclat-postcard__img { box-shadow: var(--wd-shadow-1); }
.eclat-carousel__nav:hover,
.eclat-brands__nav:hover { box-shadow: var(--wd-shadow-3); }

/* buttons settle a pixel rather than flashing a new colour */
.eclat-btn--primary:hover,
.eclat-pc__btn:hover,
.eclat-band__btn:hover { transform: translateY(-1px); }

.eclat-btn--primary:active,
.eclat-pc__btn:active,
.eclat-band__btn:active { transform: translateY(0); transition-duration: 0.08s; }

/* a visible, on-brand focus ring — keyboard users get the same polish */
.eclat-btn:focus-visible,
.eclat-pc__btn:focus-visible,
.eclat-band__btn:focus-visible,
.eclat-hd-act:focus-visible,
.eclat-carousel__nav:focus-visible,
.eclat-brands__nav:focus-visible,
.eclat-news__input:focus-visible {
	outline: 2px solid var(--wd-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.eclat-btn--primary:hover,
	.eclat-pc__btn:hover,
	.eclat-band__btn:hover { transform: none; }
}

/* Two adjacency rules from an earlier generation set only `padding-top`
   (34px and 46px), which is what left sections with 34/38 and 46/38 pairs. They
   now defer to the same token as everything else, so top always equals bottom. */
.eclat-sec--tight + .eclat-sec,
.eclat-showcase + .eclat-sec { padding-top: var(--wd-sec-pad); }

/* --------------------------------------------------------------------------
   SMALL PHONES (<=360px) — the header action row was 66px wider than the screen
   ----------------------------------------------------------------------- */
@media (max-width: 360px) {
	.eclat-hd-actions { gap: 12px; }
	.eclat-hd-act--icon { display: none; }        /* wishlist + compare fold away */
	.eclat-hd-cart__total { font-size: 12px; }
	.eclat-hd-act svg { width: 22px; height: 22px; }
	.eclat-hd-burger { min-width: 40px; }
}

/* The USP strip sits directly under the hero and had its own 26px top, leaving
   26/30 on desktop and 26/24 on mobile. It keeps a deliberately tighter gap to
   the slider, but symmetric — the token, halved. */
.eclat-hero + .eclat-sec,
.eclat-hero + .eclat-sec--tight {
	padding-top: var(--wd-sec-pad-tight);
	padding-bottom: var(--wd-sec-pad-tight);
}


/* ==========================================================================
   MOBILE — GRIDS INSTEAD OF PEEK-CAROUSELS
   --------------------------------------------------------------------------
   Measured at 375px: the track is 339px wide and each card was 82% of it, so
   a 278px card sat in the middle with a 61px sliver of its neighbour showing on
   both sides — the "1.5 cards" that kept reading as broken. Two rows of that
   made the products section 947px tall to show two products.

   Below 769px the carousels become plain grids: nothing to swipe, nothing to
   half-show, every card the same width and the same height as its row-mate.
   Desktop is untouched — every rule here is inside a mobile media query.
   ========================================================================== */
@media (max-width: 768px) {

	/* ---- featured products: two clean columns ------------------------- */
	.eclat-carousel--rows .eclat-pgrid,
	.eclat-carousel .eclat-pgrid {
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-columns: auto;
		grid-template-rows: auto;
		gap: 12px;
		overflow: visible;
		scroll-snap-type: none;
		padding-bottom: 0;
		margin-bottom: 0;
		margin-inline: 0;
		padding-inline: 0;
	}

	.eclat-carousel--rows .eclat-pgrid > .eclat-pcol { display: contents; }

	.eclat-carousel .eclat-pgrid > .eclat-pc,
	.eclat-carousel--rows .eclat-pgrid .eclat-pc {
		flex: none;
		width: auto;
		max-width: none;
		min-width: 0;
		scroll-snap-align: none;
	}

	/* ---- latest news: one column, then two once there is room --------- */
	.eclat-carousel--posts .eclat-posts {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		overflow: visible;
		scroll-snap-type: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	.eclat-carousel--posts .eclat-postcard {
		flex: none;
		width: auto;
		max-width: none;
		min-width: 0;
		scroll-snap-align: none;
	}

	/* nothing scrolls any more, so the arrows would be dead controls */
	.eclat-carousel__nav { display: none !important; }

	/* ---- card scale for a ~160px column ------------------------------- */
	.eclat-pc__body { padding-inline: 8px; }
	.eclat-pc__title { font-size: 13.5px; line-height: 19px; }
	.eclat-pc__cat { font-size: 11px; }
	.eclat-pc__price { font-size: 15px; }
	.eclat-pc__stars { font-size: 11px; }

	.eclat-pc__badge {
		font-size: 10px;
		padding: 4px 8px;
		inset-block-start: 8px;
	}

	.eclat-pc__row .eclat-pc__btn {
		width: 100%;
		flex: 1 1 auto;
		min-width: 0;
		height: 38px;
		font-size: 11.5px;
		padding-inline: 6px;
	}

	.eclat-pc__hover { padding-inline: 8px; }
}

@media (min-width: 480px) and (max-width: 768px) {
	.eclat-carousel--posts .eclat-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

/* --------------------------------------------------------------------------
   MOBILE — equal heights inside the new grids
   --------------------------------------------------------------------------
   Grid items stretch by default, so the cards match their row-mate as long as
   nothing pins an explicit height. `height: auto` keeps that true; the flex
   column plus `margin-top: auto` on the price block keeps the button on the
   floor of every card.
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
	.eclat-pgrid .eclat-pc,
	.eclat-posts .eclat-postcard {
		height: auto;
		min-height: 0;
		align-self: stretch;
		display: flex;
		flex-direction: column;
	}

	.eclat-pc__body,
	.eclat-postcard__body { flex: 1 1 auto; display: flex; flex-direction: column; }
	.eclat-pc__price { margin-top: auto; }
	.eclat-postcard__more { margin-top: auto; }
}

/* --------------------------------------------------------------------------
   MOBILE — hero breathes at phone width
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
	.eclat-hero__price { font-size: 24px; }
	.eclat-hero__title { font-size: 26px; line-height: 34px; }
	.eclat-hero__text { font-size: 14px; line-height: 22px; }
	.eclat-hero__cta .eclat-btn { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   MOBILE — badge and image box
   --------------------------------------------------------------------------
   The badge is a 40px circle on desktop, but "جديد" is wider than 40px: the
   flex box grew sideways while `border-radius: 50%` kept turning that into an
   ellipse, so every card wore a brown oval. At this size it becomes a small
   rounded chip sized to its text. The media box also gets a fixed square ratio
   so cut-outs of different proportions occupy the same area and the grid rows
   stop looking ragged.
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
	.eclat-pc__badge {
		width: auto;
		height: auto;
		min-width: 0;
		border-radius: 2px;
		padding: 4px 8px;
		font-size: 10px;
		line-height: 1.2;
		letter-spacing: 0.2px;
		top: 8px;
		inset-inline-start: 8px;
	}

	.eclat-pc__media {
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}

	.eclat-pc__media img,
	.eclat-pc__imglink img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.eclat-pc__imglink {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
}

/* "read more" is a link in a card foot, not body copy — it needs a real target */
@media (max-width: 768px) {
	.eclat-postcard__more {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		align-self: center;
	}
}

/* Four stacked info boxes ate 557px of a 812px screen for four short facts.
   Two columns hold the same content in half the height and read as a block
   rather than a list; only the narrowest phones still stack. */
@media (max-width: 768px) {
	.eclat-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.eclat-usp__item { padding: 20px 12px; gap: 8px; }
}

@media (max-width: 359px) {
	.eclat-usp { grid-template-columns: minmax(0, 1fr); }
}

/* The category mosaic keeps a double-height hero tile from the desktop layout;
   at phone width that made the first category twice the size of the other four
   for no reason. Uniform tiles on mobile. */
@media (max-width: 768px) {
	.eclat-cats > .eclat-cat:first-child {
		grid-column: auto;
		grid-row: auto;
	}

	.eclat-cats > .eclat-cat { min-height: 140px; }
}


/* ==========================================================================
   DESKTOP — the second row of the product carousel was ragged
   --------------------------------------------------------------------------
   The rows grid carries `align-items: start`, so each card sized to its own
   content: row 1 happened to match, row 2 was 24px out. Only the mobile grid
   had been taught to stretch. The card becomes a column at every width, the
   body grows, and the price block is pushed to the foot — so price, rating and
   the action row land on one line across the whole row.
   ========================================================================== */
@media (min-width: 769px) {
	.eclat-carousel--rows .eclat-pgrid,
	.eclat-carousel .eclat-pgrid,
	.eclat-carousel--posts .eclat-posts { align-items: stretch; }

	.eclat-carousel--rows .eclat-pgrid .eclat-pc,
	.eclat-carousel .eclat-pgrid > .eclat-pc,
	.eclat-carousel--posts .eclat-postcard {
		display: flex;
		flex-direction: column;
		height: auto;
		align-self: stretch;
	}

	.eclat-pc__media,
	.eclat-postcard__img { flex: 0 0 auto; }

	.eclat-pc__body,
	.eclat-postcard__body {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.eclat-pc__price { margin-top: auto; }
	.eclat-postcard__more { margin-top: auto; }
}

/* --------------------------------------------------------------------------
   DESKTOP — the hover panel's action row must sit at one height
   --------------------------------------------------------------------------
   With the cards equalised, the buttons were still 21px out of line across a
   row: the panel stacks swatches, a description and the action row, and a
   two-line description pushed the row down while a one-line one did not. The
   description is clamped to exactly two lines and the row is pinned to the
   panel's foot, so the button lands at the same offset on every card.
   ----------------------------------------------------------------------- */
@media (min-width: 992px) {
	.eclat-pc__hover {
		display: flex;
		flex-direction: column;
	}

	.eclat-pc__desc {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: 42px;
		margin-bottom: 10px;
	}

	.eclat-pc__row { margin-top: auto; }
}


/* --------------------------------------------------------------------------
   ITEM 1 — promo line at the end of the nav tier
   --------------------------------------------------------------------------
   It used to sit between the departments button and the menu, taking 230px out
   of the middle of the row. In the end slot it can shrink or disappear without
   moving anything else, and the menu keeps the width it had.
   ----------------------------------------------------------------------- */
.eclat-hd-nav__right {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
}

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

.eclat-hd-nav .eclat-hd-menu { margin-inline-start: 26px; }

/* the hero column no longer carries the promo tile, so nothing needs pinning
   to its foot; the list fills the height on its own */
.eclat-hero__side-promo { display: none; }

/* ==========================================================================
   ITEM 2 — logo scale, and centring on mobile
   --------------------------------------------------------------------------
   Measured: header logo 164x52 on desktop, 133x42 on a 390px phone; the footer
   social row was left-packed (justify-content: normal) rather than centred, and
   the header logo sat at x=239 of 390 instead of on the centre line.
   ========================================================================== */
.eclat-hd-logo img { width: auto; height: 62px; max-height: 62px; }
.eclat-ft-logo img { width: auto; height: 56px; max-height: 56px; }

@media (max-width: 768px) {
	.eclat-hd-logo {
		display: flex;
		justify-content: center;
		margin-inline: auto;
	}

	.eclat-hd-logo img { height: 50px; max-height: 50px; }

	/* the logo owns the middle of the bar; the burger and tools flank it */
	.eclat-hd-main .eclat-hd-wrap { justify-content: space-between; }
	.eclat-hd-main .eclat-hd-logo { flex: 1 1 auto; }

	.eclat-ft-col--brand { text-align: center; }
	.eclat-ft-logo { display: flex; justify-content: center; }

	.eclat-ft-social {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px;
	}
}

/* ==========================================================================
   ITEM 3 — counters take the brand colour
   --------------------------------------------------------------------------
   This reverses an earlier instruction that specified #83B735 for these
   circles. The green stays on the product card's add-to-cart button, which was
   asked for separately; only the cart / wishlist / compare counters move to the
   copper brand accent.
   ========================================================================== */
.eclat-hd-badge,
.eclat-hd-cart__count {
	background: var(--wd-accent);
}


/* ==========================================================================
   ITEM 4 — footer Contact widget
   --------------------------------------------------------------------------
   Two columns: a fixed icon track and a text track. The icons therefore share
   one vertical line no matter how many lines the text beside them runs to, and
   each row's first line of text sits on the icon's optical centre.
   ========================================================================== */
.eclat-ft-contact {
	display: grid;
	grid-template-columns: 15px minmax(0, 1fr);
	gap: 14px 11px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.eclat-ft-contact li {
	display: contents;
}

.eclat-ft-contact__ico {
	grid-column: 1;
	width: 15px;
	height: 15px;
	margin-top: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wd-accent);
}

.eclat-ft-contact__t {
	grid-column: 2;
	min-width: 0;
	font-size: 14px;
	line-height: 23px;
}

.eclat-ft-contact .eclat-ft-address {
	margin: 0;
	font-style: normal;
	font-size: inherit;
	line-height: inherit;
}

.eclat-ft-contact .eclat-ft-label {
	display: inline;
	margin-inline-end: 6px;
	color: var(--wd-foot-text);
}

.eclat-ft-contact a { color: inherit; }
.eclat-ft-contact a:hover { color: var(--wd-accent); }

/* the old standalone WhatsApp paragraph is gone */
.eclat-ft-wa { display: none; }

@media (max-width: 768px) {
	.eclat-ft-contact { gap: 12px 10px; }
	.eclat-ft-contact__t { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; }
	.eclat-ft-contact__t address { min-height: 0; }
}

/* ==========================================================================
   ITEM 5 — blog cards rebuilt to the demo's measurements
   --------------------------------------------------------------------------
   Scraped from woodmart.xtemos.com/blog/ (`wd-post blog-design-masonry
   blog-style-bg wd-add-shadow`):
     card      384 wide, no border, no radius
     thumb     384x270 (1.422), position relative, overflow hidden
     badge     53x53 absolute at top 15 / inline-start 15, white on #333,
               padding 7, radius 0, shadow 0 0 9px rgba(0,0,0,.1)
     day       22px / 22px    month 12px
     title     22px / 500 / 30.8px / #333 / centred
     meta      15px / #767676 / centred
     excerpt   15px / 24px / #767676 / centred, 334 of 384 wide
   ========================================================================== */
.eclat-postcard {
	background: transparent;
	border: 0;
	border-radius: 0;
	transition: box-shadow 0.35s var(--wd-ease-out), transform 0.35s var(--wd-ease-out);
}

.eclat-postcard__img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 384 / 270;
}

.eclat-postcard__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--wd-ease-out);
}

.eclat-postcard:hover { box-shadow: var(--wd-shadow-2); }
.eclat-postcard:hover .eclat-postcard__img img { transform: scale(1.06); }

.eclat-postcard__date {
	box-shadow: 0 0 9px rgba(0, 0, 0, 0.10);
}

.eclat-postcard__day { font-size: 22px; line-height: 22px; font-weight: 400; }
.eclat-postcard__mon { font-size: 12px; line-height: 12px; margin-top: 3px; }

.eclat-postcard__body {
	padding: 22px 25px 0;
	text-align: center;
}

.eclat-postcard__title {
	font-size: 22px;
	font-weight: 500;
	line-height: 30.8px;
	color: var(--wd-head);
	text-align: center;
	margin: 0 0 8px;
}

.eclat-postcard__by {
	font-size: 15px;
	line-height: 24px;
	color: var(--wd-text);
	text-align: center;
	margin: 0 0 10px;
}

.eclat-postcard__excerpt {
	font-size: 15px;
	line-height: 24px;
	color: var(--wd-text);
	text-align: center;
	margin: 0 0 14px;
}

.eclat-postcard__more {
	align-self: center;
	font-size: 13px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

/* Arabic runs longer per line, so the headline drops a step to stay on two */
[dir="rtl"] .eclat-postcard__title { font-size: 20px; line-height: 1.55; }

@media (max-width: 768px) {
	.eclat-postcard__title { font-size: 19px; line-height: 27px; }
	.eclat-postcard__body { padding: 18px 16px 0; }
	.eclat-postcard__excerpt { font-size: 14px; line-height: 22px; }
}


/* ==========================================================================
   ITEM 6 — mobile off-canvas menu
   ========================================================================== */
@media (max-width: 768px) {
	/* the phone number belongs in the top bar, where it is one tap away */
	.eclat-hd-top { display: block; }
	.eclat-hd-top .eclat-hd-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}

	.eclat-hd-top__left {
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 0;
	}

	/* the phone carries `--hide-sm` and was hidden here; on a phone it is the
	   more useful of the two, so it shows and the hours line stands down */
	.eclat-hd-top__left .eclat-hd-meta:first-child { display: none; }
	.eclat-hd-top__left .eclat-hd-meta--hide-sm { display: inline-flex; }
	.eclat-hd-top__left a { display: inline-flex; align-items: center; gap: 6px; }

	/* the drawer foot is a single, full-width action */
	.eclat-hd-mobile__foot {
		display: block;
		padding: 16px;
		border-top: 1px solid var(--wd-line);
	}

	.eclat-hd-mobile__help {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		width: 100%;
		min-height: 48px;
		font-size: 14px;
		letter-spacing: 0.3px;
	}

	.eclat-hd-mobile__help svg { flex: 0 0 18px; }

	/* nothing else lives down there any more */
	.eclat-hd-mobile__foot .eclat-hd-social,
	.eclat-hd-mobile__foot > a[href^="tel"] { display: none; }

	/* and no language rows inside the drawer's menu */
	.eclat-hd-mobile__list .lang-item,
	.eclat-hd-mobile__list .pll-parent-menu-item { display: none; }
}

/* ==========================================================================
   ITEM 7 — full-bleed carousels and visible arrows on mobile
   --------------------------------------------------------------------------
   A touch device has no hover, so every arrow that revealed itself on
   :hover was permanently invisible on a phone. They are shown outright below
   769px, sized for a thumb, and the sliders run edge to edge.
   ========================================================================== */
@media (max-width: 768px) {

	/* ---- hero: edge to edge, arrows always on ------------------------- */
	.eclat-hero__wrap {
		padding-inline: 0;
		max-width: none;
	}

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

	.eclat-hero__nav {
		opacity: 1;
		visibility: visible;
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.92);
		box-shadow: var(--wd-shadow-1);
	}

	.eclat-hero__nav--prev { inset-inline-start: 10px; }
	.eclat-hero__nav--next { inset-inline-end: 10px; }

	/* ---- brand logos: arrows always on -------------------------------- */
	.eclat-brands__nav {
		opacity: 1;
		width: 36px;
		height: 36px;
	}

	.eclat-brands__nav--prev { inset-inline-start: 2px; }
	.eclat-brands__nav--next { inset-inline-end: 2px; }

	/* ---- promo bands: each card spans the screen ---------------------- */
	.eclat-band__inner { max-width: none; }
	.eclat-band__media img { width: 100%; }

	/* ---- section rails run to the bezels ------------------------------ */
	.eclat-carousel--rows,
	.eclat-carousel--posts {
		margin-inline: calc(50% - 50vw);
		width: 100vw;
		max-width: 100vw;
		padding-inline: 15px;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   ITEM 8 — featured products back to a 2-row swipeable carousel on mobile
   --------------------------------------------------------------------------
   This reverses the grid introduced in the mobile overhaul. The reason that
   grid existed was the "1.5 cards" complaint: an 82%-wide card left a 61px
   sliver of its neighbour on both sides. A carousel avoids that only if the
   column is a whole number of cards wide, so each page here is exactly ONE
   column — two products, one per row — snapping edge to edge with arrows.
   ========================================================================== */
@media (max-width: 768px) {
	.eclat-carousel--rows .eclat-pgrid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		grid-template-columns: none;
		grid-template-rows: repeat(2, 1fr);
		align-items: stretch;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.eclat-carousel--rows .eclat-pgrid::-webkit-scrollbar { display: none; }
	.eclat-carousel--rows .eclat-pgrid > .eclat-pcol { display: contents; }

	.eclat-carousel--rows .eclat-pgrid .eclat-pc {
		width: 100%;
		max-width: none;
		min-width: 0;
		scroll-snap-align: start;
	}

	/* the arrows come back with it, and stay visible without a hover */
	.eclat-carousel--rows .eclat-carousel__nav {
		display: inline-flex !important;
		opacity: 1;
		width: 38px;
		height: 38px;
	}

	.eclat-carousel--rows .eclat-carousel__nav--prev { inset-inline-start: 2px; }
	.eclat-carousel--rows .eclat-carousel__nav--next { inset-inline-end: 2px; }

	/* ---- the add-to-cart button was overflowing its card --------------
	   At full card width the row has room, but the button was still being
	   sized from the desktop rule (flex-basis 126px plus two 35px squares).
	   Inside the panel it now simply fills the row. */
	.eclat-pc__hover { padding-inline: 12px; box-sizing: border-box; }

	.eclat-pc__row {
		display: flex;
		gap: 8px;
		width: 100%;
		box-sizing: border-box;
	}

	.eclat-pc__row .eclat-pc__btn {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		max-width: 100%;
		height: 40px;
		padding-inline: 10px;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.eclat-pc__act { flex: 0 0 40px; width: 40px; height: 40px; }
}

/* ==========================================================================
   ITEM 9 — featured categories on mobile
   --------------------------------------------------------------------------
   The square 2-up grid reads as a placeholder. On a phone the section becomes a
   swipeable row of tall, image-led cards — the treatment Woodmart uses for
   category rails — with the product floating on a tinted ground and the label
   and count stacked underneath. 78% width leaves a deliberate half-card hint
   that this row scrolls, which is the one place a peek is useful: there is no
   second row to confuse it with.
   ========================================================================== */
@media (max-width: 768px) {
	.eclat-cats {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin-inline: calc(50% - 50vw);
		padding-inline: 15px;
		width: 100vw;
		max-width: 100vw;
		box-sizing: border-box;
	}

	.eclat-cats::-webkit-scrollbar { display: none; }

	.eclat-cats > .eclat-cat {
		flex: 0 0 78%;
		max-width: 78%;
		min-height: 0;
		aspect-ratio: 3 / 4;
		scroll-snap-align: start;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		padding: 18px;
		background: var(--wd-alt);
		overflow: hidden;
		position: relative;
	}

	.eclat-cats > .eclat-cat img {
		position: absolute;
		inset: 8% 12% auto;
		width: 76%;
		height: 58%;
		object-fit: contain;
		transition: transform 0.5s var(--wd-ease-out);
	}

	.eclat-cats > .eclat-cat:active img { transform: scale(1.04); }

	.eclat-cat__name,
	.eclat-cat__title {
		position: relative;
		z-index: 2;
		font-family: var(--wd-font-head);
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		color: var(--wd-head);
	}

	.eclat-cat__count {
		position: relative;
		z-index: 2;
		opacity: 1;
		margin-top: 4px;
		font-size: 13px;
		color: var(--wd-soft);
		text-align: center;
	}
}

/* ==========================================================================
   ITEM 10 — promo bands
   --------------------------------------------------------------------------
   Measured at 375px: the two bands were 680px and 613px tall because one
   headline wrapped to two lines and the other did not, and the two buttons were
   103x42 and 120x46 — different widths AND different heights sitting side by
   side. `grid-auto-rows: 1fr` makes the bands share a height whatever the copy
   does, and the buttons become equal halves of one row.
   ========================================================================== */
.eclat-bands {
	display: grid;
	grid-auto-rows: 1fr;
}

.eclat-band { display: flex; align-items: center; }
.eclat-band__inner { width: 100%; }

@media (max-width: 768px) {
	.eclat-band { padding: 48px 0; }

	.eclat-band__inner { padding-inline: 20px; }

	.eclat-band__title {
		font-size: 28px;
		line-height: 38px;
		margin-bottom: 14px;
	}

	.eclat-band__text { margin-bottom: 24px; }

	/* two equal halves of one row, with room to breathe above and below */
	.eclat-band__cta {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
		width: 100%;
	}

	.eclat-band__btn {
		flex: 1 1 0;
		min-width: 0;
		height: 46px;
		padding-inline: 8px;
		font-size: 12px;
		white-space: nowrap;
	}

	/* under 360px two buttons cannot both stay legible, so they stack */
	.eclat-band__media { margin-top: 28px; }
}

@media (max-width: 359px) {
	.eclat-band__cta { flex-wrap: wrap; }
	.eclat-band__btn { flex: 1 1 100%; }
}

/* The bordered variant carries a 2px border that was being added outside the
   box, so the two buttons never matched: 103x42 solid against 120x46 bordered
   on desktop, 161x46 against 165x50 on mobile. */
.eclat-band__btn {
	box-sizing: border-box;
	height: 42px;
	border: 2px solid transparent;
}

.eclat-band__btn--ghost { border-width: 2px; }

@media (max-width: 768px) {
	.eclat-band__btn { height: 46px; }
}


/* Inline SVG flags: sized to the text they sit beside, with a hairline edge so
   the white band of the French flag does not vanish into a light background. */
.eclat-hd-flag { display: inline-flex; align-items: center; line-height: 0; }

.eclat-flag {
	width: 21px;
	height: 15px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}

/* --------------------------------------------------------------------------
   ITEM 8 (refinement) — two whole columns per page
   --------------------------------------------------------------------------
   One full-width column per page made each product about 1000px tall on a
   375px screen, which is the "long scroll" the section was meant to escape.
   Two columns per page shows four products at a readable size and still leaves
   no sliver: two columns plus one gap is exactly the track width, so the third
   column starts precisely off-screen.
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
	.eclat-carousel--rows .eclat-pgrid {
		grid-auto-columns: calc((100% - 14px) / 2);
	}
}

@media (max-width: 359px) {
	/* below 360px half a track is too narrow for the price and button, so the
	   page goes back to a single column */
	.eclat-carousel--rows .eclat-pgrid { grid-auto-columns: 100%; }
}

/* ==========================================================================
   ROUND 32 — CATEGORY ICON RENDERING
   --------------------------------------------------------------------------
   Every glyph is drawn on a 24x24 grid and displayed at 16-18px, so a 1.4px
   stroke lands between device pixels and reads soft. The stroke is scaled to
   the box it is drawn in — thinner where the icon is smaller — and the browser
   is told to favour geometry over speed, which is what keeps the thin curves in
   the sun and the comb from breaking up.

   The box is also locked. Without an explicit width and height an inline SVG
   inside a flex row can be squeezed by a long category name, which was the
   other half of the "renders inconsistently on mobile" report.
   ========================================================================== */
.eclat-cat-ico {
	flex: 0 0 auto;
	color: var(--wd-accent);
	opacity: 0.9;
	overflow: visible;
	shape-rendering: geometricPrecision;
	stroke-width: 1.5;
}

.eclat-hero__side .eclat-cat-ico,
.eclat-hd-browse__list .eclat-cat-ico,
.eclat-drawer .eclat-cat-ico {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	min-width: 18px;
	display: block;
	stroke-width: 1.45;
}

.eclat-fw .eclat-cat-ico {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	min-width: 16px;
	stroke-width: 1.55;
}

/* the mobile drawer draws them slightly larger, so the stroke comes back down */
@media (max-width: 768px) {
	.eclat-drawer .eclat-cat-ico,
	.eclat-hd-browse__list .eclat-cat-ico {
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
		min-width: 20px;
		stroke-width: 1.4;
	}
}