/* ==========================================================================
   eclat-pages.css — utility and system pages
   --------------------------------------------------------------------------
     Contact   two columns: addresses and copy left, live map right
     About     intro · full-width band · signed block · team · stats · videos
     FAQs      two columns of accordions
     Search    product grid then post grid
     404       centred, branded, with a way out
     Legal     one readable measure, centred

   Loaded site-wide after eclat-blog.css and before the mobile layer.
   ========================================================================== */

/* ==========================================================================
   TASK 4 — CONTACT
   ========================================================================== */
.eclat-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 50px;
	align-items: stretch;
}

.eclat-contact__col { display: grid; gap: 38px; align-content: start; }

.eclat-contact__h {
	margin: 0 0 18px;
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wd-dark);
}

/* two sub-columns, one per city */
.eclat-contact__cities {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
	margin-bottom: 24px;
}

.eclat-contact__city h3 {
	margin: 0 0 4px;
	font-family: var(--wd-font-head);
	font-size: 17px;
	font-weight: 600;
	color: var(--wd-dark);
}

.eclat-contact__role {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wd-accent);
}

.eclat-contact__city address {
	margin: 0;
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: var(--wd-text);
}

.eclat-contact__pairs {
	display: grid;
	gap: 10px;
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid var(--wd-line);
}

.eclat-contact__pairs > div {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	align-items: baseline;
	gap: 12px;
}

.eclat-contact__pairs dt {
	font-family: var(--wd-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-head);
}

.eclat-contact__pairs dd { margin: 0; font-size: 14px; color: var(--wd-text); }
.eclat-contact__pairs dd a { color: var(--wd-text); }
.eclat-contact__pairs dd a:hover { color: var(--wd-accent); }

.eclat-contact__lead {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--wd-text);
}

.eclat-contact__cta { min-height: 48px; padding-inline: 34px; }

/* --- the map: edge to edge inside its column ---------------------------- */
.eclat-contact__map {
	position: relative;
	min-height: 460px;
	background: var(--wd-alt);
	overflow: hidden;
}

.eclat-contact__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* OpenStreetMap's tiles are a touch warm against our palette */
	filter: saturate(0.85) contrast(1.03);
}

/*
 * The embed draws its own marker, but it is a small blue dot that disappears
 * against the tiles. A brand pin is drawn over the map's centre instead, and it
 * must never intercept a drag.
 */
.eclat-contact__pin {
	position: absolute;
	top: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -100%);
	z-index: 2;
	color: var(--wd-accent);
	pointer-events: none;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
}

[dir="rtl"] .eclat-contact__pin { transform: translate(50%, -100%); }

/* the contact form is the anchor the WRITE A MESSAGE button points at */
#eclat-contact-form { scroll-margin-top: 90px; }

/* ==========================================================================
   TASK 5 — ABOUT
   ========================================================================== */
.eclat-about__intro {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 50px;
	align-items: start;
	margin-bottom: 46px;
}

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

.eclat-about__title {
	margin: 0;
	font-family: var(--wd-font-head);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -0.01em;
	color: var(--wd-dark);
}

.eclat-about__intror p {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.85;
	color: var(--wd-text);
}

.eclat-about__intror p:last-child { margin-bottom: 0; }

/* the full-bleed band: it breaks the container the same way the promo bands do */
.eclat-about__band {
	margin: 0 0 46px;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	overflow: hidden;
	background: var(--wd-alt);
	line-height: 0;
}

.eclat-about__band img {
	width: 100%;
	height: clamp(240px, 38vw, 520px);
	object-fit: cover;
	display: block;
}

.eclat-about__store {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

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

.eclat-about__store p { margin: 0 0 16px; font-size: 16px; line-height: 1.85; color: var(--wd-text); }

/* the signature line: a hand-set caption, not a scanned autograph */
.eclat-about__sign {
	display: inline-block;
	margin: 8px 0 0 !important;
	padding-top: 14px;
	border-top: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 15px !important;
	font-style: italic;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wd-dark) !important;
}

/* --- team --------------------------------------------------------------- */
.eclat-team__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
}

.eclat-team__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 26px 18px 22px;
	background: #fff;
	border: 1px solid var(--wd-line);
	text-align: center;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
	.eclat-team__card:hover { border-color: var(--wd-accent); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07); }
}

.eclat-team__photo {
	width: 120px;
	height: 120px;
	margin-bottom: 6px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wd-alt);
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.eclat-team__mono {
	font-family: var(--wd-font-head);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--wd-accent);
}

.eclat-team__name {
	margin: 0;
	font-family: var(--wd-font-head);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wd-dark);
}

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

.eclat-team__blurb { margin: 4px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--wd-text); }

.eclat-team__social {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
}

.eclat-team__social a {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wd-line);
	color: var(--wd-soft);
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

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

/* --- statistics band ----------------------------------------------------- */
.eclat-stats {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	background: #0A0A0A;
	color: rgba(255, 255, 255, 0.82);
	padding-block: clamp(48px, 7vw, 96px);
	box-sizing: border-box;
}

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

.eclat-stats__title {
	margin: 0 0 14px;
	font-family: var(--wd-font-head);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 300;
	line-height: 1.22;
	color: #fff;
}

.eclat-stats__lead { margin: 0; font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, 0.66); }

.eclat-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, 0.12);
}

.eclat-stat {
	display: grid;
	gap: 6px;
	padding: 30px 24px;
	background: #0A0A0A;
}

.eclat-stat__n {
	font-family: var(--wd-font-head);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 600;
	line-height: 1;
	color: var(--wd-accent);
}

.eclat-stat__k {
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.3px;
	color: rgba(255, 255, 255, 0.7);
}

/* --- video tiles --------------------------------------------------------- */
.eclat-videos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.eclat-video { display: grid; gap: 14px; min-width: 0; }

.eclat-video__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wd-alt);
	line-height: 0;
}

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

.eclat-video__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.24);
	transition: background 0.25s ease;
}

.eclat-video__play {
	position: absolute;
	top: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 66px;
	height: 66px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--wd-dark);
	padding-inline-start: 4px;
	box-sizing: border-box;
	transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

[dir="rtl"] .eclat-video__play { transform: translate(50%, -50%); }
[dir="rtl"] .eclat-video__play svg { transform: scaleX(-1); }

@media (hover: hover) {
	.eclat-video:hover .eclat-video__media img { transform: scale(1.05); }
	.eclat-video:hover .eclat-video__media::after { background: rgba(0, 0, 0, 0.34); }
	.eclat-video:hover .eclat-video__play { background: var(--wd-accent); color: #fff; }
}

.eclat-video__body { display: grid; gap: 4px; }

.eclat-video__k {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wd-accent);
}

.eclat-video__t {
	font-family: var(--wd-font-head);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.38;
	color: var(--wd-dark);
}

/* the lightbox the tiles open when a real video URL is set */
.eclat-vbox {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.eclat-vbox[hidden] { display: none !important; }
.eclat-vbox__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); }

.eclat-vbox__in {
	position: relative;
	z-index: 2;
	width: min(980px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
}

.eclat-vbox__in iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   TASK 6 — FAQs
   ========================================================================== */
.eclat-faq2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 50px;
	align-items: start;
}

.eclat-faq2__h {
	margin: 0 0 8px;
	padding-bottom: 16px;
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wd-dark);
}

.eclat-faq2__item { border-bottom: 1px solid var(--wd-line); }

.eclat-faq2__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wd-head);
	transition: color 0.18s ease;
}

/* the default disclosure triangle in both engines */
.eclat-faq2__q::-webkit-details-marker { display: none; }
.eclat-faq2__q::marker { content: ""; }

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

.eclat-faq2__ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wd-soft);
	transition: transform 0.25s ease, color 0.25s ease;
}

/* the open state: green label, rotated chevron — as briefed */
.eclat-faq2__item[open] > .eclat-faq2__q { color: var(--wd-green); }
.eclat-faq2__item[open] > .eclat-faq2__q .eclat-faq2__ico { transform: rotate(180deg); color: var(--wd-green); }

.eclat-faq2__a {
	padding: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.78;
	color: var(--wd-text);
}

.eclat-faq2__a p { margin: 0; }

/* ==========================================================================
   TASK 11 — SEARCH RESULTS
   ========================================================================== */
.eclat-search__sec { margin-bottom: 54px; }
.eclat-search__sec:last-child { margin-bottom: 0; }

.eclat-search__title {
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wd-dark);
}

/* the approved three-column product grid */
.eclat-search .eclat-pgrid--3,
.eclat-pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.eclat-empty {
	display: grid;
	justify-items: center;
	gap: 18px;
	padding: 60px 0;
	text-align: center;
}

.eclat-empty__lead { margin: 0; font-size: 17px; color: var(--wd-head); }

.eclat-empty__search {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: min(520px, 100%);
	border: 1px solid var(--wd-line);
	background: #fff;
}

.eclat-empty__search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding-inline: 16px;
	border: 0;
	background: none;
	font-size: 14px;
	color: var(--wd-head);
}

.eclat-empty__search input:focus { outline: none; }
.eclat-empty__search:focus-within { border-color: var(--wd-accent); }
.eclat-empty__search .eclat-btn { flex: 0 0 auto; height: 48px; border-radius: 0; }

/* ==========================================================================
   TASK 11 — 404
   ========================================================================== */
.eclat-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: clamp(48px, 8vw, 100px);
}

.eclat-404__inner {
	display: grid;
	justify-items: center;
	gap: 14px;
	width: min(720px, 100%);
	padding-inline: var(--wd-gutter);
	text-align: center;
	box-sizing: border-box;
}

.eclat-404__num {
	margin: 0;
	font-family: var(--wd-font-head);
	font-size: clamp(96px, 20vw, 200px);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 2px var(--wd-accent);
	/* engines without text-stroke still get a readable mark */
	text-shadow: 0 0 0 var(--wd-line);
}

@supports not ((-webkit-text-stroke: 2px var(--wd-accent))) {
	.eclat-404__num { color: var(--wd-line); text-shadow: none; }
}

.eclat-404__title {
	margin: 0;
	font-family: var(--wd-font-head);
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 600;
	color: var(--wd-dark);
}

.eclat-404__lead {
	margin: 0 0 6px;
	max-width: 520px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--wd-text);
}

.eclat-404__search {
	display: flex;
	align-items: stretch;
	width: min(460px, 100%);
	border: 1px solid var(--wd-line);
	background: #fff;
}

.eclat-404__search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding-inline: 16px;
	border: 0;
	background: none;
	font-size: 14px;
	color: var(--wd-head);
}

.eclat-404__search input:focus { outline: none; }
.eclat-404__search:focus-within { border-color: var(--wd-accent); }

.eclat-404__search button {
	flex: 0 0 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--wd-head);
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease;
}

.eclat-404__search button:hover { background: var(--wd-accent); }

.eclat-404__cta { min-height: 48px; padding-inline: 34px; }

.eclat-404__cats { margin-top: 14px; }

.eclat-404__catsk {
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--wd-soft);
}

.eclat-404__cats ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.eclat-404__cats li { list-style: none; margin: 0; }
.eclat-404__cats li::marker { content: none; }

.eclat-404__cats a {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	background: var(--wd-alt);
	color: var(--wd-text);
	font-size: 13px;
	transition: background 0.18s ease, color 0.18s ease;
}

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

/* ==========================================================================
   TASK 10 — LEGAL PAGES
   --------------------------------------------------------------------------
   Privacy, Terms and the returns policy are long prose with no layout of their
   own. They are given one readable measure, centred, and a typographic scale
   that makes an H2 and an H3 tell apart at a glance. Scoped to a page that has
   no section shortcode of ours in it, so About and Contact keep their layouts.
   ========================================================================== */
/*
 * The7 prints a legal page's content straight into `#content` with no
 * `.entry-content` wrapper of its own, so the measure is applied to `#content`
 * on a page the body class marks as plain prose. `.eclat-plain` is set in
 * inc/woo-pages.php for any page that carries neither one of our section
 * shortcodes nor a commerce shortcode — which is exactly Privacy, Terms and
 * the returns policy, plus any fourth legal page added later.
 */
.eclat-legal,
.eclat-plain #content {
	max-width: 880px;
	margin-inline: auto;
	padding-block: 44px 60px;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.85;
	color: var(--wd-text);
}

.eclat-legal h1,
.eclat-legal h2,
.eclat-legal h3,
.eclat-legal h4,
.eclat-plain #content h1,
.eclat-plain #content h2,
.eclat-plain #content h3,
.eclat-plain #content h4 {
	font-family: var(--wd-font-head);
	color: var(--wd-dark);
	line-height: 1.32;
	margin: 34px 0 14px;
}

.eclat-plain #content > :first-child { margin-top: 0; }

.eclat-legal h2, .eclat-plain #content h2 { font-size: 24px; }
.eclat-legal h3, .eclat-plain #content h3 { font-size: 19px; }
.eclat-legal h4, .eclat-plain #content h4 { font-size: 17px; }

.eclat-legal p, .eclat-plain #content p { margin: 0 0 18px; }

.eclat-legal ul, .eclat-plain #content ul,
.eclat-legal ol, .eclat-plain #content ol { margin: 0 0 20px; padding-inline-start: 1.4em; }

.eclat-legal li, .eclat-plain #content li { margin-bottom: 8px; }

.eclat-legal a,
.eclat-plain #content a { color: var(--wd-accent); text-decoration: underline; }

.eclat-legal a:hover,
.eclat-plain #content a:hover { color: var(--wd-accent-dk); }

.eclat-legal blockquote,
.eclat-plain #content blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 22px;
	border-inline-start: 3px solid var(--wd-accent);
	border-inline-end: 0;
	font-size: 16px;
	line-height: 1.75;
	color: var(--wd-head);
	font-style: normal;
}

[dir="rtl"] .eclat-legal blockquote,
[dir="rtl"] .eclat-plain #content blockquote { padding: 4px 22px 4px 0; }

.eclat-legal table,
.eclat-plain #content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 22px;
	border: 1px solid var(--wd-line);
}

.eclat-legal th, .eclat-plain #content th,
.eclat-legal td, .eclat-plain #content td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--wd-line);
	text-align: start;
	font-size: 14px;
}

.eclat-legal th,
.eclat-plain #content th { background: var(--wd-alt); font-weight: 700; color: var(--wd-head); }

/* the sidebar is removed in PHP; hide the shell if the theme prints it anyway */
.eclat-plain #sidebar,
.woocommerce-cart #sidebar,
.woocommerce-checkout #sidebar,
.woocommerce-account #sidebar,
.eclat-wooutil #sidebar { display: none !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
	.eclat-team__grid { gap: 18px; }
	.eclat-about__intro { gap: 34px; }
	.eclat-contact { gap: 36px; }
}

@media (max-width: 992px) {
	.eclat-contact { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.eclat-contact__map { min-height: 340px; }

	.eclat-about__intro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.eclat-about__title { font-size: 28px; }

	.eclat-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.eclat-stats__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }

	.eclat-faq2 { grid-template-columns: minmax(0, 1fr); gap: 34px; }

	.eclat-search .eclat-pgrid--3,
	.eclat-pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.eclat-contact__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.eclat-contact__city h3 { font-size: 15px; }
	.eclat-contact__pairs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.eclat-contact__map { min-height: 280px; }
	.eclat-contact__cta { width: 100%; }

	.eclat-about__title { font-size: 23px; }
	.eclat-about__intror p { font-size: 15px; }
	.eclat-about__band { margin-bottom: 30px; }
	.eclat-about__storeh { font-size: 18px; }
	.eclat-about__store p { font-size: 15px; }

	.eclat-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.eclat-team__card { padding: 18px 12px 16px; }
	.eclat-team__photo { width: 84px; height: 84px; }
	.eclat-team__mono { font-size: 30px; }
	.eclat-team__name { font-size: 14px; }
	.eclat-team__blurb { font-size: 12.5px; }

	.eclat-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.eclat-stat { padding: 20px 14px; }

	.eclat-videos { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.eclat-video__play { width: 52px; height: 52px; }
	.eclat-video__t { font-size: 15px; }

	.eclat-faq2__q { font-size: 14px; padding: 15px 0; }
	.eclat-faq2__a { font-size: 14px; padding-bottom: 17px; }

	/* the brief's three-column search grid becomes the site-wide two on a phone */
	.eclat-search .eclat-pgrid--3,
	.eclat-pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.eclat-search__sec { margin-bottom: 36px; }
	.eclat-search__title { font-size: 13.5px; margin-bottom: 18px; }

	.eclat-legal,
	.eclat-plain #content {
		padding-block: 26px 40px;
		font-size: 15px;
	}

	.eclat-legal h2, .eclat-plain #content h2 { font-size: 20px; }
	.eclat-legal h3, .eclat-plain #content h3 { font-size: 17px; }
}

/* ==========================================================================
   TASK 1 — HOMEPAGE FAQ
   --------------------------------------------------------------------------
   Inherits the entire `.eclat-faq2` component from the FAQ page. Only the
   differences a homepage placement needs are declared here: a slightly tighter
   column gap because the section sits between two dense bands, and a centred
   link out to the full FAQ page.
   ========================================================================== */
.eclat-faq2--home { gap: 40px; }

.eclat-faq2--home .eclat-faq2__col { min-width: 0; }

/* the page version prints a column heading; the homepage version does not */
.eclat-faq2--home .eclat-faq2__h { display: none; }

.eclat-faq2--home .eclat-faq2__item:first-child { border-top: 1px solid var(--wd-line); }

.eclat-faq2__more {
	margin: 30px 0 0;
	text-align: center;
}

.eclat-faq2__more .eclat-btn { min-height: 46px; padding-inline: 30px; }

/* RTL: the chevron sits at the inline end in both directions because the
   summary is a flex row using logical alignment, so nothing to mirror. The
   answer body indent is stated logically for the same reason. */
.eclat-faq2__a { padding-inline-start: 0; }

@media (max-width: 992px) {
	.eclat-faq2--home { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.eclat-faq2--home .eclat-faq2__col + .eclat-faq2__col .eclat-faq2__item:first-child { border-top: 0; }
}

@media (max-width: 768px) {
	.eclat-faq2--home .eclat-faq2__q { font-size: 14px; padding: 15px 0; }
	.eclat-faq2--home .eclat-faq2__a { font-size: 14px; padding-bottom: 17px; }
	.eclat-faq2__more { margin-top: 22px; }
	.eclat-faq2__more .eclat-btn { width: 100%; }
}

/* ==========================================================================
   TASK 2 — MY ACCOUNT, LOGIN AND REGISTRATION
   --------------------------------------------------------------------------
   eclat-woo-pages.css already gives these pages their card, field and button
   treatment. What was left was the clunky WooCommerce defaults that survive
   underneath: the plugin's own notice colours, the `.woocommerce-error` bullet
   list, password-strength chips, the "required" asterisk placement in RTL, and
   the account dashboard's greeting block.
   ========================================================================== */

/* --- the account shell --------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
	margin-top: 0;
	padding: 14px 16px;
	background: var(--wd-alt);
	border-inline-start: 3px solid var(--wd-accent);
	font-size: 14.5px;
	color: var(--wd-head);
}

.woocommerce-account .woocommerce-MyAccount-content mark,
.woocommerce-account .woocommerce-MyAccount-content strong {
	background: none;
	font-weight: 700;
	color: var(--wd-accent);
}

/* --- WooCommerce's own notice styling ------------------------------------ */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
	margin: 0 0 18px;
	padding: 14px 18px;
	list-style: none;
	border-radius: 0;
	font-size: 14px;
}

.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before { content: none; }

.woocommerce-account .woocommerce-error li { list-style: none; margin: 0; }

/* --- required marker, correct on both sides ------------------------------ */
.woocommerce form .form-row label .required,
.woocommerce-account label .required {
	margin-inline-start: 3px;
	margin-inline-end: 0;
	border: 0;
	text-decoration: none;
	color: var(--wd-sale);
}

/* --- password field + strength meter ------------------------------------- */
.woocommerce-account .woocommerce-form__label-for-checkbox { user-select: none; }

.woocommerce form .password-input,
.woocommerce-account .password-input { display: block; position: relative; width: 100%; }

.woocommerce form .show-password-input,
.woocommerce-account .show-password-input {
	position: absolute;
	inset-inline-end: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--wd-soft);
}

.woocommerce-password-strength {
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: 0;
	border: 1px solid var(--wd-line);
	background: var(--wd-alt);
	font-size: 12.5px;
	font-weight: 600;
	text-align: start;
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { border-color: var(--wd-sale); color: var(--wd-sale); }
.woocommerce-password-strength.good { border-color: var(--wd-gold); color: var(--wd-gold); }
.woocommerce-password-strength.strong { border-color: var(--wd-ok); color: var(--wd-ok); }

.woocommerce-password-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--wd-soft); }

/* --- the dashboard's "Hello, name" intro --------------------------------- */
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--wd-sale); }

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	margin: 26px 0 14px;
	font-family: var(--wd-font-head);
	font-size: 16px;
	font-weight: 600;
	color: var(--wd-dark);
}

.woocommerce-account .woocommerce-MyAccount-content h2:first-child { margin-top: 0; }

/* --- addresses grid ------------------------------------------------------ */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
}

.woocommerce-account .woocommerce-Address {
	width: auto;
	float: none;
	padding: 20px;
	border: 1px solid var(--wd-line);
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { margin: 0 0 10px; }

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: var(--wd-text);
}

/* --- RTL: kill the plugin's hard-coded left alignment -------------------- */
[dir="rtl"] .woocommerce-account .woocommerce-MyAccount-content,
[dir="rtl"] .woocommerce-account form.login,
[dir="rtl"] .woocommerce-account form.register,
[dir="rtl"] .woocommerce-account table.shop_table th,
[dir="rtl"] .woocommerce-account table.shop_table td { text-align: right; }

[dir="rtl"] .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
	border-inline-start: 3px solid var(--wd-accent);
	border-inline-end: 0;
}

/* --- lost-password form -------------------------------------------------- */
.woocommerce-account .woocommerce-ResetPassword {
	width: min(480px, 100%);
	margin-inline: auto;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--wd-line);
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-ResetPassword > p:first-child {
	margin-top: 0;
	background: none;
	border: 0;
	padding: 0 0 14px;
	color: var(--wd-text);
}

@media (max-width: 768px) {
	.woocommerce-account .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.woocommerce-account .woocommerce-Address { padding: 16px; }
}

/* ==========================================================================
   TASK 3 — PRODUCT GRID IMAGE UNIFORMITY
   --------------------------------------------------------------------------
   Source images vary: 700x700 studio squares, 1200x1200, and portrait cut-outs
   as tall as 317x944. Left alone, a grid row is as tall as its tallest image
   and the cards go ragged.
   `.eclat-pc__media` already declares `aspect-ratio: 1/1`, but that alone does
   not survive every context — the archive grid, the homepage rails and the
   related rails each re-declare parts of the card. These rules restate the
   contract in ONE place for EVERY grid the card appears in, and pin the image
   inside the box with object-fit so nothing is cropped or stretched.
   ========================================================================== */
.eclat-pgrid .eclat-pc__media,
.eclat-shop__products .eclat-pc__media,
.eclat-posts .eclat-pc__media,
.eclat-carousel .eclat-pc__media,
.eclat-sp-rail .eclat-pc__media,
.eclat-products .eclat-pc__media {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.eclat-pgrid .eclat-pc__imglink,
.eclat-shop__products .eclat-pc__imglink,
.eclat-carousel .eclat-pc__imglink,
.eclat-sp-rail .eclat-pc__imglink,
.eclat-products .eclat-pc__imglink {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	box-sizing: border-box;
	line-height: 0;
}

/*
 * `contain`, not `cover`: these are product cut-outs on white. `cover` would
 * crop the top off a tall bottle to fill the square, which is exactly the
 * failure the brief is asking to avoid.
 */
.eclat-pgrid .eclat-pc__imglink img,
.eclat-shop__products .eclat-pc__imglink img,
.eclat-carousel .eclat-pc__imglink img,
.eclat-sp-rail .eclat-pc__imglink img,
.eclat-products .eclat-pc__imglink img {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	margin: 0;
	mix-blend-mode: normal;
}

/* every card in a row is the same height, whatever the title runs to */
.eclat-pgrid,
.eclat-shop__products { align-items: stretch; }

.eclat-pgrid > .eclat-pc,
.eclat-shop__products > .product,
.eclat-shop__products > .eclat-pc {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.eclat-pgrid > .eclat-pc .eclat-pc__body,
.eclat-shop__products .eclat-pc__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.eclat-pgrid > .eclat-pc .eclat-pc__price,
.eclat-shop__products .eclat-pc__price { margin-top: auto; }

/* the list view is a deliberate exception: there the image is a fixed rail */
.eclat-cols-list .eclat-pc__media { aspect-ratio: auto; height: 100%; }