/*
 * Dales & Shires only: styles for things no other site built on this
 * theme would have (location and probate pages, sales figures, properties
 * for sale and their photo galleries, coverage and county maps, case
 * studies, the property-type tags). Loads straight after theme.css, the
 * shared design, and relies on it.
 */

/* Homepage: recent sales grid. */
.ds-sales-grid .wp-block-image {
	margin: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone);
}
.ds-sales-grid .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.ds-sales-grid .wp-element-caption {
	margin: 0;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	text-align: left;
	color: var(--wp--preset--color--body);
}

/* Homepage: property types as a scattered "cloud" of tags -- varied
   sizes and styles, centred, so the set looks deliberate, not ragged. */
.ds-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.6rem 0.5rem;
	padding: 0.5rem 0;
}
.ds-tags span {
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	line-height: 1.3;
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
}
.ds-tags span:nth-child(3n + 1) {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	background: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--white);
}
.ds-tags span:nth-child(3n + 2) {
	background: transparent;
	border: 1px solid var(--wp--preset--color--olive);
	color: var(--wp--preset--color--olive);
	font-weight: 600;
}
.ds-tags span:nth-child(4n) {
	transform: translateY(-0.35rem);
}
.ds-tags span:nth-child(5n) {
	transform: translateY(0.35rem);
}

/* Property-type tags "bulge" one after another, on a loop. Uses the
   separate `scale` property so it combines with the tags' up/down offsets.
   Off for visitors who ask their device to reduce motion. */
@keyframes ds-bulge {
	0%, 6%, 100% { scale: 1; }
	3% { scale: 1.14; }
}
.ds-tags span {
	animation: ds-bulge 11.90s ease-in-out infinite;
}
.ds-tags span:nth-child(1) { animation-delay: 7.65s; }
.ds-tags span:nth-child(2) { animation-delay: 9.35s; }
.ds-tags span:nth-child(3) { animation-delay: 1.70s; }
.ds-tags span:nth-child(4) { animation-delay: 6.80s; }
.ds-tags span:nth-child(5) { animation-delay: 8.50s; }
.ds-tags span:nth-child(6) { animation-delay: 0.00s; }
.ds-tags span:nth-child(7) { animation-delay: 0.85s; }
.ds-tags span:nth-child(8) { animation-delay: 5.95s; }
.ds-tags span:nth-child(9) { animation-delay: 5.10s; }
.ds-tags span:nth-child(10) { animation-delay: 10.20s; }
.ds-tags span:nth-child(11) { animation-delay: 11.05s; }
.ds-tags span:nth-child(12) { animation-delay: 3.40s; }
.ds-tags span:nth-child(13) { animation-delay: 2.55s; }
.ds-tags span:nth-child(14) { animation-delay: 4.25s; }
@media (prefers-reduced-motion: reduce) {
	.ds-tags span { animation: none; }
}

.ds-coverage-map {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	margin-inline: auto;
}

/* The sea: a very pale blue, and land we don't cover a faint green, so the
   coast is always clear (Dave, Sept 2026). */
.ds-coverage-map,
.ds-county-map {
	background: #d9e7f0;
	border-radius: 3px;
}

/* Clickable maps (Dave, Oct 2026). Elsewhere the whole map is one link to
   Where We Cover; on that page each county's shape links to its county
   page and goes dark when pointed at, like the buttons. The names, pin and
   "Harrogate" let clicks through to the shape underneath. */
.ds-map-link {
	display: block;
	max-width: 440px;
	margin-inline: auto;
	border-radius: 3px;
}

.ds-map-link .ds-coverage-map {
	transition: filter 0.15s ease;
}

.ds-map-link:hover .ds-coverage-map,
.ds-map-link:focus-visible .ds-coverage-map {
	filter: brightness(0.9);
}

.ds-map-area path {
	cursor: pointer;
	transition: fill 0.15s ease;
}

.ds-map-area:hover path,
.ds-map-area:focus-visible path {
	fill: var(--wp--preset--color--ink);
}

.ds-map-area:focus-visible {
	outline: none;
}

.ds-coverage-map .ds-map-county,
.ds-coverage-map .ds-map-label,
.ds-coverage-map .ds-map-pin {
	pointer-events: none;
}

.ds-map-land { fill: #d3dcbf; stroke: var(--wp--preset--color--white); stroke-width: 0.6; }
.ds-map-core { fill: var(--wp--preset--color--olive); stroke: var(--wp--preset--color--white); stroke-width: 1.2; stroke-linejoin: round; }
.ds-map-cumbria { fill: #66783e; stroke: var(--wp--preset--color--white); stroke-width: 1.2; stroke-linejoin: round; }
.ds-map-near { fill: #7d8f55; stroke: var(--wp--preset--color--white); stroke-width: 1.2; stroke-linejoin: round; }

.ds-map-county {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 12px;
	font-weight: 700;
	fill: var(--wp--preset--color--white);
}

.ds-map-county--near {
	font-weight: 400;
}

.ds-map-pin {
	fill: var(--wp--preset--color--black);
	stroke: var(--wp--preset--color--white);
	stroke-width: 2;
}

.ds-map-label {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 15px;
	font-weight: 700;
	fill: var(--wp--preset--color--white);
}

/* County page maps: the county in olive, its main towns labelled. */
.ds-county-map {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--stone);
}

.ds-county-map .ds-map-core {
	stroke: none;
}

.ds-county-map .ds-map-land {
	stroke-width: 0.8;
}

.ds-map-pin--town {
	fill: var(--wp--preset--color--white);
	stroke: #2c3615;
	stroke-width: 1.2;
}

.ds-county-map .ds-map-label {
	font-size: 13px;
	font-weight: 400;
	paint-order: stroke;
	stroke: #3f4e1f;
	stroke-width: 3px;
	stroke-linejoin: round;
}

.ds-county-map .ds-map-label--main {
	font-size: 15px;
	font-weight: 700;
}

.ds-county-map-wrap {
	margin-top: 2rem;
}

.ds-soft-box .ds-map-link,
.ds-soft-box .ds-coverage-map {
	max-width: 300px;
}

.ds-map-key {
	margin: 1.25rem auto 0;
	padding: 0;
	max-width: 360px;
	list-style: none;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

.ds-map-key li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.3rem 0;
}

.ds-map-swatch {
	flex: none;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
}

.ds-map-swatch--core { background: var(--wp--preset--color--olive); }
.ds-map-swatch--cumbria { background: #66783e; }
.ds-map-swatch--near { background: #7d8f55; }

/* Recent sales on phones: two per row, smaller captions. */
@media (max-width: 600px) {
	.ds-sales-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;
	}
	.ds-sales-grid .wp-element-caption {
		padding: 0.5rem 0.6rem;
		font-size: 0.8125rem;
		line-height: 1.4;
	}
}

/* Recent sales: 4 across on laptops and up, 2 across below, so the eight
   photos always make complete rows. */
.ds-sales-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (min-width: 900px) {
	.ds-sales-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* Plain tag list (e.g. services we can recommend): tidy, not animated. */
.ds-tags--plain {
	justify-content: flex-start;
}
.ds-tags--plain span,
.ds-tags--plain span:nth-child(n) {
	animation: none;
	transform: none;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	background: var(--wp--preset--color--white);
	border: 1px solid #dfe5d3;
	color: var(--wp--preset--color--ink);
}

/* "Switched to us and sold" case studies. */
.ds-case__photo img {
	aspect-ratio: 3 / 2;
}
.ds-case__badge {
	display: inline-block;
	margin: 0 0 0.5rem !important;
	padding: 0.15rem 0.6rem;
	background: #a23b2a;
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 2px;
}
.ds-case__price {
	margin-top: 0.25rem !important;
	font-weight: 700;
	color: var(--wp--preset--color--olive);
}
.ds-case .wp-block-list {
	padding-left: 1.1rem;
	font-size: 0.975rem;
}
.ds-case__before {
	font-size: 0.975rem;
	color: var(--wp--preset--color--muted);
}
.ds-case__after {
	margin-top: 0.25rem !important;
	font-family: var(--wp--preset--font-family--serif);
}

/* County pages: "Areas we cover" box. */
.ds-county-areas ul {
	padding-left: 1.2rem;
}

.ds-county-areas li {
	margin: 0.25rem 0;
}

/* ---------- Properties for sale ---------- */

.ds-properties h1 {
	margin-bottom: 0.5rem;
}

.ds-properties-intro {
	max-width: 46rem;
	/* Line up with the title (the left edge of the 1180px content area)
	   at every screen width, not centred and not pinned to the page edge. */
	margin-left: max(0px, calc((100% - 1180px) / 2)) !important;
	color: var(--wp--preset--color--muted);
}

.ds-property-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

.ds-property-card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone);
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ds-property-card a:hover,
.ds-property-card a:focus-visible {
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.1);
	transform: translateY(-2px);
}

.ds-property-card__img {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--wp--preset--color--sage);
}

.ds-property-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ds-ribbon {
	position: absolute;
	top: 0.75rem;
	left: 0;
	padding: 0.3rem 0.8rem;
	background: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ds-property-card__body {
	padding: 1rem 1.25rem 1.25rem;
}

.ds-property-card__price {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.3125rem;
	font-weight: 700;
	color: var(--wp--preset--color--olive);
}

.ds-price-qualifier {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.ds-property-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.ds-property-card__type {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

/* Single property */
.ds-property__back {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
}

.ds-gallery {
	position: relative;
	margin-bottom: 2rem;
	/* The page colour, not black: a photo of a different shape from the
	   frame then shows no dark bars around it (Dave). */
	background: var(--wp--preset--color--cream);
}

.ds-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ds-gallery__track::-webkit-scrollbar {
	display: none;
}

.ds-gallery__slide {
	flex: 0 0 100%;
	margin: 0;
	aspect-ratio: var(--ds-gallery-ratio, 3 / 2);
	max-height: 70vh;
	scroll-snap-align: start;
}

.ds-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Rightmove photos are 1024px wide: show them at most at that size rather
   than enlarging them (softer); floorplans still fill the frame. */
.ds-gallery__slide:not(.is-plan) img {
	object-fit: scale-down;
	/* A wider photo sits at the top, level with the price box. */
	object-position: center top;
}

.ds-gallery__btn {
	position: absolute;
	top: 50%;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: -1.375rem;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.9);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ds-gallery__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0.65rem;
	height: 0.65rem;
	border-top: 2px solid var(--wp--preset--color--ink);
	border-right: 2px solid var(--wp--preset--color--ink);
}

.ds-gallery__btn--prev { left: 1rem; }
.ds-gallery__btn--prev::before { transform: translateX(2px) rotate(-135deg); }
.ds-gallery__btn--next { right: 1rem; }
.ds-gallery__btn--next::before { transform: translateX(-2px) rotate(45deg); }

.ds-gallery__btn:hover,
.ds-gallery__btn:focus-visible {
	background: var(--wp--preset--color--white);
}

.ds-gallery__count {
	position: absolute;
	right: 1rem;
	top: 1rem; /* Always on the photo, whatever its shape. */
	padding: 0.2rem 0.6rem;
	background: rgb(0 0 0 / 0.6);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
}

/* Photos, then the text, on the left; the price box on the right, level with
   the top of the photos and following the page down (Dave). */
.ds-property__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: 0 var(--wp--preset--spacing--60);
	align-items: start;
}

.ds-property__media {
	grid-column: 1;
	grid-row: 1;
	min-width: 0; /* Otherwise the photo strip widens the column past the screen. */
}

.ds-property__main {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
}

.ds-property__layout > .ds-property__aside {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.ds-property__title {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.ds-property__type {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--muted);
}

.ds-property__summary {
	font-size: var(--wp--preset--font-size--large);
}

.ds-property__main h2 {
	margin-top: 2.5rem;
	font-size: 1.5rem;
}

.ds-property__main h3 {
	margin: 2rem 0 0.5rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--wp--preset--color--stone);
	font-size: 1.125rem;
}

.ds-room h4 {
	margin: 1.1rem 0 0.2rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
}

.ds-room p {
	margin: 0;
}

.ds-room__size {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.ds-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 1px;
	margin: 1.5rem 0;
	border: 1px solid var(--wp--preset--color--stone);
	background: var(--wp--preset--color--stone);
}

.ds-facts div {
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--white);
}

.ds-facts dt {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ds-facts dd {
	margin: 0.15rem 0 0;
	font-weight: 600;
}

.ds-key-features {
	padding-left: 1.2rem;
}

.ds-key-features li {
	margin: 0.35rem 0;
}

.ds-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.ds-plans h2 {
	margin-top: 0 !important;
	font-size: 1.25rem !important;
}

.ds-plan-note {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.ds-plan {
	display: block;
	max-width: 24rem;
	margin: 1rem 0;
	border: 1px solid var(--wp--preset--color--stone);
	background: var(--wp--preset--color--white);
}

.ds-plan img {
	display: block;
	width: 100%;
	height: auto;
}

.ds-property__disclaimer {
	margin-top: 2.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.ds-property__aside {
	position: sticky;
	top: 7rem;
}

.ds-property__box {
	padding: 1.5rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone);
	border-top: 4px solid var(--wp--preset--color--olive);
}

.ds-status {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.2rem 0.7rem;
	background: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ds-property__price {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.2;
}

.ds-property__rooms {
	margin: 0.35rem 0 1.25rem;
	color: var(--wp--preset--color--muted);
}

.ds-property__box .wp-block-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ds-property__box .wp-block-button,
.ds-property__box .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.ds-property__note {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

/* Tablets: the price box stays on the right (Dave), a little narrower. */
@media (min-width: 701px) and (max-width: 1024px) {
	.ds-property__layout {
		grid-template-columns: minmax(0, 1fr) 15rem;
		column-gap: 1.75rem;
	}

	.ds-property__box {
		padding: 1.25rem;
	}

	.ds-property__price {
		font-size: 1.5rem;
	}

	/* Keep "Call us on: 01423 206060" on one line (Dave). */
	.ds-property__box .wp-block-button__link {
		padding-inline: 0.5rem;
		font-size: 0.9375rem;
	}
}

.ds-property__box .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 700px) {
	.ds-property__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* On phones, the price and buttons come straight after the photos. */
	.ds-property__media,
	.ds-property__main,
	.ds-property__layout > .ds-property__aside {
		grid-column: 1;
		grid-row: auto;
	}

	.ds-property__aside {
		position: static;
		margin-bottom: 2rem;
	}

	/* Smaller arrows, closer to the edges. */
	.ds-gallery__btn {
		width: 2.25rem;
		height: 2.25rem;
		margin-top: -1.125rem;
	}

	.ds-gallery__btn--prev { left: 0.5rem; }
	.ds-gallery__btn--next { right: 0.5rem; }
}

/* County "How We Can Help" cards: four across, so a slightly smaller
   heading keeps "About Dales & Shires" on one line. */
.ds-county-help .ds-service-card h3 {
	font-size: 1.125rem;
}

/* County links on Where We Cover: deliberately visible (Dave wants
   visitors to find the county pages; deeper pages stay quiet). */
a.ds-county-link {
	font-weight: 700;
	text-decoration: underline;
}

/* ---------- Location pages (valuation and probate) ---------- */

.ds-hero-note {
	margin-top: 1rem !important;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

/* Text and the place-details card start on the same line. */
.ds-location-about .wp-block-column > :first-child,
.ds-location-about .ds-card > :first-child {
	margin-top: 0;
}

.ds-location-about .ds-card h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.ds-cta-strip p {
	margin-inline: auto;
}

.ds-small-print {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.ds-other-services h2 {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Homepage: slim "Already on the Market?" box under the three main cards,
   in the same pale sage as them (Dave, Sept 2026). */
.ds-home-aotm {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-top: var(--wp--preset--spacing--40) !important;
	padding: 1.25rem 1.5rem;
	background: #f3f5ee;
	border: 1px solid #dfe5d3;
}
.ds-home-aotm__text > * {
	margin: 0 !important;
}
.ds-home-aotm__text h3 {
	margin-bottom: 0.35rem !important;
}
.ds-home-aotm__link {
	flex: none;
	margin: 0 !important;
}
@media (max-width: 781px) {
	.ds-home-aotm {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Phones: a little more space between boxes once they stack (Dave). The
   recent-sales photos keep their tight two-per-row grid. */
@media (max-width: 781px) {
	.ds-property-grid.ds-property-grid,
	.ds-advice-index {
		row-gap: 1.75rem !important;
	}
}

/* ---------- "Property sales near <place>" (location pages) ---------- */
.ds-nearby-sales h2 {
	margin-top: 0;
}
.ds-sales-summary {
	max-width: 46rem;
	font-size: var(--wp--preset--font-size--large);
}
.ds-sales-types {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 2rem;
}
.ds-sales-type {
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone);
	border-top: 3px solid var(--wp--preset--color--olive);
}
.ds-sales-type > p {
	margin: 0 !important;
}
.ds-sales-type__label {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olive);
}
.ds-sales-type__price {
	margin-top: 0.25rem !important;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
}
.ds-sales-type__count,
.ds-sales-type__avg {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}
.ds-sales-type.is-empty .ds-sales-type__price {
	color: var(--wp--preset--color--muted);
}
.ds-sales-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone);
	font-size: 0.9375rem;
}
.ds-sales-table th,
.ds-sales-table td {
	padding: 0.6rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--stone);
}
.ds-sales-table th {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.ds-sales-price {
	font-weight: 700;
	white-space: nowrap;
}
.ds-sales-new {
	margin-left: 0.3rem;
	padding: 0.05rem 0.4rem;
	border-radius: 2px;
	background: var(--wp--preset--color--sage);
	font-size: 0.75rem;
}
.ds-sales-advice {
	margin-top: 2rem;
	max-width: 46rem;
}
.ds-sales-credit {
	margin-top: 1.5rem !important;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}
.ds-sales-credit a {
	color: inherit;
}
@media (max-width: 781px) {
	.ds-sales-types {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
	/* The table becomes a list of small cards on phones. */
	.ds-sales-table,
	.ds-sales-table tbody,
	.ds-sales-table tr,
	.ds-sales-table td {
		display: block;
	}
	.ds-sales-table {
		border: 0;
		background: none;
	}
	.ds-sales-table thead {
		display: none;
	}
	.ds-sales-table tr {
		margin-bottom: 0.75rem;
		padding: 0.6rem 0.9rem;
		background: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--stone);
	}
	.ds-sales-table td {
		padding: 0.15rem 0;
		border: 0;
	}
	.ds-sales-table td::before {
		content: attr(data-label) ": ";
		color: var(--wp--preset--color--muted);
	}
}
/* Under the photo in the location pages' heading (and on phones). */
.ds-location-map {
	margin-top: 1.25rem !important;
}
.ds-property-map {
	margin-top: 1rem !important;
}
.ds-map-link {
	margin-top: 0.4rem !important;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

/* Property photo thumbnails: 12 across on desktop, 6 on phones (Dave). */
.ds-gallery {
	margin-bottom: 0.75rem;
}
.ds-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0.4rem;
	margin-bottom: 2rem;
}
.ds-gallery__thumb {
	position: relative;
	padding: 0;
	border: 2px solid transparent;
	background: none;
	cursor: pointer;
	aspect-ratio: 1;
	overflow: hidden;
	transition: border-color 0.2s ease;
}
.ds-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Thumbnails stay at full colour; only the current one is outlined (Dave). */
.ds-gallery__thumb.is-current {
	border-color: var(--wp--preset--color--olive);
}
.ds-gallery__thumb.is-plan {
	background: var(--wp--preset--color--white);
}
.ds-gallery__thumb.is-plan img {
	object-fit: contain;
}
.ds-gallery__thumb span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.1rem 0;
	background: rgb(0 0 0 / 0.6);
	color: var(--wp--preset--color--white);
	font-size: 0.625rem;
	text-align: center;
}
/* Floorplans in the main gallery: on white, not the photos' dark ground. */
.ds-gallery__slide.is-plan {
	background: var(--wp--preset--color--white);
}
.ds-property > .ds-property__title {
	margin-top: 0.5rem;
}
.ds-property > .ds-property__type {
	margin: 0.25rem 0 1.25rem;
}
/* Beside the price box the photo column is narrower: fewer thumbnails a row
   on laptops (8) and tablets and phones (6), so they stay a usable size. */
@media (min-width: 1025px) and (max-width: 1180px) {
	.ds-gallery__thumbs {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}
@media (max-width: 1024px) {
	.ds-gallery__thumbs {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 0.3rem;
	}
}

/* Full-width "Where We Cover" box (Our Services, Free Home Valuations):
   text left, map right on wider screens; stacked like the homepage card
   (heading, text, map, link) below 782px. */
.ds-coverage-box {
	margin-top: var(--wp--preset--spacing--50) !important;
}
@media (min-width: 782px) {
	.ds-coverage-box {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
		grid-template-rows: auto auto auto 1fr;
		column-gap: clamp(2rem, 5vw, 4rem);
		align-items: start;
		padding: clamp(1.75rem, 3vw, 2.5rem);
	}
	.ds-coverage-box > * {
		grid-column: 1;
	}
	.ds-coverage-box > .ds-map {
		grid-column: 2;
		grid-row: 1 / span 4;
		align-self: center;
		margin: 0;
	}
	.ds-coverage-box .ds-map-link,
	.ds-coverage-box .ds-coverage-map {
		max-width: 20rem;
	}
}

/* Where We Cover box as the first thing in a section (Free Home
   Valuations, above "Good to know"). */
.ds-good-to-know .ds-coverage-box {
	margin-top: 0 !important;
}
.ds-coverage-box + .wp-block-heading {
	margin-top: var(--wp--preset--spacing--60);
}

/* FAQ page: the "On the market…" box as the only thing in its section. */
.ds-faq-aotm .ds-home-aotm {
	margin-top: 0 !important;
}

/* Printing: a property's details as particulars. (The print rules every
   page shares are in theme.css.) */
@media print {

	/* A property's details: the main photo, the price, four more photos,
	   then the description, floorplan and EPC. Left off: the remaining
	   photos, the map, and the testimonials, enquiry form and footer. */
	.single-ds-property .ds-property-section {
		padding-top: 1rem !important;
		padding-bottom: 0 !important;
	}
	.single-ds-property main > :not(.ds-property-section),
	.single-ds-property footer,
	.ds-property__back,
	.ds-gallery__btn,
	.ds-gallery__count,
	.ds-gallery__thumbs,
	.ds-gallery__slide.is-plan,
	.ds-gallery__slide:nth-child(n+6),
	.ds-property__map,
	.ds-plan-note {
		display: none !important;
	}
	.ds-property__layout {
		display: block;
	}
	.ds-property > .ds-property__type {
		margin-bottom: 0.75rem;
	}
	.ds-gallery {
		margin-bottom: 0.75rem;
		background: none;
	}
	.ds-gallery__track {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.4rem;
		overflow: visible;
	}
	.ds-gallery__slide {
		max-height: none;
		aspect-ratio: 3 / 2;
	}
	.ds-gallery__slide:first-child {
		grid-column: 1 / -1;
		aspect-ratio: var(--ds-gallery-ratio, 3 / 2);
	}
	.ds-gallery__slide img,
	.ds-gallery__slide:not(.is-plan) img {
		object-fit: cover;
		object-position: center;
	}
	/* The price box becomes one slim strip under the photos. */
	.ds-property__aside {
		position: static;
		margin-bottom: 1rem;
	}
	.ds-property__box {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.15rem 1rem;
		padding: 0.6rem 1rem;
		break-inside: avoid;
	}
	.ds-property__box > * {
		margin: 0 !important;
	}
	.ds-property__price {
		font-size: 1.5rem;
	}
	.ds-property__note,
	.ds-property__print-contact {
		flex-basis: 100%;
	}
	.ds-plan {
		max-width: none;
	}
	.ds-facts,
	.ds-room,
	.ds-plans > div {
		break-inside: avoid;
	}
	.ds-plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ds-property__disclaimer {
		margin-top: 1.25rem;
		break-before: avoid;
	}
	.ds-property__print-footer {
		break-before: avoid;
		margin-top: 1rem;
		padding-top: 0.75rem;
		border-top: 1px solid var(--wp--preset--color--stone);
		font-family: var(--wp--preset--font-family--serif);
		font-size: 0.875rem;
		text-align: center;
	}
}