/*
 * Category catalogue: filter rail, design grid and sample basket (inc/catalogue.php).
 * Figma "Carpet Tiles · Category" 2148:33317 (desktop), 2148:33712 (mobile), 2148:33950 (filter sheet).
 * Colours are the kit's global variables (--ink, --line …); values in design-system.md.
 * At 1024px and below the rail becomes a bottom sheet opened from the Filters button.
 *
 * The kit styles every <button> as a filled button and every input as a boxed field
 * (.elementor-kit-5 input:not(..):not(..) is 0,3,1), so buttons here carry .tmc and the
 * search input carries body.elementor-kit-5 to outrank it. Headings carry .tmc for the
 * same reason: the kit sizes h2/h3 site-wide.
 */

.tmc {
	--tmc-hair: #ECECEE;
	display: flex;
	align-items: flex-start;
	gap: 64px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 76px 80px;
	color: var(--ink, #171719);
	font-size: 16px;
}
.tmc *,
.tmc *::before,
.tmc *::after {
	box-sizing: border-box;
}
.tmc a {
	color: inherit;
	text-decoration: none;
}
.tmc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tmc p {
	margin: 0;
}
.tmc .tmc-icon {
	flex: none;
	width: 20px;
	height: 20px;
}

/* ── Rail ─────────────────────────────────────────────────────────────────── */
.tmc-rail {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 248px;
}
.tmc-sheet-grab,
.tmc-sheet-head,
.tmc-sheet-foot,
.tmc-bar,
.tmc-basket-bar,
.tmc-download-link,
.tmc-scrim {
	display: none;
}
.tmc-sheet-body {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.tmc-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.tmc-label,
.tmc-group > legend {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	color: var(--muted, #96969A);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}
.tmc-clear {
	color: var(--tan, #6F6556) !important;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}
.tmc .tmc-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 50px;
	padding: 12px 0;
	font-size: 16px;
	line-height: 1.6;
	cursor: pointer;
}
.tmc-row-name {
	min-width: 0;
}
.tmc-row.is-on .tmc-row-name {
	font-weight: 500;
}
.tmc-count {
	flex: none;
	color: var(--muted, #96969A);
	font-size: 13px;
}

/* Range: a list, the chosen one marked with a bar (no visible radio) */
.tmc .tmc-range .tmc-row {
	gap: 10px;
	min-height: 52px;
	padding: 13px 0 13px 14px;
	border-left: 2px solid transparent;
}
.tmc .tmc-range .tmc-row.is-on {
	background: var(--surface, #FBFBFA);
	border-left-color: var(--ink, #171719);
}
.tmc-range input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tmc-range .tmc-row:has(input:focus-visible) {
	outline: 2px solid var(--ink, #171719);
	outline-offset: -2px;
}
.tmc .tmc-fibre .tmc-row {
	font-size: 15px;
}

.tmc-more:not(.is-open) {
	display: none;
}
.no-js .tmc-more,
.tmc:not(.is-live) .tmc-more {
	display: block;
}
.tmc:not(.is-live) .tmc-show-all {
	display: none;
}
.tmc .tmc-show-all {
	align-self: flex-start;
	margin: 8px 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ink, #171719);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
}

/* Colour chips */
.tmc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tmc .tmc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	background: var(--white, #FFFFFF);
	border: 1px solid var(--border-light, #C9C9CE);
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}
.tmc-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tmc-chip:has(input:focus-visible) {
	outline: 2px solid var(--ink, #171719);
	outline-offset: 2px;
}
.tmc-swatch {
	flex: none;
	width: 14px;
	height: 14px;
	border: 1px solid var(--line, #E4E4E7);
}
.tmc .tmc-chip.is-on {
	background: var(--ink, #171719);
	border-color: var(--ink, #171719);
	color: var(--white, #FFFFFF);
	font-weight: 500;
	box-shadow: inset 0 0 0 1px var(--ink, #171719);
}
.tmc-chip.is-on .tmc-swatch {
	border-color: var(--white, #FFFFFF);
}

.tmc .tmc-apply {
	padding: 12px 24px;
	background: var(--ink, #171719);
	border: 0;
	color: var(--white, #FFFFFF);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

/* Sample basket */
.tmc-basket {
	gap: 10px;
}
.tmc-basket .tmc-label {
	margin: 0 0 2px;
}
.tmc-basket-box {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px;
	background: var(--surface, #FBFBFA);
}
.tmc-basket-box li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	font-size: 15px;
	line-height: 1.6;
}
.tmc-basket-box li + li {
	border-top: 1px solid #E0E0E3;
}
.tmc-basket-box li span {
	flex: 1;
	min-width: 0;
}
.tmc-basket-box li a {
	padding: 0 2px;
	color: var(--muted, #96969A);
	font-size: 14px;
}
.tmc-basket-box li a:hover {
	color: var(--ink, #171719);
}
.tmc-basket-empty {
	color: var(--body, #656569);
	font-size: 14px;
	line-height: 1.6;
}
.tmc .tmc-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 16px 30px;
	background: var(--ink, #171719);
	border: 0;
	color: var(--white, #FFFFFF) !important;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}
.tmc-note {
	color: var(--muted, #96969A);
	font-size: 12px;
	line-height: 1.5;
}

/* Also in, download */
.tmc-also {
	gap: 0;
}
.tmc-also .tmc-label {
	margin-bottom: 12px;
}
.tmc-also a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--tmc-hair);
	font-size: 15px;
	line-height: 1.6;
}
.tmc-also a span {
	color: var(--muted, #96969A);
	font-size: 13px;
}
.tmc-download {
	display: flex;
	justify-content: center;
	margin-top: -16px;
	padding: 16px 30px;
	background: var(--white, #FFFFFF);
	border: 1px solid rgba(0, 0, 0, .08);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

/* ── Main column ──────────────────────────────────────────────────────────── */
.tmc-main {
	display: flex;
	flex-direction: column;
	gap: 64px;
	flex: 1;
	min-width: 0;
}
.tmc-search {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: var(--white, #FFFFFF);
	border: 1px solid var(--ink, #171719);
	color: var(--muted, #96969A);
}
.tmc-search:focus-within {
	box-shadow: inset 0 0 0 1px var(--ink, #171719);
}
body.elementor-kit-5 .tmc .tmc-search input {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	color: var(--ink, #171719);
	font: inherit;
	font-size: 16px;
	line-height: 1.55;
}
.tmc-search input::placeholder {
	color: var(--muted, #96969A);
	opacity: 1;
}
.tmc-search input::-webkit-search-cancel-button {
	cursor: pointer;
}
.tmc-search .tmc-results {
	flex: none;
	padding-left: 14px;
	border-left: 1px solid var(--line, #E4E4E7);
	font-size: 14px;
	line-height: 22px;
}

.tmc-range-group {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.tmc-range-group + .tmc-range-group {
	margin-top: 0;
}
.tmc-group-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(23, 23, 25, .08);
}
.tmc-group-title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.tmc .tmc-group-title h2 {
	margin: 0;
	color: var(--ink, #171719);
	font-family: "SF Pro Display", "SF Pro Text", sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.7px;
}
.tmc-group-title span {
	flex: none;
	color: var(--muted, #96969A);
	font-size: 13px;
}
.tmc-group-head p {
	max-width: 712px;
	color: var(--body, #656569);
	font-size: 16px;
	line-height: 1.62;
}

.tmc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 20px;
}
.tmc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.tmc-card-media {
	display: block;
	overflow: hidden;
	margin-bottom: 16px;
}
.tmc-card-img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform var(--m-dur-l, 700ms) var(--m-ease-out, ease-out);
}
.tmc-card-img--none {
	background: var(--warm, #F6F3EF);
}
@media (hover: hover) {
	.tmc-card:hover .tmc-card-img {
		transform: scale(1.04);
	}
}
.tmc .tmc-card-title {
	margin: 0 0 8px;
	color: var(--ink, #171719);
	font-family: "SF Pro Display", "SF Pro Text", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.2px;
}
.tmc-card-meta {
	margin-bottom: 17px !important;
	color: var(--body, #656569);
	font-size: 13px;
	line-height: 1.5;
}
.tmc-add {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--tmc-hair);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	cursor: pointer;
}
.tmc-add span {
	color: var(--muted, #96969A);
	font-size: 15px;
	font-weight: 400;
	transition: transform var(--m-dur-s, 200ms) var(--m-ease-std, ease);
}
.tmc-add:hover span {
	color: var(--ink, #171719);
	transform: scale(1.2);
}
.tmc-add.is-in {
	color: var(--tan, #6F6556);
}
.tmc-add.is-in span {
	color: var(--tan, #6F6556);
	font-size: 13px;
}
.tmc-add.is-full {
	color: var(--muted, #96969A);
	cursor: default;
}
.tmc-add.is-full span {
	font-size: 12px;
}
.tmc-add.is-busy {
	opacity: .5;
	pointer-events: none;
}

.tmc-load {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: center;
}
.tmc-load-more {
	display: block;
	padding: 17px 24px;
	border: 1px solid var(--ink, #171719);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
}
.tmc-load-more:hover {
	background: var(--ink, #171719);
	color: var(--white, #FFFFFF) !important;
}
.tmc-load p {
	color: var(--muted, #96969A);
	font-size: 13px;
	line-height: 1.6;
}

/* ── Empty states (Figma "Search · 04 No results", 2148:49135) ─────────────────
 * .tmc--soon: a category with no designs online yet; it replaces the whole block.
 * Inside .tmc-main: filters that match nothing. */
.tmc.tmc--soon {
	display: block;
	padding: 88px 80px 96px;
}
.tmc-none {
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.tmc-none-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.tmc-none-icon {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	border-radius: 100px;
	background: var(--surface, #FBFBFA);
	border: 1px solid var(--line, #E4E4E7);
	color: var(--muted, #96969A);
}
.tmc .tmc-none-icon .tmc-icon {
	width: 32px;
	height: 32px;
}
.tmc .tmc-none-title {
	margin: 0;
	color: var(--ink, #171719);
	font-family: "SF Pro Display", "SF Pro Text", sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.7px;
}
.tmc .tmc-none-text {
	max-width: 560px;
	color: var(--body, #656569);
	font-size: 16px;
	line-height: 1.6;
}
.tmc-none-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 8px;
}
.tmc .tmc-none-btn {
	padding: 16px 30px;
	border: 1px solid var(--ink, #171719);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}
.tmc .tmc-none-btn.is-primary {
	background: var(--ink, #171719);
	color: var(--white, #FFFFFF);
}
.tmc .tmc-none-btn.is-secondary {
	background: var(--white, #FFFFFF);
}
.tmc .tmc-none-btn.is-secondary:hover {
	background: var(--ink, #171719);
	color: var(--white, #FFFFFF);
}
.tmc-none-more {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 56px;
	border-top: 1px solid var(--line, #E4E4E7);
}
.tmc-none-more .tmc-label {
	margin: 0;
}
.tmc .tmc-none-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tmc-none-chips a {
	display: block;
	padding: 10px 18px;
	border: 1px solid var(--border, #9C9CA2);
	font-size: 14px;
	line-height: 1.5;
}
.tmc-none-chips a:hover {
	border-color: var(--ink, #171719);
	box-shadow: inset 0 0 0 1px var(--ink, #171719);
}

/* While catalogue.js fetches */
.tmc.is-loading .tmc-main {
	opacity: .55;
	transition: opacity var(--m-dur-s, 200ms);
}

/* ── Tablet and mobile: filters in a bottom sheet ─────────────────────────── */
@media (max-width: 1024px) {
	.tmc {
		display: block;
		padding: 32px 0 40px;
	}
	.tmc-main {
		gap: 0;
	}
	.tmc-search {
		margin: 0 20px;
		padding: 14px 16px;
		gap: 12px;
		background: var(--surface, #FBFBFA);
		border-color: var(--line, #E4E4E7);
	}
	.tmc-search .tmc-icon {
		width: 18px;
		height: 18px;
	}
	body.elementor-kit-5 .tmc .tmc-search input {
		font-size: 14px;
		line-height: 1.5;
	}
	.tmc-search .tmc-results {
		display: none;
	}
	.tmc-bar {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-top: 20px;
		padding: 12px 20px;
		border-top: 1px solid var(--line, #E4E4E7);
		border-bottom: 1px solid var(--line, #E4E4E7);
	}
	.tmc .tmc-open-filters {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 11px 18px;
		background: var(--ink, #171719);
		border: 0;
		border-radius: 0;
		color: var(--white, #FFFFFF);
		font: inherit;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.4;
		cursor: pointer;
	}
	.tmc-open-filters .tmc-icon {
		width: 16px;
		height: 16px;
	}
	.tmc-badge {
		padding: 1px 7px;
		background: var(--white, #FFFFFF);
		color: var(--ink, #171719);
		font-size: 13px;
		line-height: 18px;
	}
	.tmc-bar .tmc-results {
		color: var(--body, #656569);
		font-size: 13px;
	}
	.tmc.tmc--soon {
		padding: 48px 20px 56px;
	}
	.tmc-main .tmc-none {
		padding: 32px 20px 0;
	}
	.tmc .tmc-none-title {
		font-size: 24px;
		letter-spacing: -.4px;
	}
	.tmc .tmc-none-text {
		font-size: 15px;
	}
	.tmc-none-more {
		padding-top: 40px;
	}
	.tmc-range-group {
		gap: 0;
		margin-top: 32px;
	}
	.tmc-range-group:first-of-type {
		margin-top: 12px;
	}
	.tmc-group-head {
		padding: 0 20px;
		border: 0;
	}
	.tmc .tmc-group-title h2 {
		font-size: 24px;
		letter-spacing: -.4px;
	}
	.tmc-group-title span {
		font-size: 12px;
	}
	.tmc-group-head p {
		font-size: 14px;
		line-height: 1.6;
	}
	.tmc .tmc-grid {
		padding: 20px 20px 0;
		gap: 32px 13px;
	}
	.tmc-load {
		gap: 10px;
		padding: 24px 20px 0;
	}
	.tmc-load-more {
		padding: 15px 24px;
		font-weight: 500;
	}
	.tmc-load p {
		font-size: 12px;
	}
	.tmc-download-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 20px 20px 0;
		font-size: 15px;
		font-weight: 500;
	}
	.tmc-download-link .tmc-icon {
		width: 15px;
		height: 15px;
	}

	/* The rail, as a sheet */
	.tmc-rail {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 70;
		width: auto;
		max-height: 92vh;
		gap: 0;
		background: var(--white, #FFFFFF);
		transform: translate3d(0, 100%, 0);
		visibility: hidden;
		transition: transform var(--m-dur-m, 320ms) var(--m-ease-out, ease-out), visibility 0s linear var(--m-dur-m, 320ms);
	}
	.tmc.is-sheet-open .tmc-rail {
		transform: none;
		visibility: visible;
		transition: transform var(--m-dur-m, 320ms) var(--m-ease-out, ease-out);
	}
	.tmc.is-sheet-open .tmc-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 69;
		background: rgba(23, 23, 25, .45);
	}
	.tmc-sheet-grab {
		display: flex;
		justify-content: center;
		padding: 10px 0 4px;
	}
	.tmc-sheet-grab::before {
		content: "";
		width: 44px;
		height: 4px;
		border-radius: 100px;
		background: var(--line, #E4E4E7);
	}
	.tmc-sheet-head {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 10px 20px 16px;
		border-bottom: 1px solid var(--line, #E4E4E7);
	}
	.tmc-sheet-title {
		flex: 1;
		font-family: "SF Pro Display", "SF Pro Text", sans-serif;
		font-size: 20px;
		font-weight: 600;
		line-height: 1.5;
	}
	.tmc-clear-all {
		color: var(--tan, #6F6556) !important;
		font-size: 14px;
		font-weight: 500;
	}
	.tmc .tmc-sheet-close {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--ink, #171719);
		cursor: pointer;
	}
	.tmc-sheet-body {
		flex: 1;
		gap: 28px;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 24px 20px;
	}
	.tmc .tmc-row,
	.tmc .tmc-range .tmc-row {
		min-height: 45px;
		padding: 11px 0;
		font-size: 15px;
		border-left: 0;
		background: none !important;
	}
	.tmc-row .tmc-row-name {
		flex: 1;
	}
	.tmc-range input {
		position: static;
		opacity: 1;
		pointer-events: auto;
	}
	.tmc-chips {
		flex-direction: column;
		gap: 4px;
	}
	.tmc .tmc-chip,
	.tmc .tmc-chip.is-on {
		min-height: 45px;
		padding: 11px 0;
		background: none;
		border: 0;
		box-shadow: none;
		color: var(--ink, #171719);
		font-size: 15px;
		font-weight: 400;
	}
	.tmc .tmc-chip.is-on {
		font-weight: 500;
	}
	.tmc-chip .tmc-swatch {
		width: 18px;
		height: 18px;
	}
	.tmc-chip.is-on .tmc-swatch {
		outline: 2px solid var(--ink, #171719);
		outline-offset: 2px;
		border-color: var(--line, #E4E4E7);
	}
	.tmc-sheet-foot {
		display: block;
		padding: 16px 20px 28px;
		border-top: 1px solid var(--line, #E4E4E7);
	}
	.tmc .tmc-sheet-foot .tmc-btn {
		padding: 15px 24px;
	}
	.tmc-rail > .tmc-basket,
	.tmc-rail > .tmc-also,
	.tmc-rail > .tmc-download {
		display: none;
	}

	/* Basket on small screens: a bar pinned to the bottom, with room left for it under the footer */
	body:has(.tmc-basket-bar) {
		padding-bottom: calc(56px + env(safe-area-inset-bottom));
	}
	.tmc-basket-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
		background: var(--ink, #171719);
		color: var(--white, #FFFFFF) !important;
		font-size: 14px;
		font-weight: 500;
	}
	.tmc-basket-bar span:first-child {
		color: rgba(255, 255, 255, .72);
		font-weight: 400;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.tmc-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.tmc-none-actions {
		flex-direction: column;
		align-self: stretch;
	}
	.tmc .tmc-none-btn {
		text-align: center;
	}
	.tmc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tmc-card-media {
		margin-bottom: 12px;
	}
	.tmc-card-img {
		height: auto;
		aspect-ratio: 1;
	}
	.tmc .tmc-card-title {
		margin-bottom: 5px;
		font-family: inherit;
		font-size: 15px;
		line-height: 1.4;
		letter-spacing: 0;
	}
	.tmc-card-meta {
		margin-bottom: 0 !important;
		color: var(--muted, #96969A);
		font-size: 12px;
	}
	.tmc-add {
		justify-content: flex-start;
		gap: 8px;
		padding-top: 10px;
		border-top: 0;
		font-size: 12px;
	}
	.tmc-add span {
		color: var(--ink, #171719);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tmc-rail,
	.tmc.is-sheet-open .tmc-rail {
		transition: none;
	}
}