/**
 * Product page modules (see inc/pdp.php).
 *
 * Loaded only on single products, after woocommerce.css, which still owns the two-column frame,
 * the summary type and the add-to-cart controls. This file adds the trust block, the spec
 * accordions, the scale figure, the FAQ, the reviews module, the recommendations grid and the
 * sticky bar. The gallery itself lives in woocommerce.css, next to the frame it sits in.
 */

/* ------------------------------------------------------------- summary -- */

/* The frame is woocommerce.css's; this only reasserts the column alignment the
   modules below would otherwise stretch. Below 1024 the page is one column and
   every row is meant to run the full width, so leave that alone. */
@media (min-width: 1024px) {
	.cn-pdp {
		align-items: start;
	}
}

.cn-pdp__rating {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	color: var(--wp--preset--color--ink-muted);
	font-size: 13.5px;
	text-decoration: none;
}

.cn-pdp__rating:hover .cn-pdp__rating-count {
	color: var(--wp--preset--color--honey-brass);
}

/* --------------------------------------------------------- trust block -- */

.cn-trust-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 20px;
	margin: 0 0 26px;
	padding: 18px 0;
	border-top: var(--cn-rule);
	border-bottom: var(--cn-rule);
	list-style: none;
}

.cn-trust-list__item {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--ink-soft);
	font-size: 13px;
	line-height: 1.35;
}

.cn-trust-list__item svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--wp--preset--color--walnut);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cn-trust-list__item a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--greige);
	text-underline-offset: 3px;
}

.cn-trust-list__item a:hover {
	color: var(--wp--preset--color--walnut);
	text-decoration-color: currentColor;
}

/* The trust block follows the assurance line; take the rule off the accordions above it. */
.cn-trust-list + .cn-acc {
	border-top: none;
}

/* ------------------------------------------------------------ spec panels */

/* Closed panels ship hidden to avoid a layout shift; without JavaScript they open. */
html:not(.js) .cn-acc__panel[hidden] {
	display: block;
}

.cn-spec .cn-acc__panel p + p {
	margin-top: 10px;
}

.cn-bullets {
	margin: 12px 0 0;
	padding-left: 18px;
}

.cn-bullets li {
	margin-bottom: 6px;
}

/* Material swatches at the head of Materials and finish: a piece of each
   material with its name under it, cut with a pinked zigzag edge so it reads as
   a sample snipped from the roll rather than a tile. */
.cn-mats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(76px, 92px));
	gap: 14px 12px;
	margin: 4px 0 14px;
	padding: 0;
	list-style: none;
}

.cn-mats__item {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

/* The pinking-shear edge: eight teeth a side, biting 6% in. A hairline ring
   would be sliced up by the clip, so the cut silhouette carries the edge. */
.cn-mats__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--wp--preset--color--oat-shade);
	clip-path: polygon(
		0% 0%, 12.5% 6%, 25% 0%, 37.5% 6%, 50% 0%, 62.5% 6%, 75% 0%, 87.5% 6%,
		100% 0%, 94% 12.5%, 100% 25%, 94% 37.5%, 100% 50%, 94% 62.5%, 100% 75%, 94% 87.5%,
		100% 100%, 87.5% 94%, 75% 100%, 62.5% 94%, 50% 100%, 37.5% 94%, 25% 100%, 12.5% 94%,
		0% 100%, 6% 87.5%, 0% 75%, 6% 62.5%, 0% 50%, 6% 37.5%, 0% 25%, 6% 12.5%
	);
}

.cn-mats__img--glass {
	background: linear-gradient(150deg, #f3f1ec 0%, #dfe4e3 45%, #c9d1d0 55%, #eef0ed 100%);
}

.cn-mats__img--plain {
	background: linear-gradient(160deg, var(--wp--preset--color--oat-deep), var(--wp--preset--color--greige));
}

.cn-mats__name {
	color: var(--wp--preset--color--ink-soft);
	font-size: 12.5px;
	line-height: 1.3;
}

.cn-mats__finish {
	margin: 0 0 12px;
	color: var(--wp--preset--color--ink-muted);
	font-size: 13px;
}

/* Why a companion was picked, e.g. "Same mango wood". */
.cn-fbt__why {
	display: block;
	color: var(--wp--preset--color--muted-olive);
	font-size: 12px;
	letter-spacing: 0.02em;
}

.cn-assembly__guide {
	margin-top: 14px;
	font-size: 14px;
}

.cn-spec .cn-dims {
	margin: 0;
}

.cn-dims__row dd {
	margin: 0;
	text-align: right;
}

.cn-dims__row dd small {
	display: block;
	color: var(--wp--preset--color--ink-muted);
	font-size: 12px;
}

.cn-scale__hint {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	font-style: italic;
}

.cn-scale {
	margin: 0 0 16px;
	padding: 12px 14px 6px;
	background: var(--wp--preset--color--oat-deep);
}

.cn-scale svg {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	color: var(--wp--preset--color--ink-muted);
}

.cn-scale__ground {
	stroke: var(--wp--preset--color--greige);
	stroke-width: 1;
}

.cn-scale__figure {
	fill: var(--wp--preset--color--greige);
}

.cn-scale__piece {
	fill: var(--wp--preset--color--walnut);
	fill-opacity: 0.85;
}

.cn-scale__label {
	fill: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------- FAQ --- */

/*
 * The questions alone, running the full width.
 *
 * There is no heading to hold in a column any more, and nothing to balance it
 * against, so each question is simply a rule across the page.
 */
.cn-faq {
	padding: clamp(10px, 1.6vw, 22px) var(--cn-gutter) clamp(56px, 6vw, 88px);
}

/*
 * The tail of a product page: quiz, then the newsletter, then the questions.
 *
 * All three carry the standing padding meant for sections that sit between
 * full-bleed bands, which stacked into a screen of empty oat. Here they run as
 * one closing sequence, so each hands straight to the next.
 */
/*
 * The banner runs to both edges at every width, so the quiz block drops the 1040px cage, the
 * gutter and its top padding, which otherwise left a thin band of page above the picture. The
 * steps and the board carry their own gutter, and their own top air once the banner is gone.
 */
.single-product .cn-quiz--pdp {
	max-width: none;
	padding-block: 0 clamp(8px, 1.2vw, 16px);
	padding-inline: 0;
}

.single-product .cn-quiz--pdp .cn-quiz__intro {
	margin-inline: auto;
	text-align: center;
}

.single-product .cn-quiz--pdp .cn-quiz__steps,
.single-product .cn-quiz--pdp .cn-quiz__result {
	max-width: 1040px;
	margin-inline: auto;
	padding-block-start: clamp(24px, 3vw, 44px);
	padding-inline: 20px;
}

.single-product .cn-faq {
	padding-block: clamp(20px, 2.4vw, 32px) clamp(12px, 1.6vw, 22px);
}

.single-product .cn-news {
	padding-block: clamp(20px, 2.4vw, 32px) clamp(40px, 4.5vw, 64px);
}

.cn-faq__list .cn-acc__trigger {
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	letter-spacing: 0;
	text-transform: none;
}

/* ------------------------------------------------------------ reviews -- */

.cn-reviews {
	padding: 72px var(--cn-gutter);
	background: var(--wp--preset--color--oat-deep);
}

.cn-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

.cn-reviews__head .cn-section-title {
	margin: 0;
}

.cn-reviews__write {
	display: inline-block;
	padding: 12px 20px;
	border: 1px solid var(--wp--preset--color--warm-ink);
	color: var(--wp--preset--color--warm-ink);
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background var(--cn-ease), color var(--cn-ease);
}

.cn-reviews__write:hover {
	background: var(--wp--preset--color--warm-ink);
	color: var(--wp--preset--color--oat);
}

.cn-reviews__summary {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 360px);
	gap: 32px 56px;
	margin-bottom: 28px;
}

.cn-reviews__score {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cn-reviews__avg {
	font-family: var(--wp--preset--font-family--display);
	font-size: 56px;
	line-height: 1;
}

.cn-reviews__total {
	color: var(--wp--preset--color--ink-muted);
	font-size: 13px;
}

.cn-reviews__bars {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-reviews__bar {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) 28px;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 4px 0;
	border: none;
	background: none;
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
}

.cn-reviews__bar[aria-pressed="true"] {
	color: var(--wp--preset--color--walnut);
	font-weight: 600;
}

.cn-reviews__bar-track {
	display: block;
	height: 6px;
	background: var(--wp--preset--color--greige);
	overflow: hidden;
}

.cn-reviews__bar-fill {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--honey-brass);
}

.cn-reviews__bar-count {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.cn-reviews__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	padding: 14px 0;
	border-top: var(--cn-rule);
	border-bottom: var(--cn-rule);
	font-size: 13px;
}

.cn-reviews__sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cn-reviews__sort select {
	padding: 6px 28px 6px 8px;
	border: 1px solid var(--wp--preset--color--greige);
	background: transparent;
	color: inherit;
	font: inherit;
}

.cn-reviews__photos-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.cn-reviews__showing {
	margin-left: auto;
	color: var(--wp--preset--color--ink-muted);
}

.cn-reviews__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 48px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.cn-review {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cn-review[hidden] {
	display: none;
}

.cn-review__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	font-style: italic;
	line-height: 1.5;
}

.cn-review__text p {
	margin: 0;
}

.cn-review__photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-review__photos img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
}

.cn-review__who {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: 13px;
}

.cn-review__author {
	color: var(--wp--preset--color--warm-ink);
}

.cn-review__verified {
	color: var(--wp--preset--color--muted-olive);
}

.cn-reviews__none,
.cn-reviews__gate {
	margin: 24px 0 0;
	color: var(--wp--preset--color--ink-muted);
}

.cn-reviews__empty {
	max-width: 46ch;
	padding: 8px 0 12px;
}

.cn-reviews__empty-lead {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 26px;
}

.cn-reviews__empty p {
	color: var(--wp--preset--color--ink-soft);
}

.cn-reviews__empty .cn-reviews__write {
	margin-top: 10px;
}

/* The form: revealed by the "Write a review" control; visible without JS. */
.cn-reviews__form {
	max-width: 620px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: var(--cn-rule);
}

.cn-reviews__form[hidden] {
	display: none;
}

.cn-reviews__form .comment-reply-title {
	display: block;
	margin-bottom: 18px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
}

.cn-reviews__form label {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cn-reviews__form input[type="text"],
.cn-reviews__form input[type="email"],
.cn-reviews__form textarea,
.cn-reviews__form select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--greige);
	background: var(--wp--preset--color--ivory);
	font: inherit;
}

.cn-reviews__form p {
	margin: 0 0 16px;
}

.cn-reviews__form .form-submit input {
	padding: 14px 24px;
	border: none;
	background: var(--wp--preset--color--warm-ink);
	color: var(--wp--preset--color--oat);
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.cn-form__opt {
	color: var(--wp--preset--color--ink-muted);
	text-transform: none;
	letter-spacing: 0;
}

/* ------------------------------------------------------ recommendations */

.cn-related {
	padding: 80px var(--cn-gutter);
}

.cn-recs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

/* ------------------------------------------------------------ sticky --- */

.cn-sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px var(--cn-gutter);
	background: var(--wp--preset--color--oat);
	border-top: var(--cn-rule);
	box-shadow: 0 -8px 24px rgba(41, 36, 32, 0.08);
	transform: translateY(100%);
	transition: transform var(--cn-ease);
}

.cn-sticky-atc.is-visible {
	transform: none;
}

.cn-sticky-atc[hidden] {
	display: none;
}

.cn-sticky-atc__thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	background: var(--wp--preset--color--oat-shade);
	overflow: hidden;
}

.cn-sticky-atc__meta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.cn-sticky-atc__sub {
	display: flex;
	gap: 8px;
	color: var(--wp--preset--color--ink-muted);
	font-size: 13px;
}

.cn-sticky-atc__variant:empty {
	display: none;
}

.cn-sticky-atc__variant::after {
	content: "·";
	margin-left: 8px;
}

.cn-sticky-atc__price {
	color: var(--wp--preset--color--warm-ink);
}

.cn-sticky-atc__button {
	flex: 0 0 auto;
	min-width: 180px;
	height: 48px;
	padding: 0 24px;
}

@media (prefers-reduced-motion: reduce) {
	.cn-sticky-atc {
		transition: none;
	}
}

/* -------------------------------------------------------------- mobile -- */

@media (max-width: 1023px) {
	.cn-trust-list {
		grid-template-columns: 1fr;
		gap: 8px;
		margin: 0 0 18px;
		padding: 14px 0;
	}

	.cn-trust-list__item {
		font-size: 12.5px;
	}

	.cn-faq {
		padding: 8px var(--cn-gutter) 44px;
	}

	.cn-faq__list .cn-acc__trigger {
		font-size: 15.5px;
	}

	.cn-reviews {
		padding: 44px var(--cn-gutter);
	}

	.cn-reviews__summary {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.cn-reviews__avg {
		font-size: 44px;
	}

	.cn-reviews__list {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.cn-related {
		padding: 44px var(--cn-gutter);
	}

	.cn-recs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.cn-sticky-atc {
		gap: 10px;
		padding: 10px 16px;
	}

	.cn-sticky-atc__thumb {
		display: none;
	}

	.cn-sticky-atc__name {
		font-size: 14px;
	}

	.cn-sticky-atc__sub {
		font-size: 12px;
	}

	.cn-sticky-atc__button {
		min-width: 0;
		flex: 0 0 44%;
		padding: 0 12px;
	}
}

/* ------------------------------------------------------- quantity breaks */

.cn-qty-breaks {
	margin: 0 0 18px;
}

.cn-qty-breaks__label {
	display: block;
	margin-bottom: 8px;
	color: var(--wp--preset--color--ink-muted);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cn-qty-breaks__tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
}

.cn-qty-breaks__tier {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--greige);
	background: transparent;
	color: var(--wp--preset--color--warm-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--cn-ease), background var(--cn-ease);
}

.cn-qty-breaks__tier:hover {
	border-color: var(--wp--preset--color--walnut);
}

.cn-qty-breaks__tier.is-active {
	border-color: var(--wp--preset--color--warm-ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--warm-ink);
}

.cn-qty-breaks__qty {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cn-qty-breaks__unit {
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
}

.cn-qty-breaks__unit small {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11.5px;
	color: var(--wp--preset--color--ink-muted);
}

.cn-qty-breaks__save {
	color: var(--wp--preset--color--muted-olive);
	font-size: 12px;
}

/* --------------------------------------------- frequently bought together */

/*
 * Four squares in a grid rather than four lines in a list. The module lives in
 * the gallery column, where a row layout left the thumbnail at 64px: too small
 * to recognise a piece of furniture by, so the name had to do the work the
 * photograph should be doing. The card is now the photograph, with the tick in
 * its corner and two lines of type beneath it.
 */

.cn-fbt {
	padding: 24px var(--cn-gutter) 56px;
}

.cn-fbt__layout {
	display: grid;
	gap: 24px;
}

.cn-fbt__stack {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Relative for the tick, which overlays the image: a label cannot be nested
   inside the anchor that wraps it. */
.cn-fbt__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	transition: opacity var(--cn-ease);
}

/* Unticked pieces fade but stay legible. The card is still a link to a
   product, not a disabled control. */
.cn-fbt__item.is-unchecked {
	opacity: 0.42;
}

.cn-fbt__thumb {
	display: block;
	aspect-ratio: 1;
	background: var(--wp--preset--color--oat-shade);
	overflow: hidden;
}

.cn-fbt__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cn-fbt__check {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	padding: 6px;
	background: var(--wp--preset--color--ivory);
	cursor: pointer;
}

.cn-fbt__check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wp--preset--color--walnut);
	cursor: pointer;
}

.cn-fbt__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/* A tag on the photograph opposite the tick, rather than a line above the
   name. In the body it pushed the current piece's title and price a row lower
   than its neighbour's, and the two cards stopped reading as a pair. */
.cn-fbt__this {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	padding: 6px 8px;
	background: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--ink-muted);
	font-size: 10px;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

/* Two lines, hard. Supplier titles run to a dozen words, and a card that grows
   to fit one of them drags its whole row out of alignment. */
.cn-fbt__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: var(--wp--preset--color--warm-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14.5px;
	line-height: 1.3;
	text-decoration: none;

	/* Always two lines deep, so a one-line title and a two-line title still put
	   their prices on the same baseline across a row. */
	min-height: 2.6em;
}

a.cn-fbt__name:hover {
	color: var(--wp--preset--color--honey-brass);
}

.cn-fbt__price {
	font-size: 13px;
}

.cn-fbt__summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 4px 16px;
	padding: 18px 20px;
	background: var(--wp--preset--color--oat-deep);
}

.cn-fbt__count {
	color: var(--wp--preset--color--ink-muted);
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cn-fbt__total {
	justify-self: end;
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
}

.cn-fbt__add {
	grid-column: 1 / -1;
	margin-top: 12px;
	height: 48px;
	border: 0;
	background: var(--wp--preset--color--warm-ink);
	color: var(--wp--preset--color--oat);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.cn-fbt__add:hover {
	background: var(--wp--preset--color--walnut);
}

.cn-fbt__add:disabled {
	opacity: 0.5;
	cursor: default;
}

@media (max-width: 1023px) {
	.cn-fbt {
		padding: 8px var(--cn-gutter) 40px;
	}

	.cn-fbt__stack {
		gap: 18px 12px;
	}

	.cn-fbt__name {
		font-size: 13.5px;
	}

	.cn-qty-breaks__tiers {
		grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	}
}

/* ------------------------------------ frequently bought together, in column */

/*
 * The module sits in the gallery column rather than full width beneath both of
 * them. The gallery is a grid of squares and the summary is a tall stack of
 * accordions, so the left column always runs out first; this fills that with
 * the one thing a shopper might add without leaving the page, and the outline
 * makes it read as its own object rather than as more gallery.
 */
.cn-pdp__gallery .cn-fbt {
	margin-top: 28px;
	padding: 24px 26px 26px;
	border: var(--cn-rule);
	background: var(--wp--preset--color--ivory);
}

.cn-pdp__gallery .cn-fbt .cn-section-title {
	margin-bottom: 18px;
	font-size: 21px;
}

.cn-pdp__gallery .cn-fbt__layout {
	gap: 22px;
}

.cn-pdp__gallery .cn-fbt__summary {
	padding: 18px 20px;
}

/*
 * One row of four, so the panel fills the column it sits in. Two by two at this
 * width made each card nearly as large as the gallery cell above it, and the
 * ways round that were all worse: narrowing the panel left it floating short of
 * the gallery edge, and three across strands the fourth piece alone on a second
 * row beside two empty cells. Four fills the width at every count the module
 * renders, three companions or two.
 */
.cn-pdp__gallery .cn-fbt__stack {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px 16px;
}

.cn-pdp__gallery .cn-fbt__name {
	font-size: 13.5px;
}

/*
 * The column count alternates down the breakpoints because the panel's width
 * does not shrink smoothly: it tracks half the page until 1024, then jumps to
 * the whole of it when the product layout stacks. Four across is right whenever
 * the panel is wide, two whenever it is half of a narrow page.
 */
@media (max-width: 1279px) {
	.cn-pdp__gallery .cn-fbt__stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.cn-pdp__gallery .cn-fbt__stack {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 22px 14px;
	}
}

/* Four across stops being legible on a phone; back to the pair. */
@media (max-width: 767px) {
	.cn-pdp__gallery .cn-fbt {
		margin: 24px var(--cn-gutter) 0;
		padding: 20px;
	}

	.cn-pdp__gallery .cn-fbt__stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 12px;
	}
}

/* ------------------------------------------------- made to be lived with -- */

/*
 * The last argument before the FAQ: what the material does over years, how to
 * look after it, and what is covered. Type only on a flat ground, in the same
 * register as the homepage promise, because a band of photographs here would
 * compete with the gallery a screen above it.
 */
.cn-ages {
	padding: clamp(64px, 7vw, 104px) var(--cn-gutter);
	background: var(--wp--preset--color--oat-deep);
}

.cn-ages__inner {
	max-width: 1120px;
	margin: 0 auto;
}

.cn-ages__title {
	max-width: 20ch;
	margin: 0 0 clamp(36px, 4vw, 56px);
	text-wrap: balance;
	color: var(--wp--preset--color--warm-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(28px, 3.2vw, 46px);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.14;
}

.cn-ages__title em {
	font-style: italic;
}

/* Hairlines rather than boxes, matching the promise section. Two notes or
   three: the track follows the count so a two-note piece does not leave a
   third of the row empty. */
.cn-ages__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	border-top: var(--cn-rule);
	list-style: none;
}

.cn-ages__note {
	padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.4vw, 34px) clamp(24px, 2.6vw, 34px) 0;
}

.cn-ages__note + .cn-ages__note {
	padding-left: clamp(20px, 2.4vw, 34px);
	border-left: var(--cn-rule);
}

.cn-ages__label {
	display: block;
	margin-bottom: 10px;
	color: var(--wp--preset--color--muted-olive);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cn-ages__note-title {
	margin: 0 0 10px;
	color: var(--wp--preset--color--warm-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 400;
	line-height: 1.2;
}

.cn-ages__text {
	margin: 0;
	max-width: 40ch;
	color: var(--wp--preset--color--ink-soft);
	font-size: clamp(14px, 1.05vw, 15.5px);
	line-height: 1.65;
	text-wrap: pretty;
}

@media (max-width: 767px) {
	.cn-ages__list {
		grid-template-columns: 1fr;
	}

	.cn-ages__note {
		padding: 22px 0;
	}

	.cn-ages__note + .cn-ages__note {
		padding-left: 0;
		border-top: var(--cn-rule);
		border-left: 0;
	}
}

/* ------------------------------------------------------ finish swatches -- */

/*
 * The same piece in another finish. Photographs rather than colour dots: a dot
 * tells you black from white but not weathered oak from chestnut, and between
 * two brown timbers that difference is the whole decision.
 */
.cn-colours {
	margin: 22px 0 4px;
}

.cn-colours__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 10px;
}

.cn-colours__label {
	color: var(--wp--preset--color--ink-muted);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cn-colours__current {
	color: var(--wp--preset--color--warm-ink);
	font-size: 14px;
}

.cn-colours__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The frame sits outside the photograph rather than on it, so the selected
   state does not crop the piece it is meant to be showing. */
.cn-colours__swatch {
	display: block;
	width: 58px;
	height: 58px;
	padding: 3px;
	border: 1px solid transparent;
	background: var(--wp--preset--color--oat-shade);
	transition: border-color var(--cn-ease);
}

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

.cn-colours__swatch:hover {
	border-color: var(--wp--preset--color--greige);
}

.cn-colours__swatch.is-current {
	border-color: var(--wp--preset--color--warm-ink);
}

.cn-colours__swatch:focus-visible {
	outline: var(--cn-focus);
	outline-offset: 2px;
}