/*
 * Detail-led category page (inc/detail-page.php). Figma "Detail · Wall to Wall Carpet" 2148:36261:
 * product block 36306, features 36344, specification 36452, care and maintenance 36515.
 * Builds on product.css and collection.css.
 */

/* Product block */
.tmw .tmw-block {
	display: flex;
	align-items: flex-start;
	gap: 64px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 64px 80px 80px;
}
.tmw .tmw-gallery {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: none;
	width: 696px;
}
.tmw .tmd-main-img {
	height: 520px;
}
.tmw .tmw-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.tmw .tmw-thumbs .tmd-thumb {
	width: 100%;
	height: 120px;
}
.tmw .tmw-detail {
	display: flex;
	flex-direction: column;
	gap: 32px;
	flex: 1;
	min-width: 0;
}
.tmw .tmw-detail .tmp-eyebrow {
	margin: 0 0 -24px;
}
.tmw .tmw-detail h1 {
	margin: 0;
	color: var(--ink, #171719);
	font-family: "SF Pro Display", "SF Pro Text", sans-serif;
	font-size: 56px;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -1.8px;
}
.tmw .tmw-intro {
	margin: -16px 0 0;
	color: var(--body, #656569);
	font-size: 17px;
	line-height: 1.65;
}
.tmw .tmw-facts {
	margin: 0;
}
.tmw .tmw-facts div {
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 16px 0;
	border-top: 1px solid var(--line, #E4E4E7);
}
.tmw .tmw-facts div:last-child {
	border-bottom: 1px solid var(--line, #E4E4E7);
}
.tmw .tmw-facts dt {
	flex: none;
	width: 184px;
	color: var(--body, #656569);
	font-size: 14px;
	line-height: 1.5;
}
.tmw .tmw-facts dd {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}
.tmw .tmw-facts dd.is-tbc {
	color: var(--muted, #96969A);
	font-weight: 400;
}
.tmw .tmd-actions {
	gap: 16px;
}
.tmw .tmd-btn {
	min-height: 53px;
}
body .tmw a.tmd-btn.is-secondary {
	min-height: 55px;
	font-weight: 500;
}
.tmw .tmw-note {
	margin: 0;
	color: var(--muted, #96969A);
	font-size: 13px;
	line-height: 1.5;
}

/* Section heads: eyebrow over heading */
.tmw .tmw-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tmw .tmw-head .tmp-eyebrow {
	margin: 0;
}
.tmw .tmw-head h2 {
	margin: 0;
	color: var(--ink, #171719);
	font-family: "SF Pro Display", "SF Pro Text", sans-serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -1px;
}

/* What every roll carries */
.tmw .tmw-features {
	padding: 88px 80px;
	background: var(--surface, #FBFBFA);
}
.tmw .tmw-features .tmp-in {
	gap: 48px;
}
.tmw .tmw-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--hair, #E4E2DD);
	border: 1px solid var(--hair, #E4E2DD);
}
.tmw .tmw-grid li {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px 24px;
	background: var(--white, #FFFFFF);
}
.tmw .tmw-icon {
	width: 28px;
	height: 28px;
	color: var(--tan, #6F6556);
}
.tmw .tmw-grid h3 {
	margin: 0 0 -8px;
	font-family: "SF Pro Text", sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
}
.tmw .tmw-grid p {
	margin: 0;
	color: var(--body, #656569);
	font-size: 14px;
	line-height: 1.58;
}

/* Specification: white on this page, wider gutter */
.tmw .tmd-spec {
	padding: 88px 80px;
	background: var(--white, #FFFFFF);
}
.tmw .tmd-spec .tmp-in {
	gap: 40px;
}
.tmw .tmp-spec-cols {
	gap: 64px;
}
.tmw .tmp-spec dl div {
	gap: 24px;
	padding: 16px 0;
	border-color: var(--line, #E4E4E7);
}
.tmw .tmp-spec dt {
	width: 192px;
	color: var(--body, #656569);
}

/* Care and maintenance */
.tmw .tmw-care {
	padding: 88px 80px;
	background: var(--warm, #F6F3EF);
}
.tmw .tmw-care .tmp-in {
	gap: 40px;
}
.tmw .tmw-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tmw .tmw-steps li {
	display: grid;
	grid-template-columns: 40px 360px minmax(0, 1fr);
	align-items: baseline;
	gap: 24px;
	padding: 24px 0;
}
.tmw .tmw-steps li + li {
	border-top: 1px solid var(--line, #E4E4E7);
}
.tmw .tmw-step-n {
	color: var(--tan, #6F6556);
	font-size: 13px;
	line-height: 1.5;
}
.tmw .tmw-steps h3 {
	margin: 0;
	font-family: "SF Pro Text", sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
}
.tmw .tmw-steps p {
	margin: 0;
	color: var(--body, #656569);
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.tmw .tmw-block {
		flex-direction: column;
		gap: 32px;
		padding: 24px 20px 56px;
	}
	.tmw .tmw-gallery {
		width: 100%;
	}
	.tmw .tmd-main-img {
		height: auto;
		aspect-ratio: 696 / 520;
	}
	.tmw .tmw-detail h1 {
		font-size: 40px;
		letter-spacing: -1px;
	}
	.tmw .tmw-features,
	.tmw .tmd-spec,
	.tmw .tmw-care {
		padding: 56px 20px;
	}
	.tmw .tmw-head h2 {
		font-size: 32px;
	}
	.tmw .tmw-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tmw .tmp-spec-cols {
		gap: 32px;
	}
	.tmw .tmw-steps li {
		grid-template-columns: 32px minmax(0, 1fr);
		gap: 8px 16px;
	}
	.tmw .tmw-steps p {
		grid-column: 2;
	}
}

@media (max-width: 767px) {
	.tmw .tmw-thumbs {
		gap: 8px;
	}
	.tmw .tmw-thumbs .tmd-thumb {
		height: 72px;
	}
	.tmw .tmw-detail h1 {
		font-size: 34px;
		letter-spacing: -.8px;
	}
	.tmw .tmw-intro {
		font-size: 15px;
		line-height: 1.6;
	}
	.tmw .tmw-facts dt {
		width: 120px;
		font-size: 13px;
	}
	.tmw .tmw-head h2 {
		font-size: 28px;
		letter-spacing: -.5px;
	}
	.tmw .tmw-grid {
		grid-template-columns: 1fr;
	}
	.tmw .tmw-grid li {
		padding: 24px 20px;
	}
	.tmw .tmp-spec dt {
		width: 44%;
	}
}