/* ==========================================================================
   eclat-blog.css — the post card, and every blog surface built from it
   --------------------------------------------------------------------------
   Loaded after eclat-home.css, which grew four separate generations of
   `.eclat-postcard` rules across its 5,000 lines. Rather than edit the same
   selector in four places and hope the last one wins, the card is restated
   once here, in full, as the final layer. eclat-home.css is left untouched.

   Card anatomy, matched to the demo:

     image        16:11 cover, hidden overflow
     date badge   white 53x53 square, floating at the image's top-inline-start
     category     green pill, centred, straddling the image's bottom edge
     title        centred
     meta         comments count · share · author avatar + name
     excerpt      centred
     action       centred uppercase "CONTINUE READING" in green
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE CARD
   --------------------------------------------------------------------------
   A flex column, which is what lets the category pill straddle the image edge
   with a negative margin instead of an absolute offset that would have to know
   the image's rendered height.
   ----------------------------------------------------------------------- */
.eclat-postcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 0;
	box-sizing: border-box;
	transition: box-shadow 0.28s ease, transform 0.28s ease;
}

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

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

@media (hover: hover) {
	.eclat-postcard:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.10); }
	.eclat-postcard:hover .eclat-postcard__img img { transform: scale(1.06); }
}

/* --- date badge: white square, inside the image's corner ---------------- */
.eclat-postcard__date {
	position: absolute;
	top: 15px;
	inset-inline-start: 15px;
	inset-inline-end: auto;
	z-index: 3;
	box-sizing: border-box;
	width: 53px;
	min-width: 53px;
	max-width: 53px;
	height: 53px;
	padding: 7px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	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);
}

/* --- category: green pill straddling the image's bottom edge ------------ */
.eclat-postcard__tag {
	order: 2;
	position: relative;
	z-index: 4;
	align-self: center;
	margin-top: -15px;
	margin-inline: 0;
	inset: auto;
	display: inline-flex;
	align-items: center;
	max-width: calc(100% - 40px);
	height: 30px;
	padding: 0 18px;
	background: var(--wd-green);
	border-radius: 15px;
	color: #fff;
	font-family: var(--wd-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transition: background 0.2s ease;
}

.eclat-postcard__tag:hover { background: var(--wd-green-dk); color: #fff; }

/* --- body --------------------------------------------------------------- */
.eclat-postcard__body {
	order: 3;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 18px 18px 22px;
	text-align: center;
}

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

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

/* the old single-line byline is superseded by the meta row */
.eclat-postcard__by { display: none; }

/* --- meta row: comments · share · author -------------------------------- */
.eclat-postcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 16px;
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1;
	color: var(--wd-soft);
}

.eclat-postcard__m {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wd-soft);
	font-size: 12.5px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.18s ease;
}

.eclat-postcard__m:hover { color: var(--wd-accent); }
.eclat-postcard__m svg { flex: 0 0 auto; }

.eclat-postcard__author { cursor: default; }
.eclat-postcard__author:hover { color: var(--wd-soft); }

.eclat-postcard__avatar,
.eclat-postcard__author img {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* the copy-link confirmation, same treatment as the product page's */
.eclat-postcard__share.is-copied::after {
	content: attr(data-eclat-copied);
	position: absolute;
	bottom: calc(100% + 8px);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 6;
	padding: 5px 9px;
	background: var(--wd-dark);
	color: #fff;
	font-size: 11px;
	white-space: nowrap;
	pointer-events: none;
}

[dir="rtl"] .eclat-postcard__share.is-copied::after { transform: translateX(50%); }

/* --- excerpt + action --------------------------------------------------- */
.eclat-postcard__excerpt {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.68;
	color: var(--wd-text);
}

.eclat-postcard__more {
	margin-top: auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wd-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wd-green);
	border-bottom: 1px solid transparent;
	line-height: 1.6;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.eclat-postcard__more:hover {
	color: var(--wd-green-dk);
	border-bottom-color: currentColor;
}

/* the old chevron glyph in this link is gone; nothing to mirror in RTL */
.eclat-postcard__more svg { display: none; }

/* ==========================================================================
   2. THE HOMEPAGE SLIDER
   --------------------------------------------------------------------------
   The track is a scroll-snapping flex rail, not an infinite loop: it stops at
   both ends and the arrows disable themselves there (the `sync()` in
   inc/home-sections.php sets `disabled` from scrollLeft). That is deliberate —
   an infinite loop on a rail of three posts duplicates cards visibly.
   ========================================================================== */
.eclat-carousel--posts { position: relative; }

.eclat-carousel--posts .eclat-posts {
	display: flex;
	grid-template-columns: none;
	gap: 30px;
	align-items: stretch;
	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;
}

/* arrows are part of the control surface, not a hover reveal — a touch device
   never fires :hover, and the brief asks for them to be enabled */
.eclat-carousel--posts .eclat-carousel__nav {
	display: inline-flex !important;
	opacity: 1;
	visibility: visible;
}

/* eclat-home.css takes a disabled arrow to `opacity: 0 !important`, which on a
   rail the reader is meant to see makes the control vanish at each end. Here it
   dims instead, so the affordance stays put and only reads as unavailable. */
.eclat-carousel--posts .eclat-carousel__nav[disabled] {
	opacity: 0.3 !important;
	cursor: default;
	pointer-events: none;
}

/* nothing to scroll (three posts, three columns) — the arrows stand down
   rather than sitting there permanently dead */
.eclat-carousel--posts:not(.is-scrollable) .eclat-carousel__nav { display: none !important; }

@media (max-width: 1024px) {
	.eclat-carousel--posts .eclat-posts { gap: 20px; }

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

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

	.eclat-postcard__body { padding: 16px 14px 20px; }
	.eclat-postcard__title { font-size: 17px; }
	.eclat-postcard__meta { gap: 6px 12px; font-size: 12px; }
	.eclat-postcard__excerpt { font-size: 13.5px; }
	.eclat-postcard__date { width: 46px; min-width: 46px; max-width: 46px; height: 46px; top: 12px; inset-inline-start: 12px; }
	.eclat-postcard__day { font-size: 19px; }
	.eclat-postcard__mon { font-size: 10px; }
	.eclat-postcard__tag { height: 27px; padding: 0 14px; margin-top: -13.5px; font-size: 10.5px; }
}

/* ==========================================================================
   3. BLOG ARCHIVE — three columns beside a sidebar
   --------------------------------------------------------------------------
   The archive, the category/tag archives and the single post share one shell:
   `.eclat-blog__layout` is main + sidebar, and the grid inside main is three
   across on the widest screens, two on a laptop, one on a phone.
   ========================================================================== */
.eclat-blog__wrap {
	max-width: var(--wd-max);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
	padding-block: 46px 60px;
	box-sizing: border-box;
}

.eclat-blog__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 44px;
	align-items: start;
}

/* The blog index and the archives carry no sidebar: one full-width column, and
   the post grid runs the whole measure. The single post keeps its two-column
   layout, which is a separate directive.

   Doubled class on purpose — (0,2,0). The responsive blocks further down this
   file re-declare `.eclat-blog__layout` at (0,1,0) inside media queries, and a
   media query adds no specificity, so a single class here would lose to them
   below 1200px and the sidebar track would come back on a laptop. */
.eclat-blog__layout.eclat-blog__layout--full {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/* with no sidebar beside it the grid holds three columns much further down */
.eclat-blog__layout--full .eclat-blog__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

@media (max-width: 768px) {
	.eclat-blog__layout--full .eclat-blog__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

.eclat-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	align-items: stretch;
}

/* a card in the grid stretches to the row height; the rail one does not */
.eclat-blog__grid > .eclat-postcard { height: 100%; }

.eclat-blog__empty {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	color: var(--wd-soft);
}

/* --------------------------------------------------------------------------
   PAGINATION — square 40px links, no radius, accent for the current page
   ----------------------------------------------------------------------- */
.eclat-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 46px;
}

.eclat-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--wd-line);
	color: var(--wd-head);
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.eclat-pager .page-numbers:hover {
	border-color: var(--wd-accent);
	color: var(--wd-accent);
}

.eclat-pager .page-numbers.current {
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}

.eclat-pager .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--wd-soft);
}

.eclat-pager--inline { justify-content: flex-start; margin-top: 24px; }

/* ==========================================================================
   4. SIDEBAR WIDGETS
   ========================================================================== */
.eclat-blog__side {
	min-width: 0;
	display: grid;
	gap: 34px;
	align-content: start;
}

.eclat-bw__title {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--wd-dark);
}

/* --- search -------------------------------------------------------------- */
.eclat-bw__search {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--wd-line);
	background: #fff;
}

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

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

.eclat-bw__search button {
	flex: 0 0 46px;
	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-bw__search button:hover { background: var(--wd-accent); }

/* --- recent posts -------------------------------------------------------- */
.eclat-bw__posts {
	display: grid;
	gap: 16px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.eclat-bw__posts li {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	align-items: center;
	gap: 13px;
	list-style: none;
	margin: 0;
}

.eclat-bw__posts li::marker { content: none; }

.eclat-bw__thumb {
	display: block;
	width: 72px;
	height: 60px;
	overflow: hidden;
	background: var(--wd-alt);
	line-height: 0;
}

.eclat-bw__thumb img { width: 100%; height: 100%; object-fit: cover; }

.eclat-bw__text { display: grid; gap: 4px; min-width: 0; }

.eclat-bw__text a {
	font-family: var(--wd-font-head);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wd-head);
}

.eclat-bw__text a:hover { color: var(--wd-accent); }
.eclat-bw__text time { font-size: 12px; color: var(--wd-soft); }

/* --- categories ---------------------------------------------------------- */
.eclat-bw__cats {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.eclat-bw__cats li { list-style: none; margin: 0; border-bottom: 1px solid var(--wd-line-soft); }
.eclat-bw__cats li:last-child { border-bottom: 0; }
.eclat-bw__cats li::marker { content: none; }

.eclat-bw__cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	font-size: 14px;
	color: var(--wd-text);
}

.eclat-bw__cats a:hover { color: var(--wd-accent); }
.eclat-bw__n { font-size: 12px; color: var(--wd-soft); }

/* ==========================================================================
   5. SINGLE POST
   ========================================================================== */
.eclat-post__hero {
	position: relative;
	margin: 0 0 24px;
	overflow: hidden;
	background: var(--wd-alt);
	line-height: 0;
}

.eclat-post__hero img { width: 100%; height: auto; display: block; }

.eclat-post__date {
	position: absolute;
	top: 18px;
	inset-inline-start: 18px;
	z-index: 3;
	box-sizing: border-box;
	width: 60px;
	height: 60px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	line-height: 1;
	text-align: center;
}

/* --- post meta line ------------------------------------------------------ */
.eclat-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-bottom: 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wd-line);
	font-size: 13px;
	color: var(--wd-soft);
}

.eclat-post__cat {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 14px;
	border-radius: 13px;
	background: var(--wd-green);
	color: #fff;
	font-family: var(--wd-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	line-height: 1;
}

.eclat-post__cat:hover { background: var(--wd-green-dk); color: #fff; }

.eclat-post__by { display: inline-flex; align-items: center; gap: 8px; }
.eclat-post__by img { width: 24px; height: 24px; border-radius: 50%; }
.eclat-post__cc { display: inline-flex; align-items: center; gap: 5px; color: var(--wd-soft); }
.eclat-post__cc:hover { color: var(--wd-accent); }

/* --- article body: the readability layer --------------------------------- */
.eclat-post__body {
	font-size: 16px;
	line-height: 1.85;
	color: var(--wd-text);
}

.eclat-post__body > * { max-width: 820px; }

.eclat-post__body p { margin: 0 0 20px; }

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

.eclat-post__body h2 { font-size: 26px; }
.eclat-post__body h3 { font-size: 21px; }
.eclat-post__body h4 { font-size: 18px; }

.eclat-post__body ul,
.eclat-post__body ol { margin: 0 0 20px; padding-inline-start: 1.35em; }
.eclat-post__body li { margin-bottom: 8px; }

.eclat-post__body a { color: var(--wd-accent); text-decoration: underline; }
.eclat-post__body a:hover { color: var(--wd-accent-dk); }

.eclat-post__body blockquote {
	margin: 26px 0;
	padding: 4px 0 4px 22px;
	border-inline-start: 3px solid var(--wd-accent);
	border-inline-end: 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--wd-head);
	font-style: normal;
}

[dir="rtl"] .eclat-post__body blockquote { padding: 4px 22px 4px 0; }

.eclat-post__body img,
.eclat-post__body figure { max-width: 100%; height: auto; }
.eclat-post__body figure { margin: 26px 0; }

.eclat-post__body figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--wd-soft);
	text-align: center;
}

.eclat-post__body table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 0 0 22px;
	border: 1px solid var(--wd-line);
}

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

.eclat-post__body th { background: var(--wd-alt); font-weight: 700; color: var(--wd-head); }

/* --------------------------------------------------------------------------
   WooCommerce blocks embedded in a post
   --------------------------------------------------------------------------
   `[products]` and the product blocks render their own `ul.products` grid with
   The7's floats on it, which inside an article column collapsed into a stack of
   full-width rows. Both are normalised to the same grid the rest of the site
   uses, and the wrapper is allowed to break the 820px reading measure because a
   product row needs the whole column.
   ----------------------------------------------------------------------- */
.eclat-post__body .woocommerce,
.eclat-post__body ul.products,
.eclat-post__body .wc-block-grid,
.eclat-post__body .wp-block-woocommerce-handpicked-products,
.eclat-post__body .wp-block-woocommerce-product-new,
.eclat-post__body .wp-block-woocommerce-product-best-sellers { max-width: none; }

.eclat-post__body ul.products,
.eclat-post__body .wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 26px 0;
	padding: 0;
	list-style: none;
	float: none;
}

.eclat-post__body ul.products::before,
.eclat-post__body ul.products::after { content: none; display: none; }

.eclat-post__body ul.products > li,
.eclat-post__body .wc-block-grid__product {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	clear: none !important;
	list-style: none;
	min-width: 0;
}

.eclat-post__body ul.products > li::marker { content: none; }

/* --- tags + share row ---------------------------------------------------- */
.eclat-post__tagshare {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--wd-line);
}

.eclat-post__tags,
.eclat-post__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.eclat-post__tagsk {
	font-family: var(--wd-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-head);
	margin-inline-end: 4px;
}

.eclat-post__tags a {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	background: var(--wd-alt);
	color: var(--wd-text);
	font-size: 12.5px;
	transition: background 0.18s ease, color 0.18s ease;
}

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

.eclat-post__share a,
.eclat-post__copy {
	position: relative;
	width: 32px;
	height: 32px;
	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.18s ease, border-color 0.18s ease, color 0.18s ease;
}

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

.eclat-post__copy.is-copied::after {
	content: attr(data-eclat-copied);
	position: absolute;
	bottom: calc(100% + 8px);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	padding: 5px 9px;
	background: var(--wd-dark);
	color: #fff;
	font-size: 11px;
	white-space: nowrap;
	pointer-events: none;
}

/* --- author box ---------------------------------------------------------- */
.eclat-authorbox {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	margin-top: 34px;
	padding: 26px;
	background: var(--wd-alt);
}

.eclat-authorbox__ava img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

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

.eclat-authorbox__name {
	margin: 0 0 8px;
	font-family: var(--wd-font-head);
	font-size: 18px;
	font-weight: 600;
	color: var(--wd-dark);
}

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

/* --- previous / next ----------------------------------------------------- */
.eclat-postnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 30px;
}

.eclat-postnav__l {
	display: grid;
	gap: 7px;
	padding: 18px 20px;
	border: 1px solid var(--wd-line);
	background: #fff;
	min-width: 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.eclat-postnav__l:hover { border-color: var(--wd-accent); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06); }

.eclat-postnav__next { text-align: end; }

.eclat-postnav__k {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--wd-soft);
}

.eclat-postnav__next .eclat-postnav__k { justify-content: flex-end; }
[dir="rtl"] .eclat-postnav__k svg { transform: scaleX(-1); }

.eclat-postnav__t {
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wd-head);
}

/* --- related rail -------------------------------------------------------- */
.eclat-related { margin-top: 44px; }

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

/* the rail inside an article column shows two, not three */
.eclat-related .eclat-carousel--posts .eclat-postcard {
	flex: 0 0 calc((100% - 30px) / 2);
	max-width: calc((100% - 30px) / 2);
}

/* --- comments ------------------------------------------------------------ */
.eclat-post__comments { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--wd-line); }

.eclat-post__comments .comments-title,
.eclat-post__comments .comment-reply-title {
	margin: 0 0 20px;
	font-family: var(--wd-font-head);
	font-size: 18px;
	font-weight: 600;
	color: var(--wd-dark);
}

.eclat-post__comments .commentlist,
.eclat-post__comments .comment-list {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.eclat-post__comments .commentlist li,
.eclat-post__comments .comment-list li {
	list-style: none;
	padding: 18px 0;
	border-bottom: 1px solid var(--wd-line);
}

.eclat-post__comments .comment-form { display: grid; gap: 14px; }

.eclat-post__comments input[type="text"],
.eclat-post__comments input[type="email"],
.eclat-post__comments input[type="url"],
.eclat-post__comments textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--wd-line);
	border-radius: 0;
	font-size: 14px;
	color: var(--wd-head);
}

.eclat-post__comments textarea { min-height: 140px; resize: vertical; }

.eclat-post__comments input:focus,
.eclat-post__comments textarea:focus {
	outline: none;
	border-color: var(--wd-accent);
}

/* the brands band closes a blog page the way it closes the shop */
.eclat-brands-band { border-top: 1px solid var(--wd-line); background: #fff; }

/* ==========================================================================
   6. BLOG RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
	.eclat-blog__layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 34px; }
	.eclat-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 992px) {
	.eclat-blog__layout { grid-template-columns: minmax(0, 1fr); gap: 44px; }

	.eclat-blog__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		display: grid;
		gap: 28px;
	}

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

@media (max-width: 768px) {
	.eclat-blog__wrap { padding-block: 26px 40px; }

	/* one column on a phone, exactly as briefed */
	.eclat-blog__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }

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

	.eclat-post__hero { margin-bottom: 18px; }
	.eclat-post__date { width: 50px; height: 50px; top: 12px; inset-inline-start: 12px; }

	.eclat-post__body { font-size: 15px; line-height: 1.8; }
	.eclat-post__body h2 { font-size: 21px; }
	.eclat-post__body h3 { font-size: 18px; }
	.eclat-post__body h4 { font-size: 16px; }

	.eclat-post__body ul.products,
	.eclat-post__body .wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.eclat-authorbox {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		gap: 14px;
		padding: 20px;
	}

	.eclat-authorbox__ava img { width: 76px; height: 76px; }

	.eclat-postnav { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.eclat-postnav__next { text-align: start; }
	.eclat-postnav__next .eclat-postnav__k { justify-content: flex-start; }

	.eclat-related { margin-top: 32px; }
	.eclat-related__title { font-size: 17px; }

	.eclat-related .eclat-carousel--posts .eclat-postcard {
		flex: 0 0 82%;
		max-width: 82%;
	}

	.eclat-pager { margin-top: 30px; gap: 6px; }
	.eclat-pager .page-numbers { min-width: 36px; height: 36px; font-size: 12.5px; padding: 0 9px; }
}