/*
 * Flooring product page (inc/product-page.php). Figma "PDP · Gemini (Astrid)" 2148:35288:
 * product block 35339, specification 35414, compare 35485, more 35593, downloads 35657, FAQs 35736.
 * Builds on collection.css (.tmp-head, spec table, more grid) and catalogue.css.
 */

/* Product block: gallery and the sticky panel */
.tmd .tmd-block {
	display: flex;
	align-items: flex-start;
	max-width: 1440px;
	margin: 0 auto;
	padding: 56px 80px 80px;
}
.tmd .tmd-gallery {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
	min-width: 0;
	padding: 16px 60px 0 0;
}
.tmd .tmd-main-img {
	display: block;
	width: 100%;
	height: 540px;
	object-fit: cover;
}
.tmd .tmd-thumbs {
	display: flex;
	gap: 14px;
	overflow-x: auto;
}
.tmd .tmd-thumb {
	position: relative;
	flex: none;
	width: 100px;
	height: 100px;
	padding: 0;
	background: var(--line, #E4E4E7);
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
}
.tmd .tmd-thumb.is-on {
	border: 2px solid var(--ink, #171719);
}
.tmd .tmd-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tmd .tmd-thumb span {
	position: absolute;
	left: 6px;
	top: 6px;
	padding: 0 4px;
	background: rgba(255, 255, 255, .85);
	color: var(--muted, #96969A);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.tmd .tmd-panel {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: none;
	width: 470px;
}
.tmd .tmd-intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tmd .tmd-intro 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.08;
	letter-spacing: -2px;
}
.tmd .tmd-intro p {
	margin: 0;
	color: var(--body, #656569);
	font-size: 17px;
	line-height: 1.68;
}
.tmd .tmd-key {
	margin: 0;
}
.tmd .tmd-key div {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 13px 0;
	border-top: 1px solid #ECECEE;
}
.tmd .tmd-key dt {
	flex: none;
	width: 150px;
	color: var(--muted, #96969A);
	font-size: 14px;
	line-height: 1.6;
}
.tmd .tmd-key dd {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
}
.tmd .tmd-key dd.is-tbc {
	color: var(--muted, #96969A);
	font-weight: 400;
}
.tmd .tmd-ways .tmp-label {
	margin-bottom: 14px;
}
.tmd .tmd-ways ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tmd .tmd-ways a {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 50px;
	text-align: center;
}
.tmd .tmd-ways img,
.tmd .tmd-ways .tmp-noimg {
	display: block;
	width: 50px;
	height: 44px;
	object-fit: cover;
	border: 1px solid transparent;
}
.tmd .tmd-ways a.is-on img {
	border: 2px solid var(--ink, #171719);
}
.tmd .tmd-ways a:hover img {
	border-color: var(--border, #9C9CA2);
}
.tmd .tmd-ways span {
	color: var(--muted, #96969A);
	font-size: 10px;
	line-height: 1.6;
}
.tmd .tmd-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tmd .tmd-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 16px 30px;
	background: var(--ink, #171719);
	border: 1px solid var(--ink, #171719);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	transition: opacity var(--m-dur-s, 200ms);
}
body .tmd a.tmd-btn {
	color: var(--white, #FFFFFF);
}
body .tmd a.tmd-btn.is-secondary {
	min-height: 60px;
	background: var(--white, #FFFFFF);
	color: var(--ink, #171719);
	font-weight: 600;
}
body .tmd a.tmd-btn.is-secondary:hover {
	background: var(--ink, #171719);
	color: var(--white, #FFFFFF);
}
body .tmd a.tmd-btn.is-in {
	background: var(--ok, #EDF1EC);
	border-color: var(--ok, #EDF1EC);
	color: var(--ink, #171719);
}
body .tmd a.tmd-btn.is-full {
	background: var(--surface, #FBFBFA);
	border-color: var(--line, #E4E4E7);
	color: var(--body, #656569);
}
.tmd .tmd-btn.is-busy {
	opacity: .55;
	pointer-events: none;
}
.tmd .tmd-btn-icon {
	width: 20px;
	height: 20px;
}
.tmd .tmd-trust {
	display: flex;
	justify-content: space-between;
	gap: 22px;
	margin: 8px 0 0;
	color: var(--muted, #96969A);
	font-size: 13px;
	line-height: 1.6;
}
body .tmd .tmd-trust a {
	color: #34C759;
	font-weight: 600;
}

/* Specification on the product page sits on the light band, with Compare */
.tmd .tmd-spec {
	background: var(--surface, #FBFBFA);
}

/* Compare */
.tmd .tmd-compare {
	padding: 24px 80px 84px;
	background: var(--surface, #FBFBFA);
}
.tmd .tmd-compare .tmp-in {
	gap: 24px;
}
.tmd .tmd-compare-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
}
.tmd .tmd-compare-head .tmp-eyebrow {
	margin: 0 0 14px;
	color: var(--muted, #96969A);
}
.tmd .tmd-compare-head h2 {
	margin: 0 0 12px;
	font-family: "SF Pro Display", "SF Pro Text", sans-serif;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.8px;
}
.tmd .tmd-compare-sub {
	margin: 0;
	color: var(--body, #656569);
	font-size: 16px;
	line-height: 1.6;
}
.tmd .tmd-clear {
	flex: none;
	padding: 0;
	background: none;
	border: 0;
	color: var(--muted, #96969A);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
.tmd .tmd-clear:hover {
	color: var(--ink, #171719);
}
.tmd .tmd-cmp-scroll {
	overflow-x: auto;
}
.tmd .tmd-cmp {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 900px;
}
.tmd .tmd-strip,
.tmd .tmd-tr {
	display: grid;
	grid-template-columns: 230px repeat(3, minmax(0, 1fr));
}
.tmd .tmd-strip {
	gap: 1px;
}
.tmd .tmd-cc {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px 20px 20px;
	background: var(--white, #FFFFFF);
	border: 1px solid var(--line, #E4E4E7);
}
.tmd .tmd-cc.is-viewing {
	border-color: var(--ink, #171719);
}
.tmd .tmd-cc-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--muted, #96969A);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}
.tmd .tmd-cc.is-viewing .tmd-cc-top {
	color: var(--ink, #171719);
}
.tmd .tmd-cc-x {
	padding: 0 2px;
	background: none;
	border: 0;
	color: var(--muted, #96969A);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.tmd .tmd-cc-x:hover {
	color: var(--ink, #171719);
}
.tmd .tmd-cc img,
.tmd .tmd-cc .tmp-noimg {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}
.tmd .tmd-cc-name {
	font-family: "SF Pro Display", "SF Pro Text", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}
.tmd .tmd-cc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: -4px;
}
.tmd .tmd-cc-chips span {
	padding: 5px 10px;
	border: 1px solid var(--line, #E4E4E7);
	color: var(--body, #656569);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.55;
}
.tmd .tmd-cc.is-add {
	justify-content: center;
	border-style: dashed;
	border-color: var(--border-light, #C9C9CE);
}
body .tmd .tmd-cc select {
	width: 100%;
	height: 48px;
	padding: 0 12px;
	background: var(--white, #FFFFFF);
	border: 1px solid var(--border, #9C9CA2);
	border-radius: 0;
	color: var(--ink, #171719);
	font: inherit;
	font-size: 15px;
}
.tmd .tmd-cc-hint {
	color: var(--muted, #96969A);
	font-size: 13px;
	line-height: 1.5;
}
.tmd .tmd-table {
	border: 1px solid var(--line, #E4E4E7);
	background: var(--white, #FFFFFF);
}
.tmd .tmd-tr + .tmd-tr {
	border-top: 1px solid var(--line, #E4E4E7);
}
.tmd .tmd-tr > span {
	padding: 17px 20px;
	font-size: 15px;
	line-height: 1.5;
}
.tmd .tmd-tr > span + span {
	border-left: 1px solid var(--line, #E4E4E7);
}
.tmd .tmd-tr > span:first-child {
	background: var(--surface, #FBFBFA);
	font-weight: 500;
}
.tmd .tmd-tr.is-head > span {
	padding: 12px 20px;
	color: var(--muted, #96969A);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}
.tmd .tmd-tr .is-same {
	color: var(--muted, #96969A);
}
.tmd .tmd-tr .is-diff {
	color: var(--ink, #171719);
	font-weight: 500;
}
.tmd .tmd-tr.is-note {
	display: block;
}
.tmd .tmd-tr.is-note span {
	display: block;
	background: var(--white, #FFFFFF);
	color: var(--body, #656569);
	font-weight: 400;
}
.tmd .tmd-identical {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 18px 20px;
	border-top: 1px solid var(--line, #E4E4E7);
}
.tmd .tmd-identical p {
	margin: 0;
	color: var(--body, #656569);
	font-size: 15px;
	line-height: 1.5;
}
.tmd .tmd-toggle {
	flex: none;
	padding: 10px 16px;
	background: var(--white, #FFFFFF);
	border: 1px solid var(--line, #E4E4E7);
	border-radius: 0;
	color: var(--ink, #171719);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
}
.tmd .tmd-toggle:hover {
	border-color: var(--ink, #171719);
}

/* Downloads */
.tmd .tmd-docs {
	padding: 72px 80px;
	background: #FBFBFB;
}
.tmd .tmd-docs .tmp-in {
	gap: 48px;
}
body .tmd a.tmd-docs-all {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 30px;
	background: var(--ink, #171719);
	color: var(--white, #FFFFFF);
	font-weight: 500;
}
body .tmd a.tmd-docs-all:hover {
	text-decoration: none;
	opacity: .88;
}
.tmd .tmd-docs-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tmd .tmd-docs-row li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 0 40px;
}
.tmd .tmd-docs-row li:first-child {
	padding-left: 0;
}
.tmd .tmd-docs-row li + li {
	border-left: 1px solid #E0E0E3;
}
.tmd .tmd-docs-icon {
	width: 48px;
	height: 48px;
	color: var(--ink, #171719);
}
.tmd .tmd-docs-row h3 {
	margin: 0;
	font-family: "SF Pro Display", "SF Pro Text", sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
}
.tmd .tmd-docs-row p {
	margin: 0;
	color: var(--body, #656569);
	font-size: 15px;
	line-height: 1.6;
}
body .tmd .tmd-docs-row a {
	margin-top: 4px;
	color: var(--link, #0088FF);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
}

/* FAQs */
.tmd .tmd-faq {
	padding: 72px 80px 80px;
	background: var(--white, #FFFFFF);
}
.tmd .tmd-faq .tmp-in {
	gap: 32px;
}
.tmd .tmd-faq h2 {
	margin: 0;
}

@media (max-width: 1024px) {
	.tmd .tmd-block {
		flex-direction: column;
		gap: 32px;
		padding: 24px 20px 56px;
	}
	.tmd .tmd-gallery {
		width: 100%;
		padding: 0;
	}
	.tmd .tmd-main-img {
		height: auto;
		aspect-ratio: 750 / 540;
	}
	.tmd .tmd-panel {
		position: static;
		width: 100%;
	}
	.tmd .tmd-intro h1 {
		font-size: 40px;
		letter-spacing: -1px;
	}
	.tmd .tmd-compare,
	.tmd .tmd-docs,
	.tmd .tmd-faq {
		padding: 56px 20px;
	}
	.tmd .tmd-compare {
		padding-top: 8px;
	}
	.tmd .tmd-compare-head h2 {
		font-size: 30px;
	}
	.tmd .tmd-docs-row {
		grid-template-columns: 1fr;
	}
	.tmd .tmd-docs-row li,
	.tmd .tmd-docs-row li:first-child {
		padding: 24px 0;
	}
	.tmd .tmd-docs-row li + li {
		border-left: 0;
		border-top: 1px solid #E0E0E3;
	}
	.tmd .tmp-head--link .tmd-docs-all {
		padding: 12px 20px;
	}
}

@media (max-width: 767px) {
	.tmd .tmd-intro h1 {
		font-size: 34px;
		letter-spacing: -.8px;
	}
	.tmd .tmd-intro p {
		font-size: 15px;
		line-height: 1.6;
	}
	.tmd .tmd-key dt {
		width: 120px;
		font-size: 13px;
	}
	.tmd .tmd-key dd {
		font-size: 14px;
	}
	.tmd .tmd-trust {
		flex-direction: column;
		gap: 4px;
	}
	.tmd .tmd-compare-head {
		flex-direction: column;
	}
	.tmd .tmd-compare-head h2 {
		font-size: 26px;
	}
	.tmd .tmd-cmp {
		min-width: 760px;
	}
	.tmd .tmd-strip,
	.tmd .tmd-tr {
		grid-template-columns: 150px repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.tmd .tmd-btn {
		transition: none;
	}
}

/* Linen product page (inc/linen-product.php, Figma "PDP · HG500" 2148:38853). Layout from detail.css. */
.tml .tmw-block {
	gap: 60px;
}
.tml .tmw-gallery {
	width: 700px;
}
.tml .tmw-detail {
	gap: 28px;
}
.tml .tml-eyebrow {
	margin: 0 0 -16px;
	color: var(--tan, #6F6556);
	font-size: 14px;
	line-height: 1.5;
}
.tml .tmw-detail h1 {
	font-size: 60px;
	line-height: 1.1;
	letter-spacing: -1.8px;
}
.tml .tmw-intro {
	margin-top: -8px;
	font-size: 16px;
	line-height: 1.62;
}
.tml .tmw-facts div {
	padding: 14px 0;
}
.tml .tmw-facts dt {
	width: 190px;
}
.tml .tml-sizes {
	padding-top: 4px;
}
.tml .tml-sizes .tmp-label {
	margin-bottom: 12px;
}
.tml .tml-sizes ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.tml .tml-sizes li {
	padding: 9px 14px;
	border: 1px solid var(--line, #E4E4E7);
	font-size: 14px;
	line-height: 1.5;
}
.tml .tml-note {
	margin: 0;
	color: var(--muted, #96969A);
	font-size: 13px;
	line-height: 1.5;
}
.tml .tmd-actions {
	gap: 12px;
	padding-top: 8px;
}
.tmp.tml .tmd-spec {
	background: var(--surface, #FBFBFA);
}
.tml .tmp-spec dt {
	width: 200px;
}
.tml .tml-more {
	padding: 88px 80px;
	border-top: 0;
}
.tml .tml-more .tmp-in {
	gap: 40px;
}
.tml .tml-more .tmp-more-grid img {
	height: 230px;
	margin-bottom: 8px;
}
.tml .tml-more .tmp-more-name {
	font-family: "SF Pro Text", sans-serif;
	font-size: 20px;
	line-height: 1.4;
}
.tml .tml-more .tmp-more-meta {
	color: var(--muted, #96969A);
}
@media (max-width: 1024px) {
	.tml .tmw-gallery {
		width: 100%;
	}
	.tml .tmw-detail h1 {
		font-size: 44px;
	}
	.tml .tml-more {
		padding: 56px 20px;
	}
}
@media (max-width: 767px) {
	.tml .tmw-detail h1 {
		font-size: 38px;
		letter-spacing: -1px;
	}
	.tml .tmw-facts dt {
		width: 120px;
	}
	.tml .tml-more .tmp-more-grid img {
		height: auto;
		aspect-ratio: 1;
	}
	.tml .tml-more .tmp-more-name {
		font-size: 15px;
	}
}