/**
 * Property widgets.
 *
 * Every colour, radius and shadow is a custom property declared once on .pc-w.
 * Elementor's controls write to those variables, and a theme can restyle the
 * whole pack by redefining them, with no element selectors that could leak
 * into theme markup.
 *
 * !important appears in exactly two places, both marked: icon dimensions and
 * the overlay controls' backgrounds. Those are structural — an icon that does
 * not render is a broken interface, not a style choice — and every one is
 * scoped to an element this plugin owns. Colour, spacing and typography stay
 * open so a theme or Elementor can still override them.
 */

/* Box model.
 *
 * The plugin never set this, and inherited whatever the theme happened to
 * use. A control with width:100% plus 14px of padding and a 1px border is
 * then 30px wider than its parent — invisible on a desktop row where the
 * fields have slack, and an obvious overhang once they stack on a phone.
 *
 * Scoped to the plugin's own wrappers, so it cannot alter anything else on
 * the page. */
.pc-w,
.pc-w *,
.pc-w *::before,
.pc-w *::after,
.pc-saved,
.pc-saved * {
	box-sizing: border-box;
}

.pc-w {
	/* Brand palette.
	 *
	 * --pc-accent is the navy: headings, active states, primary surfaces.
	 * --pc-cta is the turquoise, and is reserved for the thing the visitor is
	 * meant to press. Turquoise on navy text is the only pairing here that
	 * clears contrast at button size, which is why the CTA carries navy text
	 * rather than white.
	 *
	 * Falls back to the values PC_Typography prints on :root, so changing the
	 * brand is one filter rather than a search through this file. */
	--pc-accent: var(--pc-navy, #000030);
	--pc-cta: var(--pc-turquoise, #69D8FF);
	--pc-cta-ink: #000030;
	--pc-ink: var(--pc-navy, #000030);
	--pc-muted: #5b6072;
	--pc-line: #dfe3ec;
	--pc-surface: #fff;
	/* Featured badge. Cyan ground, navy text — the brand pairing, and the only
	   one of the two that clears contrast at badge size. White on this cyan
	   does not. */
	--pc-featured: var(--pc-brand-cyan, #35C8F9);
	--pc-featured-ink: var(--pc-navy, #000030);

	/* Kept for the tick marks in the features list, which need a colour that
	   reads as confirmation rather than as branding. */
	--pc-confirm: #0f6e56;
	--pc-radius: 12px;
	--pc-shadow: none;

	--pc-font-head: var(--pc-font-head, "Fraunces", Georgia, serif);
	--pc-font-body: var(--pc-font-body, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--pc-ink);
}

/* ============================================================
   Typography

   The previous version set the body font on every p, span, a, li, td and th
   inside a widget with !important. That is what broke other widgets: an icon
   font is a font, so `.pc-w span { font-family: … !important }` overrides
   Font Awesome and Elementor's eicons and the glyphs come out as letters.

   So the blanket rule is gone. Instead:

     - the body face is set once on the wrapper and inherits, the way CSS
       intends, with form controls named explicitly because they do not
       inherit font by default;
     - the display face is applied to named elements only, never to a bare
       descendant selector that could catch an icon.

   Anything not named here keeps whatever the theme gives it, which is the
   behaviour a plugin should have.
   ============================================================ */

/* Form controls do not inherit font, so they are named. */
.pc-w input,
.pc-w select,
.pc-w textarea,
.pc-w button {
	font-family: inherit;
}

/* Display face: h1, h2 and h4, plus the plugin's own title and price classes.
 *
 * h3 is deliberately excluded and set back to the body face below. It is the
 * level used for card titles and for section headings inside other people's
 * widgets, where a serif reads as the plugin overreaching. */
.pc-w h1,
.pc-w h2,
.pc-w h4,
.pc-w h1 a,
.pc-w h2 a,
.pc-w h4 a,
.pc-w .pc-single__title,
.pc-w .pc-single__title a,
.pc-w .pc-block__title,
.pc-w .pc-enquiry__title,
.pc-w .pc-similar__heading,
.pc-w .pc-carousel__heading,
.pc-w .pc-hero__heading,
.pc-w .pc-facts--boxes strong,
.pc-w .pc-rail__amount,
.pc-w .pc-explorer__count strong {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-weight: 600;
}

/* Prices that are paragraphs.
 *
 * A site-wide `p { font-family: … !important }` — common in a theme's global
 * typography, and present in this site's header — reaches these and strips the
 * display face off the price. It is the one place the plugin has to answer in
 * kind.
 *
 * Narrow on purpose: two named classes, not a descendant selector. The last
 * time this file used !important broadly it caught icon fonts and broke other
 * widgets. */
/* The single-page price keeps the display face — it is large, on white, and
   sits with the title. Only the card price moved to the sans. */
.pc-w p.pc-single__price {
	font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
}

/* h3 is the body face. */
.pc-w h3,
.pc-w h3 a {
	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 700;
}

/* Card titles are the exception, and need !important to be one.
 *
 * They are h3 elements — correct for a grid, where each card sits under the
 * page's h1 and a section h2 — but a site-wide `h3 { font-family: … !important }`
 * then makes them sans while every other title on the page is serif.
 *
 * Two named classes only. The version that used !important on bare descendant
 * selectors is what broke icon fonts, and this is deliberately not that. */
html body .pc-w h3.pc-card__title,
html body .pc-w h3.pc-card__title a,
html body .pc-card__title,
html body .pc-card__title a {
	font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
	font-weight: 600;
	text-transform: none !important;
}

/* Icon fonts get no rule at all — deliberately.
 *
 * The instinct is to add a guard like `.pc-w [class*="fa-"] { font-family:
 * inherit }`, but that is the same mistake in reverse: it would override
 * Font Awesome's own declaration and the glyphs would render as letters
 * again. The only correct treatment for an icon font is to leave it alone,
 * which is what not writing a rule achieves. */

/* ============================================================
   Shared form controls
   ============================================================ */

.pc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.pc-field--grow { flex: 2 1 220px; }
.pc-field--narrow { max-width: 130px; }

.pc-field__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--pc-muted);
}

/* 16px, not 15.
 *
 * Safari on iOS zooms the page when a focused input is smaller than 16px, and
 * does not zoom back out afterwards — so one tap on a search field leaves the
 * visitor stuck on a magnified layout. It is a rendering threshold rather
 * than a typographic preference, which is why it holds at every breakpoint. */
.pc-input, .pc-select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pc-line);
	border-radius: 8px;
	background: #fff;
	color: var(--pc-ink);
	font-size: 16px;
	font: inherit;
	line-height: 1.3;
	appearance: none;
}

.pc-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7385' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px;
	padding-right: 32px;
}

.pc-input:focus, .pc-select:focus {
	outline: 2px solid var(--pc-cta);
	outline-offset: 1px;
	border-color: var(--pc-accent);
}

.pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 26px;
	border: 1px solid transparent;
	border-radius: 8px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.pc-w .pc-btn--go,
.pc-w button.pc-btn--go {
	background: var(--pc-cta) !important;
	background-color: var(--pc-cta) !important;
	border-color: var(--pc-cta) !important;
	color: var(--pc-cta-ink) !important;
}

.pc-w .pc-btn--go:hover,
.pc-w button.pc-btn--go:hover { filter: brightness(.94); }
.pc-btn--ghost { background: transparent; border-color: var(--pc-line); color: var(--pc-ink); }
.pc-btn--ghost:hover { border-color: var(--pc-accent); }
.pc-btn:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }

.pc-w button.pc-round {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--pc-line); border-radius: 50%;
	background: #fff; color: var(--pc-ink);
	font-size: 20px; line-height: 1; cursor: pointer;
}
.pc-round:hover { border-color: var(--pc-accent); }

/* ============================================================
   Search fields, shared

   One rule for the homepage bar and the results page. Written once because
   the two searches were drifting apart every time either was touched — the
   symptom being fields that had borders on one page and not the other.
   ============================================================ */

.pc-hero__form .pc-input,
.pc-hero__form .pc-select,
.pc-explorer__row .pc-input,
.pc-explorer__row .pc-select {
	border: 1px solid var(--pc-brand-cyan, #35C8F9);
	border-radius: 8px;
	background-color: #fff;
	padding: 12px 14px;
	font-size: 16px;
	font-weight: 500;
	color: var(--pc-ink);
}

.pc-hero__form .pc-select,
.pc-explorer__row .pc-select {
	background-position: right 12px center;
	padding-right: 34px;
}

/* Focus steps up to a 2px navy edge. The padding drops by the same pixel, or
   every field shifts when clicked — very visible across a row of five. */
.pc-hero__form .pc-input:focus,
.pc-hero__form .pc-select:focus,
.pc-explorer__row .pc-input:focus,
.pc-explorer__row .pc-select:focus {
	border-width: 2px;
	border-color: var(--pc-accent);
	outline: none;
	padding: 11px 13px;
}

.pc-hero__form .pc-select:focus,
.pc-explorer__row .pc-select:focus { padding-right: 33px; }

/* ============================================================
   Homepage search

   Rewritten as one block. The previous version had grown across a dozen
   revisions into overlapping rules that contradicted each other — a later
   `border: 0` was undoing an earlier `border: 1px solid cyan` purely on
   source order, which is why the fields kept losing their outline. Patching
   that again would have added a fourteenth rule to the pile.

   The structure is the same as the results page: a bordered container,
   individually bordered fields, one control height. Anything the two share
   is written once, in the block above this one.
   ============================================================ */

.pc-hero__heading { margin: 0 0 14px; font-size: clamp(24px, 3vw, 38px); }

.pc-hero__form {
	--pc-control-h: 48px;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 16px;
	background: var(--pc-surface);
	border: 1px solid var(--pc-brand-cyan, #35C8F9);
	border-radius: var(--pc-radius);
}

/* Every field is the same shape vertically.
 *
 * The labels were sitting at different heights because the fields were
 * stretching to fill the row and each label floated at the top of its own
 * box. Fixing the label line-height and letting only the control stretch puts
 * them back on one line. */
.pc-hero__form .pc-field {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: 0;
}

.pc-hero__form .pc-field__label {
	line-height: 1;
	margin: 0;
}

.pc-hero__form .pc-field--narrow { flex: 0 1 130px; }
.pc-hero__form .pc-field--ref { flex: 0 1 160px; }

/* Height only — the border, radius and padding come from the shared field
   rule above, so the homepage bar and the results page cannot diverge. */
.pc-hero__form .pc-input,
.pc-hero__form .pc-select { height: var(--pc-control-h); }

.pc-w .pc-hero__form button.pc-btn--go {
	flex: 0 0 auto;
	height: var(--pc-control-h);
	padding: 0 34px;
	border-radius: 8px;
	letter-spacing: .05em;
}

/* The card and stacked variants differ only in how the row wraps. */
.pc-hero--card .pc-hero__form { flex-wrap: wrap; }
.pc-hero--card .pc-field { flex: 1 1 170px; }
.pc-hero--stack .pc-hero__form { flex-direction: column; align-items: stretch; }
.pc-w .pc-hero--stack button.pc-btn--go { width: 100%; }

@media (max-width: 1160px) {
	.pc-hero__form { gap: 10px; }
	/* Held at 16px. Anything smaller makes Safari on iOS zoom in on focus and
	   never zoom back, which is far worse than a slightly tighter row. */
	.pc-hero__form .pc-input, .pc-hero__form .pc-select { font-size: 16px; }
	.pc-w .pc-hero__form button.pc-btn--go { padding: 0 24px; }
}

/* Below this a single row cannot hold the fields and a button without each
   becoming unusably narrow, so the bar wraps. */
@media (max-width: 1024px) {
	.pc-hero__form { flex-wrap: wrap; }
	.pc-hero__form .pc-field { flex: 1 1 150px; }
	.pc-w .pc-hero__form button.pc-btn--go { flex: 1 1 100%; }
}

@media (max-width: 640px) {
	/* Stacked. Every field the same width — a half-width "Bedroom" beside a
	   full-width "Location" looks like a mistake rather than a choice, and on
	   a phone there is no row for it to be narrow within. */
	.pc-hero__form { flex-direction: column; align-items: stretch; padding: 14px; gap: 12px; }
	.pc-hero__form .pc-field,
	.pc-hero__form .pc-field--narrow,
	.pc-hero__form .pc-field--grow,
	.pc-hero__form .pc-field--ref { flex: 1 1 auto; width: 100%; max-width: 100%; }

	/* 46px is the smallest comfortable touch target; the desktop 48px is
	   kept rather than reduced, since there is no space pressure once the
	   fields are stacked. */
	.pc-hero__form .pc-input,
	.pc-hero__form .pc-select { height: 48px; font-size: 16px; }

	.pc-w .pc-hero__form button.pc-btn--go { width: 100%; height: 48px; padding: 0 20px; }
}

/* ============================================================
   Filters
   ============================================================ */

.pc-filters__form {
	padding: 18px;
	background: var(--pc-surface);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
}

.pc-filters__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

@media (max-width: 1024px) { .pc-filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pc-filters__grid { grid-template-columns: 1fr; } }

.pc-filters__features { margin: 16px 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pc-filters__features legend { margin-bottom: 8px; }

.pc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--pc-line); border-radius: 999px; font-size: 13px; cursor: pointer; }
.pc-chip input { margin: 0; }
.pc-chip:has(input:checked) { border-color: var(--pc-accent); background: color-mix(in srgb, var(--pc-cta) 22%, #fff); }

.pc-filters__actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pc-filters__count { color: var(--pc-muted); font-size: 14px; margin-left: auto; }

/* ============================================================
   Button reset

   Themes routinely style every <button> on the site — background colour,
   padding, min-width, uppercase. Our overlay controls are buttons, so a theme
   rule turns a 6px dot into a padded block and a bare heart into a coloured
   tile sitting on top of the photo.

   Specificity here is deliberate: `.pc-w button.pc-fav` is 0,2,1, which beats
   the `button`, `.elementor button` and `.entry-content button` rules themes
   normally use, without resorting to !important. Every property a theme is
   likely to set is reset, not just background.
   ============================================================ */

.pc-w button.pc-fav,
.pc-w button.pc-shots__arrow,
.pc-w button.pc-shots__dot,
.pc-w button.pc-round,
.pc-w button.pc-pager__btn {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	min-width: 0;
	min-height: 0;
	max-width: none;
	font: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
	transition: none;
}

/* Icon sizing, and the one place !important is warranted.
 *
 * Two rounds of theme overrides have now flattened these controls: first a
 * global `button` background, then a global `svg { width: 1em }` that shrank a
 * 24px heart to a dot. Raising specificity fixed the first and lost to the
 * second, which means the theme is using !important or an id.
 *
 * Beyond a point, out-specifying an unknown stylesheet is a game you cannot
 * finish. These four declarations are scoped to elements this plugin owns and
 * nothing else, and an icon that does not render is a broken interface — not a
 * styling preference a theme should get to win. Everything else in this file
 * stays free of it. */
.pc-w button.pc-fav svg,
.pc-w button.pc-shots__arrow svg,
.pc-w .pc-card__facts svg,
.pc-w .pc-card__where svg,
.pc-w .pc-facts svg {
	display: block;
	flex: 0 0 auto;
	max-width: none !important;
	max-height: none !important;
}

.pc-w button.pc-fav svg { width: 24px !important; height: 24px !important; }
.pc-w .pc-card__facts svg { width: 17px !important; height: 17px !important; }
.pc-w .pc-card__where svg { width: 15px !important; height: 15px !important; }
.pc-w .pc-facts svg { width: 22px !important; height: 22px !important; }

/* The two overlay controls carry no surface of their own at all. */
.pc-w button.pc-fav,
.pc-w button.pc-shots__arrow {
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	color: #fff;
}

.pc-w button.pc-shots__dot {
	padding: 0;
	border: 0;
	background-image: none;
}

/* ============================================================
   Grid and cards

   Layout runs on one spacing step (--pc-step). Every gap in a card is that
   value or a multiple of it, which is what stops a card drifting out of
   alignment as fields are added or removed.
   ============================================================ */

.pc-w { --pc-step: 8px; }

.pc-results { position: relative; }

.pc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	transition: opacity .18s ease;
}

@media (max-width: 1024px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .pc-grid { grid-template-columns: 1fr; } }

.pc-results.is-busy .pc-grid { opacity: .4; pointer-events: none; }

.pc-results__status {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}

.pc-card {
	display: flex;
	flex-direction: column;
	background: var(--pc-surface);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.pc-card:hover, .pc-card:focus-within { transform: translateY(-3px); box-shadow: var(--pc-shadow, 0 12px 28px rgba(0,0,48,.12)); }

@media (prefers-reduced-motion: reduce) {
	.pc-card, .pc-grid { transition: none; }
	.pc-card:hover { transform: none; }
}

/* --- Media and its four corners ------------------------------------- */

.pc-card__media { position: relative; aspect-ratio: 1 / .72; background: #eef1f6; overflow: hidden; }
.pc-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-card__placeholder {
	display: block; width: 100%; height: 100%;
	background: repeating-linear-gradient(45deg, #eef1f6, #eef1f6 12px, #e5eaf2 12px, #e5eaf2 24px);
}

/* A light gradient at the top only, keeping the Featured badge and the heart
 * legible on a pale photograph. The foot needs nothing now: the reference and
 * price sit on their own solid block. */
.pc-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(10, 14, 30, .28), transparent 20%);
	z-index: 1;
}

.pc-badge {
	position: absolute;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
	z-index: 3;
}

.pc-badge--featured {
	top: calc(var(--pc-step) * 1.5);
	left: calc(var(--pc-step) * 1.5);
	background: var(--pc-featured);
	color: var(--pc-featured-ink);
	font-weight: 700;
}

/* --- The band ------------------------------------------------------------
 *
 * Reference left, price right, on a grey ground that closes the card. Slightly
 * taller than a normal row so it reads as a distinct element rather than
 * another line of the body, and the price sits in the display face at a size
 * that carries across a grid.
 */
/* A solid block rather than a gradient.
 *
 * The gradient kept the photograph visible behind the text, but the contrast
 * it gave depended on what happened to be in that part of the picture. A flat
 * block is the same on every listing, which is what makes a grid of them read
 * as a set rather than as individual images each doing their own thing. */
.pc-card__band {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: calc(var(--pc-step) * 1.25) calc(var(--pc-step) * 2);
	background: var(--pc-accent);
	pointer-events: none;
}

/* Left as stored. The references are written lowercase in the agency's own
   records (gp437, gp442-cas) and forcing them to capitals made them look like
   a different identifier from the one on their paperwork. */
.pc-card__ref {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .72);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The price on the band.
 *
 * Nunito Sans, forced. Its figures are open and evenly weighted, which holds
 * up better reversed out of a dark ground than Fraunces did — a serif's
 * thin strokes are the first thing to go at small sizes on dark.
 *
 * Positive letter-spacing, against the instinct to tighten a large number:
 * in a run like 995,000 the digits start to merge, and a little air is what
 * separates them. Slightly more than the serif needed, because the sans
 * figures are wider and closer in shape to one another.
 *
 * !important because this is the one number a buyer actually reads, and it
 * is not worth leaving to a specificity argument with a stylesheet I cannot
 * see. */
.pc-w .pc-card__band .pc-card__price,
html body .pc-w .pc-card__band .pc-card__price {
	margin: 0;
	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.1;
	color: #fff;
	white-space: nowrap;
	text-align: right;
	/* Even-width figures, so prices line up down a column instead of
	   drifting with the digits they happen to contain. */
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

/* --- Favourite: icon only, no chrome -------------------------------- */

.pc-w button.pc-fav {
	position: absolute;
	top: var(--pc-step);
	right: var(--pc-step);
	z-index: 3;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color .15s ease, transform .2s ease;
}

/* The only treatment it gets is a shadow on the glyph itself, so it stays
   legible over a light photo without a plate behind it. */
.pc-fav svg {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
	transition: filter .15s ease;
}

.pc-w button.pc-fav:hover { color: #ff5a72; transform: scale(1.1); }
.pc-w button.pc-fav.is-on { color: #ff4d68; }
.pc-w button.pc-fav.is-on svg { fill: currentColor; }
.pc-w button.pc-fav.is-pop { animation: pc-pop .32s ease; }

.pc-w button.pc-fav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 50%;
}

@keyframes pc-pop { 0%,100% { transform: scale(1); } 45% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) {
	.pc-fav.is-pop { animation: none; }
	.pc-fav:hover { transform: none; }
}

/* --- Body: one column, one rhythm ----------------------------------- */

.pc-card__body {
	display: flex;
	flex-direction: column;
	gap: calc(var(--pc-step) * .75);
	padding: calc(var(--pc-step) * 2);
	flex: 1;
}

.pc-card__head { display: flex; align-items: baseline; gap: calc(var(--pc-step) * 1.5); }

/* Casing is handled in PHP by pc_title_case(), which can lowercase and then
 * capitalise each word — something CSS cannot do in one step. No transform
 * here, so a title the agency has already typed properly is left alone. */
.pc-card__title {
	flex: 1;
	margin: 0;
	font-size: 17.5px;
	line-height: 1.35;
	letter-spacing: -.005em;
	text-transform: none;
}

.pc-card__title a { color: var(--pc-ink); text-decoration: none; }
.pc-card__title a:hover { color: var(--pc-accent); }


.pc-card__where {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--pc-muted);
	font-size: 13.5px;
	line-height: 1.4;
}

.pc-card__where svg { flex: 0 0 auto; opacity: .75; }

.pc-card__excerpt {
	margin: 0;
	color: var(--pc-muted);
	font-size: 14px;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Facts sit on their own rule, pushed to the bottom so cards of differing
   text length still line their fact rows up across a row of the grid. */
.pc-card__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: auto 0 0;
	padding: calc(var(--pc-step) * 1.5) 0 0;
	border-top: 1px solid var(--pc-line);
	list-style: none;
	font-size: 14px;
}

.pc-card__facts li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 calc(var(--pc-step) * 1.5);
	line-height: 1.2;
}

.pc-card__facts li:first-child { padding-left: 0; }

/* Hairline separators between facts rather than gaps, which reads as one
   group instead of three loose items. */
.pc-card__facts li + li { border-left: 1px solid var(--pc-line); }

.pc-card__facts svg { color: var(--pc-muted); flex: 0 0 auto; }
.pc-card__facts strong { font-weight: 700; }
.pc-card__facts span { color: var(--pc-muted); font-size: 13px; }

.pc-tag {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 5px;
	background: color-mix(in srgb, var(--pc-line) 45%, #fff);
	color: var(--pc-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Card slideshow */
.pc-shots { position: absolute; inset: 0; z-index: 0; }
.pc-shots__track { display: flex; height: 100%; transition: transform .35s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.pc-shots__slide { flex: 0 0 100%; display: block; height: 100%; }

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

.pc-w button.pc-shots__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px; z-index: 3;
	display: flex; align-items: center; justify-content: center;
	font-size: 30px; cursor: pointer;
	opacity: 0;
	transition: opacity .18s ease, transform .15s ease;
	/* Legibility comes from a shadow on the glyph, not a plate behind it. */
	text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.pc-shots__arrow--prev { left: 10px; }
.pc-shots__arrow--next { right: 10px; }
/* .pc-w wraps the grid, so it is an ancestor of .pc-card — it cannot appear
   after it in the selector. Matching specificity (0,2,1) plus source order is
   what makes this win over the base rule above. */
.pc-card:hover button.pc-shots__arrow,
.pc-w button.pc-shots__arrow:focus-visible { opacity: 1; }

.pc-w button.pc-shots__arrow:hover { transform: translateY(-50%) scale(1.15); }
.pc-w button.pc-shots__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (hover: none) { .pc-w button.pc-shots__arrow { opacity: .92; } }
@media (prefers-reduced-motion: reduce) { .pc-w button.pc-shots__arrow:hover { transform: translateY(-50%); } }

.pc-shots__dots {
	position: absolute; left: 50%; bottom: calc(var(--pc-step) * 1.5);
	transform: translateX(-50%); display: flex; gap: 5px; z-index: 3;
}
.pc-w button.pc-shots__dot {
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .6);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	cursor: pointer;
	transition: width .15s ease, background-color .15s ease;
}

.pc-w button.pc-shots__dot.is-active {
	width: 16px;
	border-radius: 3px;
	background-color: #fff;
}

/* The reference and price occupy the foot of the photo, so the dots lift
   clear of them rather than overlapping. */
.pc-card__media:has(.pc-card__band) .pc-shots__dots { bottom: calc(var(--pc-step) * 6); }

/* List layout */
.pc-layout-list .pc-grid { grid-template-columns: 1fr; gap: 16px; }
.pc-layout-list .pc-card { flex-direction: row; }
.pc-layout-list .pc-card__media { flex: 0 0 36%; aspect-ratio: auto; min-height: 230px; }
.pc-layout-list .pc-card__body { padding: calc(var(--pc-step) * 2.5); }
.pc-layout-list .pc-card__title { font-size: 19px; }
.pc-layout-list .pc-card:hover { transform: none; }
.pc-layout-list .pc-card__facts { padding-top: calc(var(--pc-step) * 1.75); }

@media (max-width: 767px) {
	.pc-layout-list .pc-card { flex-direction: column; }
	.pc-layout-list .pc-card__media { flex: none; width: 100%; aspect-ratio: 1 / .68; min-height: 0; }
}

.pc-empty { grid-column: 1 / -1; padding: 44px; text-align: center; color: var(--pc-muted); }

/* Pagination */
.pc-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; }
.pc-w button.pc-pager__btn {
	min-width: 42px; padding: 9px 14px;
	border: 1px solid var(--pc-line); border-radius: 8px;
	background: var(--pc-surface); color: var(--pc-ink);
	font: inherit; font-size: 14px; cursor: pointer;
}
.pc-pager__btn:hover:not(:disabled):not(.is-current) { border-color: var(--pc-accent); }
.pc-pager__btn.is-current { background: var(--pc-accent); border-color: var(--pc-accent); color: #fff; cursor: default; }
.pc-pager__btn:disabled { opacity: .4; cursor: not-allowed; }
.pc-pager__gap { padding: 0 4px; color: var(--pc-muted); }

/* ============================================================
   Carousel
   ============================================================ */

.pc-carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pc-carousel__heading { margin: 0; font-size: clamp(20px, 2.4vw, 30px); }
.pc-carousel__nav { display: flex; gap: 8px; }

.pc-carousel__track {
	--pc-visible: 3;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--pc-visible) - 1) * 24px) / var(--pc-visible));
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.pc-carousel__track::-webkit-scrollbar { display: none; }
.pc-carousel__track > .pc-card { scroll-snap-align: start; }

@media (max-width: 767px) { .pc-carousel__track { --pc-visible: 1; } }

/* ============================================================
   Gallery
   ============================================================ */

.pc-gal { display: grid; gap: 8px; }
.pc-gal--hero, .pc-gal--wide { grid-template-columns: 2fr 1fr; }
.pc-gal--wide { grid-template-columns: 1fr; }
.pc-gal--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pc-gal__hero { position: relative; aspect-ratio: 1 / .68; border-radius: var(--pc-radius); overflow: hidden; }
.pc-gal__side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-gal__link, .pc-gal__tile {
	position: relative; display: block; overflow: hidden;
	border-radius: var(--pc-radius); background: #eef1f6;
}
.pc-gal__link { width: 100%; height: 100%; }
.pc-gal__tile { aspect-ratio: 1 / .8; }
.pc-gal__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pc-gal__link:hover .pc-gal__img, .pc-gal__tile:hover .pc-gal__img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .pc-gal__img { transition: none; } .pc-gal__link:hover .pc-gal__img { transform: none; } }

.pc-gal__link:focus-visible, .pc-gal__tile:focus-visible { outline: 3px solid var(--pc-cta); outline-offset: 2px; }

.pc-gal__more {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(18,23,43,.55); color: #fff; font-size: 20px; font-weight: 700;
}
.pc-gal__hidden { display: none; }

@media (max-width: 767px) {
	.pc-gal--hero, .pc-gal--wide { grid-template-columns: 1fr; }
	.pc-gal--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Facts
   ============================================================ */

.pc-facts { margin: 0; padding: 0; list-style: none; }

.pc-facts--boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--pc-step) * 1.5); }
.pc-facts--boxes .pc-fact {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: calc(var(--pc-step) * .25);
	padding: calc(var(--pc-step) * 2);
	background: var(--pc-surface); border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
}
.pc-facts--boxes .pc-fact svg { color: var(--pc-accent); margin-bottom: calc(var(--pc-step) * .5); }
.pc-facts--boxes strong { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.pc-facts--boxes span { font-size: 12px; color: var(--pc-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

.pc-facts--inline { display: flex; flex-wrap: wrap; gap: 22px; }
.pc-facts--inline .pc-fact { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; }
.pc-facts--inline svg { color: var(--pc-muted); }
.pc-facts--inline span { color: var(--pc-muted); }

.pc-facts--table { width: 100%; border-collapse: collapse; }
.pc-facts--table th, .pc-facts--table td { padding: 10px 12px; border-bottom: 1px solid var(--pc-line); text-align: left; font-size: 15px; }
.pc-facts--table th { width: 180px; color: var(--pc-muted); font-weight: 600; text-transform: capitalize; }

@media (max-width: 600px) { .pc-facts--boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pc-similar__heading { margin: 0 0 18px; font-size: clamp(20px, 2.4vw, 30px); }
.pc-notice { padding: 24px; border: 1px dashed var(--pc-line); border-radius: var(--pc-radius); text-align: center; color: var(--pc-muted); }

/* ============================================================
   Single property page

   Two columns on desktop with a sticky enquiry rail, one column below
   1024px where a sticky sidebar would eat the viewport.
   ============================================================ */

.pc-single { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; }

.pc-crumb {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin: 24px 0 16px;
	font-size: 13px; color: var(--pc-muted);
}
.pc-crumb a { color: var(--pc-muted); text-decoration: none; }
.pc-crumb a:hover { color: var(--pc-accent); text-decoration: underline; }

.pc-single__headline {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 28px; flex-wrap: wrap; margin-bottom: 22px;
}

.pc-single__headline-main { flex: 1 1 420px; min-width: 0; }
.pc-single__headline-side { flex: 0 0 auto; text-align: right; }

.pc-single__title {
	margin: 0 0 10px;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.15; letter-spacing: -.015em;
}

.pc-single__meta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; color: var(--pc-muted); font-size: 15px; }
.pc-single__where { display: inline-flex; align-items: center; gap: 6px; }
/* Sits above the price now. Monospace because a reference is a code — the
   even widths make it scannable and stop it reading as prose. */
.pc-single__ref {
	display: inline-block;
	margin-bottom: 6px;
	padding: 4px 10px;
	border-radius: 5px;
	background: color-mix(in srgb, var(--pc-line) 45%, #fff);
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12.5px;
	letter-spacing: .02em;
	color: var(--pc-muted);
	white-space: nowrap;
}

.pc-single__price {
	margin: 0 0 10px;
	font-size: clamp(24px, 2.8vw, 34px); font-weight: 700;
	letter-spacing: -.02em; line-height: 1.1; white-space: nowrap;
}

.pc-single__actions { display: flex; gap: 8px; justify-content: flex-end; }

.pc-w button.pc-action {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 16px; margin: 0; min-width: 0;
	border: 1px solid var(--pc-line); border-radius: 999px;
	background: var(--pc-surface); color: var(--pc-ink);
	font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
	cursor: pointer; text-transform: none; letter-spacing: normal;
}
.pc-w button.pc-action:hover { border-color: var(--pc-accent); }
.pc-w button.pc-action svg { width: 18px !important; height: 18px !important; display: block; }
.pc-w button.pc-action.is-on { color: #ff4d68; border-color: #ff4d68; }
.pc-w button.pc-action.is-on svg { fill: currentColor; }

.pc-single__gallery { margin-bottom: 32px; }

.pc-single__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
@media (max-width: 1024px) { .pc-single__layout { grid-template-columns: 1fr; gap: 28px; } }

.pc-single__facts { margin-bottom: 32px; }

.pc-block { margin-bottom: 36px; }
.pc-block__title { margin: 0 0 14px; font-size: clamp(19px, 2vw, 24px); }

.pc-prose { font-size: 16px; line-height: 1.7; color: var(--pc-ink); position: relative; overflow: hidden; }
.pc-prose.is-clamped { max-height: 320px; }
.pc-prose.is-clamped::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 90px;
	background: linear-gradient(to bottom, transparent, var(--pc-surface));
	pointer-events: none;
}
.pc-prose p { margin: 0 0 1em; }
.pc-prose strong { font-weight: 700; }

.pc-w button.pc-more {
	-webkit-appearance: none; appearance: none;
	margin: 4px 0 0; padding: 9px 20px; min-width: 0;
	border: 1px solid var(--pc-line); border-radius: 999px;
	background: var(--pc-surface); color: var(--pc-ink);
	font: inherit; font-size: 14px; font-weight: 600;
	cursor: pointer; text-transform: none;
}
.pc-w button.pc-more:hover { border-color: var(--pc-accent); }

.pc-features { margin: 0; padding: 0; list-style: none; }
.pc-features--ticks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; }
.pc-features--ticks li { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.pc-features--ticks svg { color: var(--pc-confirm); flex: 0 0 auto; width: 17px !important; height: 17px !important; }
.pc-features--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-features--chips li { padding: 7px 14px; border: 1px solid var(--pc-line); border-radius: 999px; font-size: 13.5px; }
@media (max-width: 600px) { .pc-features--ticks { grid-template-columns: 1fr; } }

/* Video: nothing loads until asked */
.pc-video {
	position: relative; aspect-ratio: 16 / 9;
	border-radius: var(--pc-radius); overflow: hidden;
	background: #12172b center/cover no-repeat;
}
.pc-video::after { content: ""; position: absolute; inset: 0; background: rgba(10,14,30,.34); transition: background .15s ease; }
.pc-video.is-playing::after { display: none; }
.pc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pc-w button.pc-video__play {
	-webkit-appearance: none; appearance: none;
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	z-index: 2; width: 74px; height: 74px; padding: 0; margin: 0; min-width: 0;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: rgba(255,255,255,.94) !important; color: var(--pc-accent);
	cursor: pointer; box-shadow: 0 8px 26px rgba(0,0,0,.3);
	transition: transform .18s ease;
}
.pc-w button.pc-video__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.pc-w button.pc-video__play svg { width: 30px !important; height: 30px !important; margin-left: 4px; }
.pc-video:hover::after { background: rgba(10,14,30,.22); }

/* Enquiry rail */
.pc-rail { position: sticky; top: 24px; }

.pc-rail__price {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 18px 20px;
	background: var(--pc-accent); color: #fff;
	border-radius: var(--pc-radius) var(--pc-radius) 0 0;
}
.pc-rail__amount { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.pc-rail__ref { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; opacity: .75; }

/* A light ground, so the panel reads as a distinct thing to act on rather
   than more page. Deliberately faint — strong enough to separate, not so
   strong it competes with the photographs. */
.pc-enquiry {
	padding: 22px 20px;
	background: #f7f8fa;
	border: 1px solid var(--pc-line);
	border-top: 0;
	border-radius: 0 0 var(--pc-radius) var(--pc-radius);
}

/* Phone button.
 *
 * The number is the label; the glyph says what pressing it does. "Call Agent"
 * added a word in place of information, and needed translating. */
.pc-rail__call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 18px;
	background: #f7f8fa;
	border: 1px solid var(--pc-line);
	border-top: 0;
	color: var(--pc-ink);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.pc-rail__call:hover { background: var(--pc-accent); color: #fff; }
.pc-rail__call svg { width: 18px !important; height: 18px !important; flex: 0 0 auto; }
.pc-rail__call:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: -2px; }

/* The call button sits between price and form, so the form loses its own
   top rounding when it is present. */
.pc-rail__call + .pc-enquiry { border-top: 1px solid var(--pc-line); }
.pc-single__layout .pc-enquiry { border-radius: 0 0 var(--pc-radius) var(--pc-radius); }
.pc-enquiry__title { margin: 0 0 6px; font-size: 19px; }
.pc-enquiry__intro { margin: 0 0 16px; color: var(--pc-muted); font-size: 14px; line-height: 1.55; }

.pc-intents { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.pc-w button.pc-intent {
	-webkit-appearance: none; appearance: none;
	padding: 8px 14px; margin: 0; min-width: 0;
	border: 1px solid var(--pc-line); border-radius: 999px;
	background: var(--pc-surface); color: var(--pc-ink);
	font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3;
	cursor: pointer; text-transform: none; letter-spacing: normal;
	transition: border-color .15s ease, background .15s ease;
}
.pc-w button.pc-intent:hover { border-color: var(--pc-accent); }
.pc-w button.pc-intent.is-on {
	border-color: var(--pc-accent);
	background: color-mix(in srgb, var(--pc-cta) 26%, #fff);
}

/* Forminator sits inside the rail, so its own margins are neutralised */
.pc-enquiry__form .forminator-ui { margin: 0 !important; }
.pc-enquiry__form .forminator-row:last-child { margin-bottom: 0 !important; }

@media (max-width: 1024px) {
	.pc-rail { position: static; }
	.pc-single__headline-side { text-align: left; }
	.pc-single__actions { justify-content: flex-start; }
}

.pc-single .pc-similar { margin-top: 48px; }

/* ============================================================
   Mobile pass

   Written after auditing every component rather than fixing the ones that
   looked wrong. Three things drive it:

   Touch targets. A 6px slideshow dot and a 32px arrow are fine for a mouse
   and awkward for a thumb. Anything tappable goes to 44px on touch devices,
   which is the size Apple and Google both recommend and roughly the width of
   an adult fingertip.

   Overflow. The listing data contains 46-character titles, references like
   1641783582065M&LBanners&splitphotos, and prices with no spaces. Any one of
   those can push a card wider than the viewport and give the whole page a
   horizontal scrollbar, which is the single most common mobile defect.

   Density. Padding and type that read well at 1200px waste half a phone
   screen. The scale steps down rather than being reused.
   ============================================================ */

/* --- Nothing may exceed the viewport ------------------------------------ */
.pc-w, .pc-w * { min-width: 0; }

.pc-card__title,
.pc-single__title,
.pc-block__title,
.pc-enquiry__title,
.pc-saved__name {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.pc-single__ref,
.pc-rail__ref { overflow-wrap: anywhere; }

/* --- Touch targets ------------------------------------------------------ */
@media (hover: none), (pointer: coarse) {
	.pc-w button.pc-shots__arrow {
		width: 44px;
		height: 44px;
		opacity: .92;
	}

	/* The dot itself stays small; the hit area around it does not. */
	.pc-w button.pc-shots__dot {
		width: 22px;
		height: 22px;
		background-color: transparent;
		box-shadow: none;
		position: relative;
	}

	.pc-w button.pc-shots__dot::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .6);
		box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
		transition: width .15s ease, background .15s ease;
	}

	.pc-w button.pc-shots__dot.is-active::after {
		width: 18px;
		border-radius: 3px;
		background: #fff;
	}

	.pc-shots__dots { gap: 0; }

	.pc-w button.pc-fav { width: 44px; height: 44px; }
	.pc-w button.pc-pager__btn { min-height: 44px; }
	.pc-w button.pc-intent { min-height: 40px; }
	.pc-w button.pc-action { min-height: 44px; }
	.pc-w button.pc-more { min-height: 44px; }
	.pc-round { width: 44px; height: 44px; }
}

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.pc-single { padding: 0 18px 44px; }
	.pc-single__gallery { margin-bottom: 24px; }

	/* A sticky rail on a one-column layout just floats a card over the text. */
	.pc-rail { position: static; }

	.pc-enquiry { border-top: 1px solid var(--pc-line); border-radius: var(--pc-radius); }
	.pc-rail__price { border-radius: var(--pc-radius) var(--pc-radius) 0 0; }
	.pc-single__layout .pc-enquiry { border-radius: 0 0 var(--pc-radius) var(--pc-radius); border-top: 0; }
}

/* --- Phone -------------------------------------------------------------- */
@media (max-width: 767px) {
	.pc-single { padding: 0 16px 36px; }

	.pc-crumb { margin: 16px 0 12px; font-size: 12.5px; gap: 6px; }

	.pc-single__headline { gap: 14px; margin-bottom: 18px; }
	.pc-single__headline-side { text-align: left; width: 100%; }
	.pc-single__actions { justify-content: flex-start; flex-wrap: wrap; }
	.pc-single__meta { gap: 10px 16px; font-size: 14px; }

	.pc-block { margin-bottom: 26px; }
	.pc-section, .pc-block { padding-top: 22px; }

	/* Read-more matters more on a phone, where a long description is most of
	   the page. Clamp harder. */
	.pc-prose { font-size: 16px; line-height: 1.7; max-width: none; }
	.pc-prose.is-clamped { max-height: 240px; }
	.pc-rail__call { font-size: 15px; padding: 13px 16px; }

	.pc-facts--boxes .pc-fact { padding: 14px; }
	.pc-facts--boxes strong { font-size: 18px; }
	.pc-facts--inline { gap: 14px; }

	/* A fixed 180px label column leaves almost nothing for the value. */
	.pc-facts--table th { width: 42%; }
	.pc-facts--table th, .pc-facts--table td { padding: 9px 8px; font-size: 14px; }

	.pc-card__body { padding: 14px; }
	.pc-card__facts { gap: 0; font-size: 13.5px; }
	.pc-card__facts li { padding: 0 10px; }
	.pc-card__facts span { font-size: 12px; }

	.pc-enquiry { padding: 18px 16px; }
	.pc-intents { gap: 6px; }
	.pc-w button.pc-intent { font-size: 12.5px; padding: 8px 12px; }

	.pc-similar__heading, .pc-carousel__heading { font-size: 21px; }
	.pc-carousel__head { gap: 12px; margin-bottom: 12px; }

	.pc-pager { gap: 4px; margin-top: 22px; }
	.pc-w button.pc-pager__btn { min-width: 40px; padding: 9px 11px; font-size: 13.5px; }

	.pc-video__play { width: 58px; height: 58px; }
	.pc-w button.pc-video__play svg { width: 24px !important; height: 24px !important; }

	.pc-chip { font-size: 12.5px; padding: 7px 12px; }
	.pc-filters__form { padding: 14px; }
	.pc-filters__actions { gap: 8px; }
	.pc-filters__count { margin-left: 0; width: 100%; }
	.pc-btn { width: 100%; justify-content: center; }
	.pc-filters__actions .pc-btn { width: auto; flex: 1 1 auto; }

	.pc-empty { padding: 30px 16px; font-size: 14px; }
	.pc-notice { padding: 18px; font-size: 14px; }

	/* Badges and tags shrink a touch so a long status like "Under offer"
	   does not span half the card image. */
	.pc-badge { font-size: 10px; padding: 4px 8px; }
	.pc-tag { font-size: 10.5px; padding: 4px 9px; }
	.pc-card__band { padding: 10px 14px; }
	.pc-w .pc-card__band .pc-card__price,
	html body .pc-w .pc-card__band .pc-card__price { font-size: 18px; letter-spacing: .026em; }
	.pc-card__ref { font-size: 11px; }
}

/* --- Small phone -------------------------------------------------------- */
@media (max-width: 400px) {
	.pc-single { padding: 0 12px 30px; }
	.pc-card__body { padding: 12px; }

	/* Four facts at this width wrap awkwardly; the separators stop helping. */
	.pc-card__facts li { padding: 0 8px; }
	.pc-card__facts li + li { border-left: 0; }

	.pc-single__actions { width: 100%; }
	.pc-w button.pc-action { flex: 1 1 auto; justify-content: center; }
}

/* --- Landscape phone ---------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
	/* A 60vh panel is unusable when the viewport is 380px tall. */
	.pc-saved__panel { max-height: 82vh; }
	.pc-prose.is-clamped { max-height: 180px; }
}

/* ============================================================
   Explorer — filters, toolbar, chips, results

   Visually quieter than the filter panel it replaces: one surface, hairline
   dividers, and colour reserved for the two things a visitor acts on — the
   search button and an active filter. Everything else is greyscale so the
   photographs carry the page.
   ============================================================ */

.pc-explorer { --pc-step: 8px; }

/* --- Filter panel ------------------------------------------------------- */

/* The panel edge, in the brand cyan like the fields inside it.
 *
 * Two cyan frames nested could easily read as heavy, so they are separated by
 * weight rather than colour: the container is the thinner of the two and
 * carries generous padding, which lets it sit behind the fields rather than
 * competing with them. */
.pc-explorer__filters {
	background: var(--pc-surface);
	border: 1px solid var(--pc-brand-cyan, #35C8F9);
	border-radius: var(--pc-radius);
	padding: calc(var(--pc-step) * 2.5);
	margin-bottom: calc(var(--pc-step) * 3);
}

/* The row.
 *
 * align-items: end rather than flex-end, plus a shared control height, so the
 * fields and the two buttons sit on one baseline. Before, the labels sat above
 * the fields but the buttons had no label, so they aligned to a different
 * bottom edge and the whole bar looked jammed together even though the gaps
 * were even. */
.pc-explorer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: calc(var(--pc-step) * 2);
	--pc-control-h: 46px;
}

.pc-explorer__row .pc-field { flex: 1 1 160px; }
.pc-explorer__row .pc-field--grow { flex: 2 1 240px; }
.pc-explorer__row .pc-field--narrow { flex: 0 1 140px; }
.pc-explorer__row .pc-field--ref { flex: 1 1 170px; }

/* One height across fields and buttons. */
.pc-explorer__row .pc-input,
.pc-explorer__row .pc-select,
.pc-w .pc-explorer__row button.pc-btn {
	height: var(--pc-control-h);
}

.pc-w .pc-explorer__row button.pc-btn {
	padding: 0 24px;
	flex: 0 0 auto;
}

/* Room for the search button to read as the end of the row. */
.pc-w .pc-explorer__row button.pc-btn--go { padding: 0 34px; letter-spacing: .05em; }

/* Reference is a short code, so it takes a narrower share than a dropdown. */
.pc-explorer__row .pc-field--ref { flex: 0 1 155px; }
.pc-explorer__row .pc-field--ref .pc-input { font-weight: 600; }

/* Search box with the icon inside rather than beside it */
.pc-search-wrap { position: relative; display: block; }
.pc-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--pc-muted); pointer-events: none; }
.pc-search-wrap .pc-input { padding-left: 38px; }

.pc-explorer__advanced {
	margin-top: calc(var(--pc-step) * 2.5);
	padding-top: calc(var(--pc-step) * 2.5);
	border-top: 1px solid color-mix(in srgb, var(--pc-brand-cyan, #35C8F9) 45%, #fff);
}

.pc-explorer__advanced[hidden] { display: none; }

.pc-explorer__features { margin: calc(var(--pc-step) * 2) 0 0; padding: 0; border: 0; }
.pc-explorer__features legend { margin-bottom: var(--pc-step); }
.pc-explorer__features { display: flex; flex-wrap: wrap; gap: var(--pc-step); }

/* "More" is a secondary action sitting next to the cyan Search.
 *
 * Two filled buttons side by side read as two equal choices, which is not
 * what they are — one opens a panel, the other runs the search. So this is an
 * outline in the navy: same size and weight, clearly subordinate, and it does
 * not put a second colour into the bar.
 *
 * Pinned, because a theme that fills every button is what made it come out as
 * a second block of cyan. */
.pc-w button.pc-explorer__toggle,
html body .pc-w button.pc-explorer__toggle {
	flex: 0 0 auto;
	gap: 8px;
	border-radius: 9px !important;
	font-weight: 700;
	letter-spacing: .04em;
	background: var(--pc-surface) !important;
	background-image: none !important;
	border: 1px solid var(--pc-accent) !important;
	color: var(--pc-accent) !important;
}

.pc-w button.pc-explorer__toggle:hover,
html body .pc-w button.pc-explorer__toggle:hover {
	background: var(--pc-accent) !important;
	color: #fff !important;
}

/* Open: filled, so it is obvious the extra filters are showing. */
.pc-w button.pc-explorer__toggle.is-on,
html body .pc-w button.pc-explorer__toggle.is-on {
	background: var(--pc-accent) !important;
	border-color: var(--pc-accent) !important;
	color: #fff !important;
}

.pc-w button.pc-explorer__toggle svg { width: 17px !important; height: 17px !important; }

/* Sidebar variant */
.pc-explorer--side { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.pc-explorer--side .pc-explorer__filters { position: sticky; top: 24px; margin-bottom: 0; }
.pc-explorer--side .pc-explorer__row { flex-direction: column; align-items: stretch; }
.pc-explorer--side .pc-explorer__row .pc-field,
.pc-explorer--side .pc-explorer__row .pc-field--grow,
.pc-explorer--side .pc-explorer__row .pc-field--narrow { flex: 1 1 auto; }
.pc-explorer--side .pc-btn { width: 100%; }
.pc-explorer--side .pc-by { grid-column: 1 / -1; }

@media (max-width: 900px) {
	.pc-explorer--side { grid-template-columns: 1fr; gap: 20px; }
	.pc-explorer--side .pc-explorer__filters { position: static; margin-bottom: 20px; }
	.pc-explorer--side .pc-explorer__row { flex-direction: row; flex-wrap: wrap; }
}

/* --- Toolbar ------------------------------------------------------------ */

.pc-explorer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--pc-step) * 2);
	flex-wrap: wrap;
	padding-bottom: calc(var(--pc-step) * 1.5);
	border-bottom: 1px solid var(--pc-line);
	margin-bottom: calc(var(--pc-step) * 2.5);
}

.pc-explorer__count { margin: 0; font-size: 15px; color: var(--pc-muted); }
.pc-explorer__count strong { color: var(--pc-ink); font-size: 17px; font-weight: 700; }

.pc-explorer__tools { display: flex; align-items: center; gap: var(--pc-step); }

/* Exempt: a select the visitor picks from rather than types into does not
   trigger the iOS zoom, so this can stay at toolbar size. */
.pc-explorer__sort .pc-select {
	border: 0;
	padding: 8px 26px 8px 10px;
	background-position: right 8px center;
	font-size: 14px;
	font-weight: 600;
	width: auto;
}

.pc-explorer__sort .pc-select:focus { outline: 2px solid var(--pc-cta); outline-offset: 1px; }

.pc-view { display: inline-flex; border: 1px solid var(--pc-line); border-radius: 8px; overflow: hidden; }

.pc-w button.pc-view__btn {
	-webkit-appearance: none;
	appearance: none;
	width: 38px;
	height: 36px;
	padding: 0;
	margin: 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--pc-surface);
	color: var(--pc-muted);
	cursor: pointer;
}

.pc-w button.pc-view__btn + .pc-view__btn { border-left: 1px solid var(--pc-line); }
.pc-w button.pc-view__btn:hover { color: var(--pc-ink); }
.pc-w button.pc-view__btn.is-on { background: var(--pc-accent); color: #fff; }
.pc-w button.pc-view__btn svg { width: 17px !important; height: 17px !important; }

/* --- Active filter chips ------------------------------------------------ */

.pc-explorer__chips { display: flex; flex-wrap: wrap; gap: var(--pc-step); margin-bottom: calc(var(--pc-step) * 2.5); }
.pc-explorer__chips[hidden] { display: none; }

.pc-w button.pc-chip-active {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px 6px 12px;
	margin: 0;
	min-width: 0;
	border: 1px solid var(--pc-line);
	border-radius: 999px;
	background: color-mix(in srgb, var(--pc-cta) 18%, #fff);
	color: var(--pc-ink);
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.pc-w button.pc-chip-active:hover { border-color: var(--pc-accent); }
.pc-chip-active__key { color: var(--pc-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.pc-chip-active__x { font-size: 17px; line-height: 1; color: var(--pc-muted); margin-left: 2px; }
.pc-w button.pc-chip-active:hover .pc-chip-active__x { color: #b3261e; }

.pc-w button.pc-chip-clear {
	-webkit-appearance: none;
	appearance: none;
	padding: 6px 12px;
	margin: 0;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--pc-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.pc-w button.pc-chip-clear:hover { color: #b3261e; }

/* --- Loading ------------------------------------------------------------ */

/* A skeleton rather than a spinner: the page keeps its shape while results
   swap, so nothing below jumps around. */
.pc-explorer.is-busy .pc-grid { opacity: .45; pointer-events: none; }

.pc-explorer.is-busy .pc-explorer__results::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--pc-accent), transparent);
	animation: pc-sweep 1s linear infinite;
}

.pc-explorer__results { position: relative; }

@keyframes pc-sweep {
	from { transform: translateX(-35%); }
	to { transform: translateX(35%); }
}

@media (prefers-reduced-motion: reduce) {
	.pc-explorer.is-busy .pc-explorer__results::before { animation: none; }
}

/* --- Attribution -------------------------------------------------------- */

.pc-by { display: flex; justify-content: flex-end; margin-top: calc(var(--pc-step) * 2.5); padding-top: var(--pc-step); }

.pc-by a {
	color: var(--pc-muted);
	font-size: 11.5px;
	letter-spacing: .04em;
	text-decoration: none;
	opacity: .8;
	transition: opacity .15s ease, color .15s ease;
}

.pc-by a:hover { opacity: 1; color: var(--pc-accent); }
.pc-by__brand { font-weight: 700; }

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
	.pc-explorer__filters { padding: 16px; margin-bottom: 18px; }
	.pc-explorer__row { gap: 12px; }
	.pc-explorer__row .pc-field,
	.pc-explorer__row .pc-field--grow,
	.pc-explorer__row .pc-field--narrow,
	.pc-explorer__row .pc-field--ref { flex: 1 1 100%; width: 100%; max-width: 100%; }

	.pc-explorer__row .pc-input,
	.pc-explorer__row .pc-select { height: 48px; font-size: 16px; }

	.pc-w .pc-explorer__row button.pc-btn { width: 100%; height: 48px; }
	.pc-explorer__filters { padding: 16px; }
	.pc-w button.pc-explorer__toggle { width: 100%; justify-content: center; }

	.pc-explorer__bar { gap: 12px; padding-bottom: 12px; margin-bottom: 16px; }
	.pc-explorer__count { width: 100%; }
	.pc-explorer__tools { width: 100%; justify-content: space-between; }
	.pc-explorer__sort .pc-select { font-size: 13.5px; }

	.pc-explorer__chips { gap: 6px; margin-bottom: 16px; }
	.pc-w button.pc-chip-active { font-size: 12px; padding: 5px 8px 5px 10px; }

	.pc-by { justify-content: center; margin-top: 20px; }
}

@media (hover: none), (pointer: coarse) {
	.pc-w button.pc-view__btn { width: 44px; height: 44px; }
	.pc-w button.pc-chip-active { min-height: 36px; }
}

/* ============================================================
   Brochure download
   ============================================================ */

.pc-dl { display: flex; flex-direction: column; gap: 10px; }
.pc-dl--inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
.pc-dl--links { gap: 6px; }

.pc-dl__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 22px;
	border: 1px solid var(--pc-line);
	border-radius: 8px;
	background: var(--pc-surface);
	color: var(--pc-ink);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}

.pc-dl__btn:hover { border-color: var(--pc-accent); color: var(--pc-ink); }
.pc-dl__btn--primary { background: var(--pc-accent); border-color: var(--pc-accent); color: #fff; }
.pc-dl__btn--primary:hover { filter: brightness(1.12); color: #fff; }
.pc-dl__btn svg { width: 17px !important; height: 17px !important; flex: 0 0 auto; }
.pc-dl__btn:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }

.pc-dl--inline .pc-dl__btn { flex: 1 1 auto; }
.pc-dl--inline .pc-dl__note { flex: 1 1 100%; }

.pc-dl--links .pc-dl__btn {
	padding: 4px 0;
	border: 0;
	background: none;
	justify-content: flex-start;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pc-dl__note { margin: 2px 0 0; font-size: 12.5px; color: var(--pc-muted); line-height: 1.5; }

@media (max-width: 600px) {
	.pc-dl--inline { flex-direction: column; align-items: stretch; }
	.pc-dl__btn { width: 100%; }
}