/* Product story: the written part of a product page.
   Reads as an article, not a marketing panel — one column, generous line height, a sand ground to
   separate it from the gallery above and the related products below. Falls back to sane values so
   it still looks composed if the child theme's tokens are not there. */

/* Moderno caps anything inside .c-product__after-summary at the boxed product width and centres
   it, so the band sat 1170 wide with 135px of white down each side — a stripe, not a band. Both
   sections take the full row back; the content inside them is what gets the gutter. */
.whd-story,
.whd-talk { max-width: none !important; width: 100%; }

.whd-story {
	margin: clamp(28px, 3.4vw, 50px) 0 0;
	padding: clamp(30px, 3.6vw, 52px) 0;
	background: var(--omc-cream, #fdfaf6);
	border-top: 1px solid var(--omc-line, #e9e1da);
	border-bottom: 1px solid var(--omc-line, #e9e1da);
}

/* Full width row, like every other row on the site. The copy inside still caps at a readable
   measure — a 1300px line of body copy is unreadable — but the picture takes a column of its own,
   which is what makes this read as an editorial spread rather than a text box. */
.whd-story__inner {
	width: 100%;
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
}
.whd-story__copy { max-width: 760px; margin-inline: auto; }

/* ─── Alternating spreads ──────────────────────────────────────────────────
   Each section of the story is a row: copy on one side, its photograph on the
   other, and every other row reversed. Reading down the page the eye crosses
   from left to right and back, which is what stops three sections of body copy
   reading as one long column. ──────────────────────────────────────────── */
/* Enough air to read as separate sections, not so much that the page feels padded out. */
.whd-story--rows .whd-story__row + .whd-story__row {
	margin-top: clamp(32px, 3.4vw, 54px);
}

@media (min-width: 900px) {
	.whd-story--rows .whd-story__row {
		display: grid;
		/* The copy takes the rest of the row; the photograph is given a width rather than a share,
		   so a wide screen makes the column of words longer instead of the picture taller. */
		grid-template-columns: minmax(0, 700px) minmax(0, 440px);
		gap: clamp(36px, 4vw, 68px);
		/* Both tracks are capped, so the slack on a wide screen goes between them rather than
		   inside the column of words — which is what left a hole beside every paragraph. */
		justify-content: space-between;
		align-items: center;
	}
	.whd-story--rows .whd-story__copy {
		max-width: none;
		margin-inline: 0;
	}
	/* A set height keeps a rhythm down the page and stops four lines of text sitting beside six
	   hundred pixels of photograph, which was most of the white space in this band. */
	.whd-story--rows .whd-story__figure {
		aspect-ratio: auto;
		height: clamp(340px, 30vw, 440px);
		max-height: none;
	}
	/* A hairline above each heading, the length of a word or two — the mark of a spread rather
	   than a paragraph that happens to sit next to a picture. */
	.whd-story--rows .whd-story__copy::before {
		content: "";
		display: block;
		width: 48px;
		height: 1px;
		margin-bottom: clamp(12px, 1.4vw, 18px);
		background: var(--omc-rose, #b98b7e);
	}
	.whd-story--rows .whd-story__row--flip .whd-story__copy::before { margin-left: 0; }
	/* Placement, not markup: the copy stays first in the document so it is read first, however the
	   row happens to be arranged. The template is mirrored as well as the placement, or the
	   photograph inherits the wide column on every other row and doubles in width. */
	.whd-story--rows .whd-story__row--flip { grid-template-columns: minmax(0, 440px) minmax(0, 700px); }
	.whd-story--rows .whd-story__row--flip .whd-story__copy { grid-column: 2; grid-row: 1; justify-self: end; }
	.whd-story--rows .whd-story__row--flip .whd-story__figure { grid-column: 1; grid-row: 1; }

	/* A section with no photograph of its own is a single centred column rather
	   than a half-width one with a hole beside it. */
	.whd-story--rows .whd-story__row--solo {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}
	.whd-story--rows .whd-story__row--solo .whd-story__copy {
		max-width: 720px;
		margin-inline: auto;
		/* A flipped row sends its copy to the second column; a solo row only has one, so the
		   placement has to be handed back or the section lands off the right-hand edge. */
		grid-column: 1;
		justify-self: center;
	}
	.whd-story--rows .whd-story__row--solo .whd-b-heading,
	.whd-story--rows .whd-story__row--solo .whd-b-text { text-align: center; }
	.whd-story--rows .whd-story__row--solo .whd-b-text ul { display: inline-block; text-align: left; }
}

/* The picture. One portrait frame whatever shape the photograph is, so the rows keep a rhythm,
   capped in height so a tall frame cannot set the height of a row of four lines of text. The sand
   sits behind it for the white-background product shots that do not fill their frame. */
.whd-story__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	max-height: 600px;
	background: var(--omc-sand, #f3ece6);
	overflow: hidden;
}
/* The block wrapper WHD_Blocks puts round the image has to stop taking part in layout, or the
   absolute image below has nothing to fill. */
.whd-story__figure .whd-b {
	/* The block carries its spacing in a style attribute, so the stylesheet has to insist here or
	   the picture finishes sixteen pixels above the bottom of its frame. */
	margin: 0 !important;
	/* The block wrapper carries the design padding; inside a frame it has to give it up, or the
	   picture ends up sixteen pixels short of the bottom. */
	padding: 0;
	position: absolute;
	inset: 0;
}
.whd-story__figure img {
	position: absolute;
	inset: 0;
	display: block;
	/* !important because WHD_Blocks writes the size into a style attribute - it has to, for email -
	   and inline beats a stylesheet. Without this the picture sits short in its frame with a band
	   of sand underneath it. */
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: 50% 28%;
	transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
.whd-story__row:hover .whd-story__figure img { transform: scale(1.03); }

@media (max-width: 899px) {
	/* Stacked: the photograph leads, then the words about it. */
	.whd-story--rows .whd-story__row { display: flex; flex-direction: column; }
	.whd-story--rows .whd-story__figure { order: -1; margin-bottom: clamp(14px, 2.4vw, 20px); }
	.whd-story--rows .whd-story__copy { max-width: none; margin-inline: 0; }
	/* Portrait on a phone too: these are photographs of clothes, and a landscape crop cuts the
	   garment in half. Capped so a row is never taller than a thumb's scroll. */
	.whd-story__figure { aspect-ratio: 4 / 5; max-height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
	.whd-story__figure img,
	.whd-story__row:hover .whd-story__figure img { transition: none; transform: none; }
}

/* The blocks themselves, as WHD_Blocks emits them in div mode. */
.whd-story .whd-b { margin: 0 0 clamp(11px, 1.3vw, 16px); }
.whd-story .whd-b:last-child { margin-bottom: 0; }

.whd-story .whd-b-heading {
	font-family: var(--omc-serif, Georgia, serif);
	font-weight: 500;
	font-size: clamp(24px, 2.4vw, 33px);
	line-height: 1.18;
	color: var(--omc-ink, #3a2b26);
	margin-top: clamp(26px, 3vw, 42px);
	/* Moderno uppercases and word-spaces everything it finds directly inside
	   .c-product__after-summary, which turned these sentences into signs. The rule lives in the
	   theme's compiled min.css, so !important is the honest way to win it back for this one block. */
	text-transform: none !important;
	letter-spacing: 0 !important;
	word-spacing: normal !important;
	font-variant: normal;
}
.whd-story .whd-b-heading--h3 { font-size: clamp(18px, 1.5vw, 21px); margin-top: clamp(24px, 2.8vw, 36px); }
.whd-story .whd-b-heading:first-child { margin-top: 0; }
.whd-story .whd-b-heading em { font-style: italic; color: var(--omc-rose-dark, #8a6a5e); }

/* Same rule reaches the body copy and the list. */
.whd-story .whd-b-text,
.whd-story .whd-b-text li { text-transform: none !important; word-spacing: normal !important; }

.whd-story .whd-b-text {
	font: 400 clamp(16px, 1.15vw, 17px)/1.8 var(--omc-sans, system-ui, sans-serif);
	color: var(--omc-text, #4a3f3a);
	text-wrap: pretty;
}
.whd-story .whd-b-text p { margin: 0 0 1em; }
.whd-story .whd-b-text p:last-child { margin-bottom: 0; }
.whd-story .whd-b-text strong { color: var(--omc-ink, #3a2b26); font-weight: 600; }
.whd-story .whd-b-text a { color: var(--omc-rose-dark, #8a6a5e); text-underline-offset: 3px; }

.whd-story .whd-b-text ul,
.whd-story .whd-b-text ol { margin: 0 0 1.1em; padding-left: 0; list-style: none; }
.whd-story .whd-b-text li {
	position: relative;
	padding-left: 22px;
	margin: 0 0 .55em;
	line-height: 1.7;
}
.whd-story .whd-b-text ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--omc-rose, #b98b7e);
}
.whd-story .whd-b-text ol { counter-reset: whd-story; }
.whd-story .whd-b-text ol li { counter-increment: whd-story; }
.whd-story .whd-b-text ol li::before {
	content: counter(whd-story);
	position: absolute;
	left: 0;
	top: 0;
	font: 600 12px/1.9 var(--omc-sans, system-ui, sans-serif);
	color: var(--omc-rose-dark, #8a6a5e);
}

.whd-story .whd-b-image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--omc-line, #e9e1da);
	background: #fff;
}
.whd-story .whd-b-image { margin-block: clamp(22px, 2.8vw, 34px); }

.whd-story .whd-b-divider hr,
.whd-story .whd-b-divider {
	border: 0;
	border-top: 1px solid var(--omc-line, #e9e1da);
	margin-block: clamp(24px, 3vw, 38px);
}

.whd-story .whd-b-button a {
	display: inline-block;
	padding: 13px 26px;
	font: 600 11px/1 var(--omc-sans, system-ui, sans-serif);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
}

@media (max-width: 767px) {
	.whd-story__inner { padding: 0 20px; }
}

/* ─── Notes from the community ─────────────────────────────────────────────
   Laid out like the story above it: a column that explains and invites on one
   side, the notes themselves on the other. As one centred 820px block it read
   as an afterthought floating in the middle of the page. ─────────────────── */
.whd-talk { padding: clamp(36px, 5vw, 70px) 0; border-bottom: 1px solid var(--omc-line, #e9e1da); }
.whd-talk__inner {
	width: 100%;
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.whd-talk__inner {
		display: grid;
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
		gap: clamp(40px, 5vw, 80px);
		align-items: start;
	}
	.whd-talk__aside { position: sticky; top: 96px; }
}

.whd-talk__title {
	margin: 0;
	font-family: var(--omc-serif, Georgia, serif);
	font-weight: 500;
	font-size: clamp(24px, 2.3vw, 31px);
	line-height: 1.15;
	color: var(--omc-ink, #3a2b26);
	/* Moderno uppercases, tracks out and centres everything directly inside
	   .c-product__after-summary, from its compiled min.css. */
	text-transform: none !important;
	letter-spacing: 0 !important;
	word-spacing: normal !important;
	text-align: left !important;
}
.whd-talk,
.whd-talk__inner,
.whd-talk__aside,
.whd-talk__main,
.whd-talk__lede,
.whd-talk__text { text-align: left !important; word-spacing: normal !important; }

.whd-talk__count {
	margin: 10px 0 0;
	font: 600 11px/1 var(--omc-sans, system-ui, sans-serif);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--omc-rose-dark, #8a6a5e);
}
.whd-talk__lede {
	margin: 12px 0 clamp(20px, 2.4vw, 26px);
	font: 400 15px/1.7 var(--omc-sans, system-ui, sans-serif);
	color: var(--omc-muted, #8a7d76);
}

.whd-talk__flag {
	margin: 0 0 20px;
	padding: 11px 15px;
	background: var(--omc-cream, #fdfaf6);
	border-left: 2px solid var(--omc-rose, #b98b7e);
	font: 400 14px/1.6 var(--omc-sans, system-ui, sans-serif);
	color: var(--omc-text, #4a3f3a);
}
.whd-talk__flag--empty,
.whd-talk__flag--error,
.whd-talk__flag--login { border-left-color: #b32d2e; }

/* Each note is a card, so one on its own still looks placed rather than stranded. */
.whd-talk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 18px); }
.whd-talk__item {
	display: flex;
	gap: 15px;
	align-items: flex-start;
	padding: clamp(18px, 2vw, 24px);
	background: var(--omc-cream, #fdfaf6);
	border: 1px solid var(--omc-line, #e9e1da);
}
.whd-talk__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--omc-line, #e9e1da);
	font: 600 15px/1 var(--omc-sans, system-ui, sans-serif);
	color: var(--omc-rose-dark, #8a6a5e);
}
.whd-talk__body { min-width: 0; }
.whd-talk__meta { margin: 0 0 5px; font: 400 13px/1.4 var(--omc-sans, system-ui, sans-serif); color: var(--omc-muted, #8a7d76); }
.whd-talk__meta strong { color: var(--omc-ink, #3a2b26); font-weight: 600; margin-right: 10px; }
.whd-talk__text p { margin: 0 0 .6em; font: 400 15px/1.75 var(--omc-sans, system-ui, sans-serif); color: var(--omc-text, #4a3f3a); }
.whd-talk__text p:last-child { margin-bottom: 0; }
.whd-talk__empty {
	margin: 0;
	padding: clamp(22px, 2.6vw, 30px);
	border: 1px dashed var(--omc-line, #e9e1da);
	font: 400 15px/1.7 var(--omc-sans, system-ui, sans-serif);
	color: var(--omc-muted, #8a7d76);
}

.whd-talk__label { display: block; margin: 0 0 8px; font: 600 11px/1.4 var(--omc-sans, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--omc-rose-dark, #8a6a5e); }
.whd-talk__field {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 15px;
	border: 1px solid var(--omc-line, #e9e1da);
	background: #fff;
	font: 400 15px/1.6 var(--omc-sans, system-ui, sans-serif);
	color: var(--omc-text, #4a3f3a);
	resize: vertical;
}
.whd-talk__field:focus { outline: 2px solid var(--omc-rose, #b98b7e); outline-offset: 1px; }

.whd-talk__submit {
	display: inline-block;
	margin-top: 12px;
	padding: 13px 24px;
	border: 1px solid var(--omc-ink, #3a2b26);
	background: var(--omc-ink, #3a2b26);
	color: #fff;
	font: 600 11px/1 var(--omc-sans, system-ui, sans-serif);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}
.whd-talk__submit:hover { background: transparent; color: var(--omc-ink, #3a2b26); }

.whd-talk__gate { padding: clamp(20px, 2.4vw, 26px); background: var(--omc-cream, #fdfaf6); border: 1px solid var(--omc-line, #e9e1da); }
.whd-talk__gate-text { margin: 0; font: 400 14px/1.7 var(--omc-sans, system-ui, sans-serif); color: var(--omc-text, #4a3f3a); }
.whd-talk__gate-actions { margin: 12px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.whd-talk__gate-actions .whd-talk__submit { margin-top: 0; }
.whd-talk__signin { font: 400 14px/1 var(--omc-sans, system-ui, sans-serif); color: var(--omc-rose-dark, #8a6a5e); text-underline-offset: 3px; }

@media (max-width: 1023px) {
	.whd-talk__aside { margin-bottom: clamp(24px, 3vw, 32px); }
}
@media (max-width: 767px) {
	.whd-talk__inner { padding: 0 20px; }
	.whd-talk__item { padding: 16px; gap: 12px; }
}

/* ─── A star rating on a community note ────────────────────────────────────
   Its own number under its own label. The product's star rating comes from
   reviews and nothing here is ever counted into it — a note is a styling
   remark, a review is a verdict, and mixing them makes both mean less. ─── */
.whd-stars {
	display: inline-flex;
	gap: 1px;
	line-height: 1;
	font-size: 13px;
	letter-spacing: .04em;
}
.whd-stars__s { color: #d9cfc9; }
.whd-stars__s.is-on { color: #b98b7e; }

/* The average, in the aside above the form. */
.whd-talk__avg {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0 0 10px;
}
.whd-talk__avg .whd-stars { font-size: 15px; align-self: center; }
.whd-talk__avg-num {
	font-family: var(--omc-serif, Georgia, serif);
	font-size: 20px;
	font-weight: 500;
	color: #3a2b26;
	line-height: 1;
}
.whd-talk__avg-of {
	font-size: 13px;
	color: #7a6a63;
}

/* On an individual note, beside the name. */
.whd-talk__rating { display: inline-flex; align-items: center; margin: 0 2px; }

/* ─── The rating field ───
   Radios in reverse DOM order so `~` can light every star to the left of the
   one under the pointer. No script, and it still works from the keyboard. */
.whd-rate {
	border: 0;
	padding: 0;
	margin: 0 0 14px;
}
.whd-rate__stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
	margin-top: 4px;
}
.whd-rate__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.whd-rate__star {
	font-size: 26px;
	line-height: 1;
	color: #d9cfc9;
	cursor: pointer;
	padding: 2px;
	transition: color .15s ease, transform .15s ease;
}
.whd-rate__star:hover,
.whd-rate__star:hover ~ .whd-rate__star,
.whd-rate__input:checked,
.whd-rate__input:checked ~ .whd-rate__star { color: #b98b7e; }
.whd-rate__star:hover { transform: scale(1.08); }
/* A visible ring when tabbing through, since the radio itself is off-screen. */
.whd-rate__input:focus-visible + .whd-rate__star {
	outline: 2px solid #9c6f63;
	outline-offset: 2px;
	border-radius: 3px;
}
.whd-rate__hint {
	margin: 4px 0 0;
	font-size: 12px;
	color: #7a6a63;
}

@media (prefers-reduced-motion: reduce) {
	.whd-rate__star { transition: none; }
	.whd-rate__star:hover { transform: none; }
}