/* West Lothian Flooring: the one-page flooring catalogue.
   Rules carried over from the carbonunderfloorheating.co.uk catalogue, with its colour variables
   pointed at this site's palette. */
:root {
  --floor-gutter: 2.75rem;
  --cuh-line: #e6e1da;
  --cuh-ink-soft: #5d5953;
  --cuh-ink: #141210;
  --cuh-orange: #b6702a;
  --cuh-orange-deep: #92571d;
  --cuh-orange-hover: #a2611f;
  --cuh-accent: #b6702a;
  --cnvs-themecolor-light: #f7f4ef;
  --cnvs-side-panel-size: 0px;
}
.floor-catalogue {--floor-gutter: 2.75rem;
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: var(--floor-gutter);
	align-items: start;
	margin-top: 2.5rem;}
.floor-side {position: sticky;
	top: 96px;
	padding-right: var(--floor-gutter);
	border-right: 1px solid var(--cuh-line);}
.floor-results {min-width: 0;}
@media (max-width: 991.98px) {
  .floor-catalogue {grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;}
  .floor-side {position: static; padding-right: 0; border-right: 0;}
}
.floor-filters {padding: 0;}
.floor-filters-groups {display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.35rem;}
@media (max-width: 991.98px) {
  .floor-filters-groups {grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem 2rem;}
}
.floor-facet {border: 0; padding: 0; margin: 0; min-width: 0;}
.floor-facet legend {float: none;
	width: auto;
	margin: 0 0 .55rem;
	padding: 0;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cuh-ink-soft);}
.floor-facet-options {display: flex; flex-wrap: wrap; gap: .4rem;}
.floor-chip {display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-height: 34px;
	padding: 0 .7rem;
	border: 1px solid var(--cuh-line);
	border-radius: .3rem;
	background: #fff;
	font-family: inherit;
	font-size: .8125rem;
	line-height: 1;
	color: var(--cuh-ink);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;}
.floor-chip span {font-size: .6875rem;
	color: var(--cuh-ink-soft);
	font-variant-numeric: tabular-nums;}
.floor-chip:hover {border-color: var(--cuh-ink);}
.floor-chip.is-on {background: var(--cuh-ink);
	border-color: var(--cuh-ink);
	color: #fff;}
.floor-chip.is-on span {color: rgba(255, 255, 255, .7);}
.floor-filters-head {display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.35rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--cuh-line);}
.floor-count {margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--cuh-ink); font-variant-numeric: tabular-nums;}
.floor-clear {border: 0;
	background: none;
	padding: 0;
	font-family: inherit;
	font-size: .8125rem;
	color: var(--cuh-orange-deep);
	text-decoration: underline;
	cursor: pointer;}
.floor-grid {display: grid;
	
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.4rem;
	margin-top: 0;}
.floor-card {display: flex;
	text-align: left;
	font: inherit;
	padding: 0;
	cursor: pointer;
	flex-direction: column;
	border: 1px solid var(--cuh-line);
	border-radius: .5rem;
	overflow: hidden;
	background: #fff;
	transition: border-color .2s ease, transform .2s ease;}
.floor-card:hover {border-color: var(--cuh-ink); transform: translateY(-3px);}
.floor-card-image {display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cnvs-themecolor-light);}
.floor-card-image img {display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;}
.floor-card-body {display: block; padding: .85rem 1rem 1rem;}
.floor-card-name {display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: calc(2 * 1.35em);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cuh-ink);}
.floor-card-meta {display: block;
	margin-top: .2rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .75rem;
	color: var(--cuh-ink-soft);}
.floor-empty {margin: 3rem 0 0;
	text-align: center;
	font-size: .9375rem;
	color: var(--cuh-ink-soft);}
.floor-more {margin-top: 2.5rem; text-align: center;}
.floor-shown {margin: .9rem 0 0;
	font-size: .8125rem;
	color: var(--cuh-ink-soft);}
@media (max-width: 1199.98px) {
  .floor-grid {grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (max-width: 991.98px) {
  .floor-grid {grid-template-columns: repeat(4, minmax(0, 1fr));}
}
@media (max-width: 849.98px) {
  .floor-grid {grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (max-width: 767.98px) {
  .floor-grid {grid-template-columns: repeat(3, minmax(0, 1fr));}
}
.floor-filters-toggle {display: none;
	align-items: center;
	gap: .45rem;
	min-height: 44px;
	padding: 0 1.05rem;
	border: 1px solid var(--cuh-ink);
	border-radius: 2rem;
	background: #fff;
	font-size: .875rem;
	font-weight: 600;
	color: var(--cuh-ink);
	cursor: pointer;}
.floor-filters-toggle i {font-size: 1rem;}
.floor-filters.is-open .floor-filters-toggle {background: var(--cuh-ink);
	border-color: var(--cuh-ink);
	color: #fff;}
.floor-filters-badge {display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 .3rem;
	border-radius: 10px;
	background: var(--cuh-orange);
	font-size: .6875rem;
	font-weight: 700;
	color: #21160a;}
.floor-filters-done {display: none;
	width: 100%;
	min-height: 46px;
	margin-top: .35rem;
	border: 0;
	border-radius: .4rem;
	background: var(--cuh-ink);
	font-size: .9375rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;}
.floor-filters-done:hover {background: var(--cuh-orange); color: #21160a;}
@media (max-width: 991.98px) {
  .floor-filters {padding: 1.35rem 1.5rem 1.15rem;
		border: 1px solid var(--cuh-line);
		border-radius: .5rem;
		background: var(--cnvs-themecolor-light);}
  .floor-filters {padding-bottom: 1.35rem;}
  .floor-filters-groups {max-height: 0;
		padding-top: 0;
		overflow: hidden;
		
		transition: max-height .4s cubic-bezier(.22, .61, .36, 1);}
  .floor-filters.is-open .floor-filters-groups {padding-top: 1.25rem;}
  .floor-filters-toggle {display: inline-flex;}
  .floor-filters-done {display: block;}
  .floor-filters-head {align-items: center;
		flex-wrap: wrap;
		gap: .75rem;
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;}
  .floor-count {flex: 1 1 auto;}
  .floor-chip {min-height: 44px; padding: 0 .9rem; font-size: .875rem;}
  .floor-page {min-width: 44px; height: 44px;}
  .floor-page-step {padding: 0 1rem;}
  .floor-clear {min-height: 44px;}
}
@media (max-width: 575.98px) {
  .floor-filters {padding: 1.15rem 1.15rem 1rem;}
  .floor-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;}
  .floor-card-body {padding: .7rem .8rem .8rem;}
}
.floor-pager {display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--cuh-line);}
.floor-pages {display: flex; flex-wrap: wrap; gap: .3rem;}
.floor-page {display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 .55rem;
	border: 1px solid var(--cuh-line);
	border-radius: .3rem;
	background: #fff;
	font-family: inherit;
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
	color: var(--cuh-ink);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;}
.floor-page:hover:not(:disabled) {border-color: var(--cuh-ink);}
.floor-page.is-on {background: var(--cuh-ink);
	border-color: var(--cuh-ink);
	color: #fff;}
.floor-page:disabled {opacity: .4; cursor: not-allowed;}
.floor-page-step {padding: 0 .9rem;}
.floor-page-gap {padding: 0 .2rem; color: var(--cuh-ink-soft); align-self: center;}
@media (max-width: 575.98px) {
  .floor-pager {justify-content: center; text-align: center;}
  .floor-page-step {padding: 0 .7rem;}
}
@keyframes floor-in {
	from { opacity: 0; transform: translateX(-18px); }
	to   { opacity: 1; transform: none; }
}
.floor-card {animation: floor-in .42s cubic-bezier(.22, .61, .36, 1) both;
	animation-delay: calc(var(--i, 0) * 45ms);}
@media (prefers-reduced-motion: reduce) {
  .floor-card {animation: none;}
}
.floor-modal {position: fixed;
	inset: 0;
	z-index: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.5rem;}
.floor-modal[hidden] {display: none;}
body.floor-modal-open {overflow: hidden;}
body.floor-modal-open #side-panel {z-index: 701;}
@media (min-width: 992px) {
  body.side-panel-open .floor-modal {padding-right: calc(var(--cnvs-side-panel-size, 380px) + 1.5rem);}
}
.floor-modal-veil {position: absolute;
	inset: 0;
	background: rgba(23, 24, 26, .62);
	backdrop-filter: blur(3px);
	animation: floor-veil .2s ease both;}
@keyframes floor-veil { from { opacity: 0; } to { opacity: 1; } }
.floor-modal-panel {position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	
	grid-template-rows: minmax(0, 1fr);
	width: min(1040px, 100%);
	max-height: min(660px, calc(100vh - 4rem));
	border-radius: .6rem;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 30px 80px rgba(23, 24, 26, .35);
	animation: floor-rise .28s cubic-bezier(.22, .61, .36, 1) both;}
@keyframes floor-rise {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .floor-modal-veil, .floor-modal-panel {animation: none;}
}
.floor-modal-x {position: absolute;
	top: .75rem;
	right: .85rem;
	z-index: 2;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--cuh-ink);
	cursor: pointer;
	transition: background-color .15s ease;}
.floor-modal-x:hover {background: var(--cuh-orange); color: #21160a;}
.floor-modal-gallery {position: relative;
	display: flex;
	flex-direction: column;
	background: var(--cnvs-themecolor-light);
	min-width: 0;
	min-height: 0;
	overflow: hidden;}
.floor-modal-stage {position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;}
.floor-modal-stage img {position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;}
.floor-modal-gallery::after {content: '';
	position: absolute;
	inset: auto 0 0;
	height: 110px;
	background: linear-gradient(to top, rgba(18, 16, 14, .55), rgba(18, 16, 14, 0));
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;}
.floor-modal-gallery.has-thumbs::after {opacity: 1;}
.floor-modal-peel {display: none;
	position: absolute;
	z-index: 3;
	right: 16px;
	bottom: -18px;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #12100e;
	line-height: 0;
	color: #fff;
	box-shadow: 0 2px 8px rgba(18, 16, 14, .3);
	cursor: pointer;
	transition: background-color .15s ease;}
.floor-modal-peel svg {display: block;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);}
.floor-modal-gallery.is-peeled .floor-modal-peel svg {transform: rotate(180deg);}
.floor-modal-peel:active {background: #2b251e;}
.floor-modal-thumbs {position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 20px;
	display: flex;
	justify-content: center;
	gap: .4rem;
	padding: 0 .6rem;}
.floor-modal-thumbs:empty {display: none;}
.floor-modal-thumbs button {flex: 0 0 auto;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .55);
	border-radius: .3rem;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: .8;
	box-shadow: 0 2px 10px rgba(18, 16, 14, .35);
	transition: opacity .15s ease, border-color .15s ease, transform .15s ease;}
.floor-modal-thumbs button img {display: block; width: 100%; height: 100%; object-fit: cover;}
.floor-modal-thumbs button:hover {opacity: 1; transform: translateY(-2px);}
.floor-modal-thumbs button.is-on {opacity: 1; border-color: #fff;}
.floor-modal-body {padding: 1.6rem 2.25rem 2rem;
	overflow-y: auto;}
.floor-modal-brand {margin: 0 0 .3rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cuh-orange-deep);}
.floor-modal-name {margin: 0 0 .8rem; font-size: 1.65rem; line-height: 1.2;}
.floor-modal-desc {margin: 0 0 .775rem;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--cuh-ink-soft);
	
	overflow: hidden;
	transition: max-height .38s cubic-bezier(.22, .61, .36, 1);}
.floor-modal-desc.is-clamped {display: -webkit-box;
	-webkit-box-orient: vertical;
	
	margin-bottom: 0;}
.floor-modal-desc:empty {display: none;}
@media (prefers-reduced-motion: reduce) {
  .floor-modal-desc {transition: none;}
}
.floor-modal-more {display: none;
	margin: .35rem 0 1rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--cuh-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;}
.floor-modal-more.is-shown {display: inline-block;}
.floor-modal-more:hover {color: var(--cuh-orange-hover);}
.floor-modal-specs {margin: 0 0 1.25rem;}
.floor-modal-specs > div {display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .3rem 0;
	border-bottom: 1px solid var(--cuh-line);}
.floor-modal-specs > div:last-child {border-bottom: 0;}
.floor-modal-specs dt {font-size: .8125rem; color: var(--cuh-ink-soft);}
.floor-modal-specs dd {margin: 0;
	font-size: .8125rem;
	font-weight: 600;
	text-align: right;
	color: var(--cuh-ink);}
.floor-modal-actions {display: flex; flex-wrap: wrap; gap: .6rem;}
.floor-modal-actions > * {flex: 1 1 12rem; text-align: center;}
.floor-modal-call {margin: .85rem 0 0;
	font-size: .8125rem;
	color: var(--cuh-ink-soft);}
.floor-modal-call a {color: var(--cuh-ink); font-weight: 600;}
.floor-modal-call a:hover {color: var(--cuh-orange);}
@media (max-width: 767.98px) {
  .floor-modal {padding: 0;}
  .floor-modal-panel {grid-template-columns: minmax(0, 1fr);
		
		grid-template-rows: auto;
		width: 100%;
		max-height: 100vh;
		border-radius: 0;
		overflow-y: auto;}
  .floor-modal-stage {flex: 0 0 auto;
		aspect-ratio: auto;
		height: calc(75vw + 50px);
		transition: height .45s cubic-bezier(.22, .61, .36, 1);}
  .floor-modal-gallery.is-peeled .floor-modal-stage {height: 85vh;}
  .floor-modal-peel {display: grid;}
  .floor-modal-gallery {overflow: visible;}
  .floor-modal-body {padding: 1.5rem 1.35rem 2rem;}
  .floor-modal-name {font-size: 1.35rem;}
}
@media (prefers-reduced-motion: reduce) {
  .floor-filters-groups {transition: none;}
}
@media (max-width: 575.98px) {
  .floor-modal-thumbs {padding-right: 52px;}
}
.floor-range {padding: 4.5rem 0;
	background: var(--cnvs-themecolor-light);}
.floor-range .shop {align-items: stretch;}
.floor-range h2 {line-height: 1.15;}
.floor-range p {max-width: 34ch;}
.floor-range .button {margin: 0 .5rem .5rem 0;
	border-color: var(--cuh-ink);
	color: var(--cuh-ink);}
.floor-range .button:hover,
.floor-range .button:focus-visible {background-color: var(--cuh-orange) !important;
	border-color: var(--cuh-orange) !important;
	color: #21160a !important;}
.floor-range .product-image {display: block;
	position: relative;
	
	flex: 0 0 auto;
	padding: 0;
	
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: .5rem;
	overflow: hidden;
	background: var(--cnvs-themecolor-light);}
.floor-range .product-image > a {position: absolute;
	inset: 0;
	
	display: block !important;
	width: 100%;
	height: 100%;}
.floor-range .product-image img {position: absolute;
	inset: 0;
	display: block;
	
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	max-height: none;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);}
.floor-range .product-image > a:nth-of-type(2) {opacity: 0;
	transition: opacity .45s ease;}
.floor-range .product:hover .product-image > a:nth-of-type(2) {opacity: 1;}
.floor-range .product:hover .product-image img {transform: scale(1.04);}
@media (prefers-reduced-motion: reduce) {
  .floor-range .product-image > a:nth-of-type(2),
	.floor-range .product-image img {transition: none;}
  .floor-range .product:hover .product-image img {transform: none;}
}
.floor-range .bg-overlay {position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;}
.floor-range .product:hover .bg-overlay,
.floor-range .product:focus-within .bg-overlay {opacity: 1; pointer-events: auto;}
.floor-range .bg-overlay-content {display: flex;
	height: 100%;}
.floor-range .bg-overlay-content {padding: .9rem;}
.floor-range .btn-light {display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	font-size: 1.05rem;
	color: var(--cuh-ink);
	box-shadow: 0 2px 10px rgba(18, 16, 14, .25);
	transition: background-color .15s ease, color .15s ease, transform .15s ease;}
.floor-range .btn-light:hover,
.floor-range .btn-light:focus-visible {background: var(--cuh-orange);
	color: #21160a;
	transform: translateY(-2px);}
.floor-range .product-desc {padding-top: .85rem; text-align: left;}
.floor-range .product-title a {color: var(--cuh-ink);}
.floor-range .product-title a:hover {color: var(--cuh-orange-hover);}
.floor-range .product-price {margin-top: .15rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cuh-orange-deep);}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .floor-range .shop > .col-xl-3 {flex: 0 0 100%; max-width: 100%;}
  .floor-range p {max-width: 60ch;}
}
@media (max-width: 991.98px) {
  .floor-range {padding: 3rem 0;}
  .floor-range p {max-width: none;}
}
@media (max-width: 575.98px) {
  .floor-range .shop > .product {flex: 0 0 50%; max-width: 50%;}
  .floor-range .btn-light {width: 38px; height: 38px;}
  .floor-range .product-title a {font-size: .9375rem;}
  .floor-range .product-price {font-size: .6875rem;}
}
.floor-modal.is-leaving .floor-modal-panel {animation: floor-sink .3s cubic-bezier(.4, 0, .2, 1) both;}
.floor-modal.is-leaving .floor-modal-veil {animation: floor-veil-out .3s ease both;}
@keyframes floor-sink {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(24px) scale(.97); }
}
@keyframes floor-veil-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .floor-modal.is-leaving .floor-modal-panel,
	.floor-modal.is-leaving .floor-modal-veil {animation: none; opacity: 0;}
}
.floor-chip[hidden],
.floor-facet[hidden] {display: none !important;}
.floor-facet.is-single legend {opacity: .6;}
.floor-search {position: relative;
	display: flex;
	align-items: center;
	margin: 0 0 1.35rem;}
.floor-search i {position: absolute;
	left: .8rem;
	font-size: .9375rem;
	color: var(--cuh-ink-soft);
	pointer-events: none;}
.floor-search input {width: 100%;
	min-height: 44px;
	padding: 0 2.4rem 0 2.3rem;
	border: 1px solid var(--cuh-line);
	border-radius: .4rem;
	background: #fff;
	font-size: .875rem;
	color: var(--cuh-ink);}
.floor-search input::placeholder {color: var(--cuh-ink-soft);}
.floor-search input:focus {outline: none;
	border-color: var(--cuh-ink);
	box-shadow: 0 0 0 3px rgba(255, 143, 0, .18);}
.floor-search input::-webkit-search-cancel-button {display: none;}
.floor-search-clear {position: absolute;
	right: .35rem;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--cuh-ink-soft);
	cursor: pointer;}
.floor-search-clear:hover {color: var(--cuh-orange);}
.floor-search-clear[hidden] {display: none;}
@media (max-width: 991.98px) {
  .floor-search {margin-top: 10px;
		margin-bottom: calc(1.35rem - 10px);}
}
.catalogue-intro-more {border: 0;
	background: none;
	padding: 0;
	margin-left: .35rem;
	font: inherit;
	font-weight: 500;
	color: var(--cuh-accent, #d97706);
	text-decoration: underline;
	cursor: pointer;
	display: none;}
@media (max-width: 767.98px) {
  .catalogue-intro-more {display: inline;}
  .catalogue-intro-rest {display: block;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease;
		margin-top: 0;}
  .catalogue-intro.is-open .catalogue-intro-rest {max-height: 22em;
		opacity: 1;
		margin-top: .5rem;}
  .floor-filters {margin-bottom: 0;}
  .floor-results {margin-top: 0;}
  .floor-catalogue {row-gap: 10px;}
}

/* ---- West Lothian: its own, squarer take on the catalogue ----
   Same layout as the shared catalogue, but every corner is square and the gallery thumbnails
   stack vertically in the bottom left of the photo. */
.floor-chip, .floor-card, .floor-filters-toggle, .floor-filters-badge, .floor-filters-done,
.floor-page, .floor-modal-panel, .floor-modal-x, .floor-modal-peel, .floor-modal-thumbs button,
.floor-search input, .floor-search-clear { border-radius: 0; }
@media (max-width: 991.98px) { .floor-filters { border-radius: 0; } }
.floor-modal-thumbs { left: 20px; right: auto; top: auto; bottom: 20px; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 0; max-height: calc(100% - 40px); overflow-y: auto; scrollbar-width: none; }
.floor-modal-thumbs::-webkit-scrollbar { display: none; }
.floor-modal-thumbs button { width: 58px; height: 58px; flex: none; }
.floor-modal-thumbs button:hover { transform: translateX(3px); }
.floor-modal-gallery::after { inset: 0 auto 0 0; width: 140px; height: auto; background: linear-gradient(to right, rgba(18, 16, 14, .5), rgba(18, 16, 14, 0)); }
@media (max-width: 767.98px) {
  .floor-modal-thumbs { left: 14px; bottom: 14px; gap: 6px; max-height: calc(100% - 28px); }
  .floor-modal-thumbs button { width: 46px; height: 46px; }
}
@media (max-width: 575.98px) { .floor-modal-thumbs { padding-right: 0; } }

/* Thumbnail strip: room on every side so each thumbnail's border and shadow stay visible,
   including when it nudges sideways on hover (a scrolling strip clips anything at its edge). */
.floor-modal-thumbs { left: 12px; bottom: 12px; padding: 8px 14px 8px 8px; max-height: calc(100% - 24px); }
@media (max-width: 767.98px) {
  .floor-modal-thumbs { left: 8px; bottom: 8px; padding: 6px 12px 6px 6px; max-height: calc(100% - 16px); }
}
@media (max-width: 575.98px) { .floor-modal-thumbs { padding: 6px 12px 6px 6px; } }

/* Phones: the dialog fills the visible browser area (not the whole screen, which includes the
   address and tool bars), and the close button stays pinned inside it. The peel button takes a
   vertical swipe, so it is a bigger target and does not scroll the page. */
@media (max-width: 767.98px) {
  .floor-modal { inset: auto 0; top: var(--view-top, 0px); height: var(--view-h, 100dvh); }
  .floor-modal-panel { max-height: var(--view-h, 100dvh); animation-name: floor-fade-in; }
  /* A moving panel would carry the pinned close button with it, so on phones it fades in instead. */
  .floor-modal-x { position: fixed; top: calc(var(--view-top, 0px) + 14px); right: 14px; width: 40px; height: 40px; box-shadow: 0 2px 10px rgba(18, 16, 14, .3); }
  .floor-modal-gallery.is-peeled .floor-modal-stage { height: calc(var(--view-h, 100dvh) * .85); }
  .floor-modal-peel { width: 44px; height: 44px; bottom: -22px; touch-action: none; }
  .floor-modal-peel svg { width: 17px; height: 17px; }
}

@keyframes floor-fade-in { from { opacity: 0; } to { opacity: 1; } }