/* Plugin Estimator front-end styles.
   Desktop-first, like style.css. The one media query lives at the bottom of this
   file rather than in css/responsive.css so the module stays self-contained. */

.price-estimator {
	/* Drives both the step height and the current tab's arc — see below. */
	--price-estimator-step-height: 46px;

	/* The pale blue a chosen inclusion is framed in — the same blue .btn-4
	   uses in style.css, kept here so the module owns its own colour. */
	--price-estimator-selected: #DBEAFF;

	/* The shadow behind a folded ribbon corner, as on .promo-banner__tag. */
	--price-estimator-tag-fold-colour: #584B2E;

	margin: 0 0 2rem;
	font-family: var(--ph-font-body);
}

.price-estimator__title {
	font-family: var(--ph-font-heading);
	color: var(--ph-blue);
}

/* The copy above the step bar on the first stage. It shares the sand band the
   bar sits on, so the two read as one block. */

.price-estimator__intro {
	padding: 40px 0 30px;
	text-align: center;
}

.price-estimator__intro-heading {
	margin: 0;
	color: var(--ph-blue);
	font-family: var(--ph-font-display);
	font-size: 50px;
	font-weight: 400;
	line-height: 60px;
}

/* Held to a comfortable measure and centred under the heading. */
.price-estimator__intro-text {
	max-width: 670px;
	margin: 14px auto 0;
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-body);
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0.3px;
}

/* Step navigation — one segmented bar, the current stage a gold tab that laps
   over the segment after it.

   The tab's shape is the same one the section tiles use (.ph-s-wrappar
   .s-bx-bar in style.css): border-top-right-radius equal to the bar's height,
   so the arc consumes the full height and the gold tapers away to nothing at
   the right rather than reading as an ordinary rounded corner. Both come from
   --price-estimator-step-height, so they stay in step when either changes. */

.price-estimator__steps {
	display: flex;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	background: var(--ph-sand);
}

/* On the last step the current tab runs to the end of the bar, so the bar takes
   the taper too. Without it the sand behind the tab fills the arc back in and
   the bar's own corner stays square. */
.price-estimator__steps:has(.price-estimator__step:last-child.is-current) {
	border-top-right-radius: var(--price-estimator-step-height);
}

.price-estimator__step {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.625rem;
	min-height: var(--price-estimator-step-height);
	padding: 0 1.25rem;
	color: var(--ph-white);
	font-family: var(--ph-font-alt);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 10px;
}

/* Hairline between segments, drawn on the left of every segment but the first.
   The current tab covers its own divider and laps over the following one. */
.price-estimator__step + .price-estimator__step::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background: var(--ph-white);
}

.price-estimator__step.is-current::before,
.price-estimator__step.is-current + .price-estimator__step::before {
	display: none;
}

/* Steps already passed stay gold, so the bar reads as a filled trail up to the
   current tab. They keep square edges — only the current step is tapered. */
.price-estimator__step.is-complete {
	background: var(--ph-gold-light);
}

.price-estimator__step.is-current {
	z-index: 1;
	background: var(--ph-gold-light);
	border-top-right-radius: var(--price-estimator-step-height);
	/* Clear the arc so the label never runs into the taper. */
	padding-right: var(--price-estimator-step-height);
}

/* The label carries what was chosen at that stage on a second line. */
.price-estimator__step-label {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.price-estimator__step-choice {
	font-family: var(--ph-font-display);
	font-size: 0.6875rem;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
}

.price-estimator__step-choice:empty {
	display: none;
}

.price-estimator__step-number {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.6875rem;
	letter-spacing: 0;
}

/* Stages */

.price-estimator__stage-intro {
	font-family: var(--ph-font-alt);
}

.price-estimator__stage-body {
	/* margin-top: 1rem; */
}

/* Stage 1 — the design list.

   Each design is a blue name/price bar, a row of floorplan tabs and one panel
   per floorplan. The tabs themselves are the theme's .abruz-link-2 styles from
   style.css, so only the frame around them is set here. */

.price-estimator__design {
	margin-bottom: 4.5rem;
}

.price-estimator__design.is-selected .price-estimator__design-bar {
	background: var(--ph-gold-light);
}

.price-estimator__design-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9375rem 1.875rem;
	background: var(--ph-blue-mid);
	color: var(--ph-white);
	font-family: var(--ph-font-alt);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 27px;
}

/* A design can carry a dozen floorplans, so the row scrolls rather than wraps. */
.price-estimator__design-tabs {
	border-bottom: 1px solid var(--ph-blue-mid);
}

/* Beats .abruz-link-2 .nav-tabs { overflow: hidden } in style.css, which is
   enqueued after this file. */
.price-estimator__design .abruz-link-2 .nav-tabs {
	overflow-x: auto;
}

/* Space the tabs out, keeping the first one flush with the heading below it. */
.price-estimator__design .abruz-link-2 .nav-tabs li + li {
	padding-left: .5rem;
}

.abruz-link-2 .nav-tabs li .nav-link::after{right: -6px !important;}

/* Was px-5 py-4 on the element; the same figures, here so the phone can differ. */
.price-estimator__design .tab-content {
	padding: 24px 48px;
}

.price-estimator__design-summary {
	margin: 19px 0 23px;
}

/* A tall floorplan would otherwise run the column much further down than the
   specs beside it. Cap the height and let the width follow the aspect ratio —
   .img-fluid's max-width: 100% still keeps it inside the column on narrow
   screens, and the 768px medium_large source only ever scales down, so the
   plan lines stay crisp. */
.price-estimator__floorplan-image img {
	display: block;
	max-height: 460px;
	width: auto;
	margin: 0 auto;
}

/* .promo-banner__button is written for links; drop the button chrome. */
.price-estimator__select-floorplan {
	border: 0;
	cursor: pointer;
}

.house-type-rw button.form-check-label {
	cursor: pointer;
}

/* House type shares its row with PRICE and carries up to seven buttons. The
   theme gives each a fixed share of the row, which squeezed the longer labels
   onto two lines; here each is sized to its label instead, the row is shared
   out between them, and they wrap to a second line only when they must. */
.price-estimator__filters .house-type-rw {
	flex-wrap: wrap;
}

.price-estimator__filters .house-type-rw .form-check {
	flex: 1 1 auto;
	width: auto;
	margin: 0;
}

.price-estimator__filters .house-type-rw button.form-check-label {
	width: 100%;
	padding: 0 14px;
	white-space: nowrap;
}

/* The filter panel's own controls: the name search at its head and the price
   range at its foot. The bedrooms, bathrooms, garage and width between them are
   the theme's, styled from style.css. */

.price-estimator__name-search {
	position: relative;
}

.price-estimator__name-input {
	display: block;
	width: 100%;
	height: 45px;
	padding: 0 48px 0 20px;
	border: 0;
	border-radius: 0;
	background: var(--ph-white);
	color: var(--ph-blue);
	font-family: var(--ph-font-body);
	font-size: 15px;
	letter-spacing: 0.3px;
	-webkit-appearance: none;
	appearance: none;
}

.price-estimator__name-input::placeholder {
	color: var(--ph-blue-mid);
	opacity: 1;
}

.price-estimator__name-input:focus {
	outline: 2px solid var(--ph-blue-mid);
	outline-offset: -2px;
}

/* The magnifier sits inside the box, at the right, over the input's padding. */
.price-estimator__name-icon {
	position: absolute;
	top: 50%;
	right: 18px;
	color: var(--ph-blue-mid);
	transform: translateY(-50%);
	pointer-events: none;
}

/* Two native range inputs stacked on one track. The inputs themselves are
   drawn invisible and let clicks through, so only their thumbs can be taken
   hold of; the line and the filled stretch between the thumbs are drawn by the
   track and the fill underneath them. Written for both engines, since each
   needs its own thumb selector. */
.price-estimator__price-range-track {
	position: relative;
	height: 24px;
}

.price-estimator__price-range-track::before {
	content: "";
	position: absolute;
	top: 11px;
	right: 0;
	left: 0;
	height: 2px;
	background: var(--ph-white);
}

.price-estimator__price-range-fill {
	position: absolute;
	top: 11px;
	height: 2px;
	background: var(--ph-blue-mid);
}

.price-estimator__price-range-track input[type="range"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 24px;
	margin: 0;
	padding: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.price-estimator__price-range-track input[type="range"]:focus {
	outline: none;
}

.price-estimator__price-range-track input[type="range"]::-webkit-slider-runnable-track {
	height: 24px;
	background: none;
}

.price-estimator__price-range-track input[type="range"]::-moz-range-track {
	height: 24px;
	background: none;
}

.price-estimator__price-range-track input[type="range"]::-webkit-slider-thumb {
	width: 14px;
	height: 14px;
	margin-top: 5px;
	border: 0;
	border-radius: 50%;
	background: var(--ph-blue-mid);
	cursor: pointer;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}

.price-estimator__price-range-track input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: var(--ph-blue-mid);
	cursor: pointer;
	pointer-events: auto;
}

.price-estimator__price-range-track input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px var(--price-estimator-selected);
}

.price-estimator__price-range-track input[type="range"]:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px var(--price-estimator-selected);
}

/* The figure under each thumb, centred on it; the script sets `left`. */
.price-estimator__price-range-labels {
	position: relative;
	height: 18px;
	margin-top: 2px;
}

.price-estimator__price-range-label {
	position: absolute;
	top: 0;
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	white-space: nowrap;
	transform: translateX(-50%);
}

.price-estimator__price-range-label.is-at-start {
	transform: none;
}

.price-estimator__price-range-label.is-at-end {
	transform: translateX(-100%);
}

/* The phone-only controls — FILTER DESIGNS, and each design's floorplan
   dropdown with its VIEW HOUSE DIMENSIONS button — are in the markup at every
   width and shown only by the media query at the foot of this file. */
.price-estimator__filter-toggle,
.price-estimator__design-controls {
	display: none;
}

.price-estimator__no-results {
	padding: 2rem 0;
	font-family: var(--ph-font-alt);
	text-align: center;
}

/* Stage 2 — the facade grid.

   The heading sits on a sand band that stops partway down the first row of
   images, so the grid is pulled up over it. Both halves of that overlap come
   from the same pair of values — keep them in step if either changes. */

/* The band picks up where the step bar's own sand ends, so nothing sits
   between them. */
.price-estimator__stage[data-stage-slug="facade"] .price-estimator__stage-body,
.price-estimator__stage[data-stage-slug="inclusions"] .price-estimator__stage-body,
.price-estimator__stage[data-stage-slug="promotions"] .price-estimator__stage-body {
	margin-top: 0;
}

.price-estimator__facades-header {
	padding: 2.5rem 0 6rem;
	background: var(--ph-grey-bg);
}

.price-estimator__facades-title {
	margin: 0;
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-display);
	font-size: 50px;
	line-height: 1.1;
	font-weight: 400;
}

.price-estimator__facades-terms {
	margin: 0.375rem 0 0;
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.price-estimator__facades {
	margin-top: -5rem;
	padding-bottom: 0;
}

/* The whole tile is the control, so the button chrome goes. */
.price-estimator__facade {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.price-estimator__facade-image {
	display: block;
	width: 100%;
	/* The renders share a ratio; holding it keeps the rows level. */
	aspect-ratio: 5 / 3;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

.price-estimator__facade:hover .price-estimator__facade-image,
.price-estimator__facade:focus-visible .price-estimator__facade-image {
	opacity: 0.9;
}

.price-estimator__facade.is-selected .price-estimator__facade-image {
	outline: 4px solid var(--ph-gold-light);
	outline-offset: -4px;
}

.price-estimator__facade-caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 5px;
	font-family: var(--ph-font-body);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.price-estimator__facade-name {
	color: var(--ph-blue-mid);
}

.price-estimator__facade-price {
	flex: none;
	color: var(--ph-gold-light);
}

/* Stage 3 — the inclusions sub-stages.

   A row of blue tabs straddling the foot of the grey band, then three cards.
   The selected card wears a pale blue frame and a tab above it; the frame is
   always in the box model so choosing one shifts nothing. */

/* The tabs sit half on the grey and half on the white below it, so the band
   stops halfway down them rather than at their foot: one hard-stop gradient,
   with the stop taken from the tab height so the two stay in step. Percentages
   would drift with the padding above, hence the calc off the bottom edge. */
.price-estimator__inclusion-tabs-band {
	--price-estimator-inclusion-tab-height: 60px;

	/* padding-top: 80px; */
	background: linear-gradient(
		var(--ph-grey-bg) 0 calc(100% - var(--price-estimator-inclusion-tab-height) / 2),
		var(--ph-white) calc(100% - var(--price-estimator-inclusion-tab-height) / 2) 100%
	);
}

/* Four broad tabs, as drawn. */
.price-estimator__inclusion-tabs {
	display: flex;
	gap: 8px;
}

.price-estimator__inclusion-tab {
	flex: 1;
	min-height: var(--price-estimator-inclusion-tab-height);
	padding: 0.5rem 0.5rem;
	border: 0;
	background: var(--ph-blue);
	color: var(--ph-white);
	font-family: var(--ph-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease;
}

.price-estimator__inclusion-tab:hover {
	background: var(--ph-blue-mid);
}

/* Gold is reserved for the sub-stage being shown. */
.price-estimator__inclusion-tab.is-current,
.price-estimator__inclusion-tab.is-current:hover {
	background: var(--ph-gold-light);
}

.price-estimator__inclusion-panels {
	padding: 2.5rem 0 0;
}

/* The word under the tab strip when a held tab is tapped — a line of text in
   the flow, nothing that covers the page or has to be dismissed. */
.price-estimator__inclusion-notice {
	margin: 0 0 20px;
	padding: 12px 18px;
	border-left: 3px solid var(--ph-gold-light);
	background: var(--ph-white);
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-body);
	font-size: 14px;
	letter-spacing: 0.3px;
}

/* The card sits on a pale warm grey, as drawn, so it reads as a panel on the
   white page. */
.price-estimator__inclusion {
	--price-estimator-card-bg: #F7F5F3;

	position: relative;
	display: block;
	height: 100%;
	border: 6px solid transparent;
	background: var(--price-estimator-card-bg);
	cursor: pointer;
}

.price-estimator__inclusion.is-selected {
	border-color: var(--price-estimator-selected);
}

/* The tab above a chosen card. Hidden until it is the chosen one. */
.price-estimator__inclusion-selected {
	position: absolute;
	top: -1.25rem;
	left: 50%;
	z-index: 1;
	display: none;
	padding: 0.6875rem 2rem;
	transform: translateX(-50%);
	border-radius: 999px;
	background: var(--price-estimator-selected);
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.price-estimator__inclusion.is-selected .price-estimator__inclusion-selected {
	display: block;
}

/* The tiers build on each other: Premium includes Practical Inclusions, and
   Signature includes both. So the outline around a chosen card reaches back
   over the cards before it, with a "+" between each pair. Both are laid over
   the row by price-estimator.js, which measures the cards — the same code then
   serves the three-across layout and the phone's stacked one. While the
   script's outline is in place, the card's own border stands down. */
.price-estimator__inclusion-panel .row {
	position: relative;
}

.price-estimator__inclusion-panel.has-inclusion-frame .price-estimator__inclusion.is-selected {
	border-color: transparent;
}

/* `.row > *` in Bootstrap gives every child a width, padding and margin;
   these two are positioned, so all of that is taken back off. */
.price-estimator__inclusion-panel .row > .price-estimator__inclusion-frame {
	position: absolute;
	z-index: 0;
	box-sizing: border-box;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 6px solid var(--price-estimator-selected);
	pointer-events: none;
}

.price-estimator__inclusion-panel .row > .price-estimator__inclusion-frame[hidden] {
	display: none;
}

/* Stacking: the outline over the cards, the "SELECTED" tab over the outline,
   and the "+" over everything. */
.price-estimator__inclusion-panel .row > .price-estimator__inclusion-plus {
	position: absolute;
	z-index: 2;
	width: 68px;
	height: 68px;
	max-width: none;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--price-estimator-selected);
	pointer-events: none;
}

.price-estimator__inclusion-plus::before,
.price-estimator__inclusion-plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 6px;
	margin: -3px 0 0 -15px;
	border-radius: 1px;
	background: var(--ph-blue-mid);
}

.price-estimator__inclusion-plus::after {
	transform: rotate(90deg);
}
.price-estimator__floorplan-frontage.text-end{font-size:15px;}

@media (max-width: 767px) {
	.price-estimator__inclusion-panel .row > .price-estimator__inclusion-plus {
		width: 52px;
		height: 52px;
	}

	.price-estimator__inclusion-plus::before,
	.price-estimator__inclusion-plus::after {
		width: 22px;
		height: 5px;
		margin: -2.5px 0 0 -11px;
	}
}

.price-estimator__inclusion-figure {
	position: relative;
	display: block;
}

.price-estimator__inclusion-figure img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Gold pill straddling the foot of the image. */
/* "$7,500 OF VALUE FREE": the figure in the regular weight, the offer after it
   larger and heavy, as drawn. Kept to one line. */
.price-estimator__inclusion-price-strong {
	margin-left: 0.3em;
	font-size: 1.4em;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}

.price-estimator__inclusion-price {
	position: absolute;
	right: 1.75rem;
	bottom: -1.375rem;
	display: flex;
	align-items: baseline;
	max-width: calc(100% - 2rem);
	padding: 12px 26px;
	border-radius: 999px;
	background: var(--ph-gold-light);
	color: var(--ph-white);
	font-family: var(--ph-font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.price-estimator__inclusion-body {
	display: block;
	padding: 3.5rem 2rem 2.5rem;
}

/* PRACTICAL INCLUSIONS, PREMIUM, SIGNATURE — set in the display face in
   capitals, as drawn, rather than the artwork each type used to have. */
.price-estimator__inclusion-name {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-display);
	/* The design's 40px is drawn on a wider container than the site's 1320px;
	   28px is the most that keeps PRACTICAL INCLUSIONS on one line in these
	   cards. Stepped down again for the 1140px container below. */
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* The artwork comes in three different heights — Standard 25px, Select 52px,
   Signature 63px — so each name sits in a box of one height, resting on the
   bottom of it. That way every card's list starts on the same line.

   scale-down keeps each lockup at its natural size; contain would scale the
   shorter ones up to fill the box. */
img.price-estimator__inclusion-name {
	display: block;
	width: auto;
	max-width: 100%;
	height: 55px;
	/* object-fit: scale-down; */
	/* object-position: left; */
	/* margin-left:auto;
	margin-right:auto; */
}



.price-estimator__inclusion-heading {
	display: block;
	margin: 1.5rem 0 .5rem;
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-body);
	font-size: 15px;
	font-weight: 600;
}

.price-estimator__inclusion-list {
	display: block;
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* A hanging indent rather than flex: an item may carry inline formatting, and
   every tag inside a flex container would become a box of its own and break the
   sentence into columns. The dash is a fixed width, so a wrapped line starts
   under the first word either way. */
.price-estimator__inclusion-item {
	display: block;
	margin-bottom: 0.375rem;
	padding-left: 1rem;
	text-indent: -1rem;
	font-size: 15px;
}

.price-estimator__inclusion-item::before {
	content: "–";
	display: inline-block;
	width: 1rem;
	text-indent: 0;
	color: var(--ph-gold-light);
	font-weight: bold;
}

/* Stage 4 — the two promotions.

   A sand band carrying the heading, then a navy one behind the offers, with
   the pictures straddling the join. The panel over each picture is sand until
   its offer is applied, when it turns gold. */

.price-estimator__promotions-header {
	padding: 1.5rem 0 5rem;
	background: var(--ph-grey-bg);
	text-align: center;
}

.price-estimator__promotions-title {
	margin: 0;
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-display);
	font-size: 65px;
	font-weight: 400;
	line-height: 1.1;
}

.price-estimator__promotions-band:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 110px;
	background: var(--ph-grey-bg);
	z-index: 0;
}

.price-estimator__promotions-band {
	padding-bottom: 100px;
	background: var(--ph-blue);
	position: relative;
}

.price-estimator__promotions {
	margin-top: -4.5rem;
}

/* The whole offer is the control, not just the button in it. */
.price-estimator__promotion {
	height: 100%;
	cursor: pointer;
}

.price-estimator__promotion-figure {
	position: relative;
}

.price-estimator__promotion-figure img,
.price-estimator__promotion-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
}

/* Stands in until an image is chosen in the admin. */
.price-estimator__promotion-placeholder {
	background: var(--ph-grey);
}

/* The gold tag from .promo-banner__tag in style.css: rounded on its lower
   corners, with a darker triangle folded in at each side so it reads as a
   ribbon passing behind the picture's edge. Written out here rather than
   borrowing the theme class, and inset from the corner so both folds show.

   Note the theme's own :after never paints — it sets a position but no
   content — so only the left fold appears on .promo-banner__tag itself. Both
   are drawn here, which is what the comment above that rule describes. */
.price-estimator__promotion-ribbon {
	--price-estimator-tag-fold: 30px;

	position: absolute;
	top: 0;
	/* Lines up with the panel's own inset below it. */
	right: 40px;
	padding: 18px 42px 13px;
	border-radius: 0 0 30px 30px;
	background: var(--ph-gold-light);
	color: var(--ph-white);
	font-family: var(--ph-font-body);
	font-size: 0.9375rem;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* .price-estimator__promotion-ribbon::before,
.price-estimator__promotion-ribbon::after {
	content: "";
	position: absolute;
	top: 0;
	width: var(--price-estimator-tag-fold);
	height: var(--price-estimator-tag-fold);
	background: var(--price-estimator-tag-fold-colour);
}

.price-estimator__promotion-ribbon::before {
	left: calc(var(--price-estimator-tag-fold) * -1);
	clip-path: polygon(100% 0, 13px 51%, 100% 50%);
} */

/* The mirror of the fold above: 13px in from the tag's edge, other side. */
/* .price-estimator__promotion-ribbon::after {
	right: calc(var(--price-estimator-tag-fold) * -1);
	clip-path: polygon(0 0, calc(var(--price-estimator-tag-fold) - 13px) 51%, 0 50%);
} */

/* Narrower than the picture and pulled up over its foot, as drawn.

   The 40px inset replaces the 80px one this had while the offers sat in a
   full-width container: half the column width went with the move to .container,
   and keeping an 80px inset on each side left the panel too narrow for its own
   display type. The ribbon above is inset to match. */
.price-estimator__promotion-panel.one {
	position: relative;
	margin: -72px 40px 0;
	padding: 21px 24px 26px;
	background: var(--ph-grey-bg);
	color: var(--ph-blue-mid);
	text-align: center;
}

.price-estimator__promotion-panel.two {
	position: relative;
	margin: -72px 40px 0;
	padding: 43px 24px 26px;
	background: var(--ph-grey-bg);
	color: var(--ph-blue-mid);
	text-align: center;
	top: 54px;
}

.price-estimator__promotion.is-applied .price-estimator__promotion-panel {
	background: var(--ph-gold-light);
	color: var(--ph-white);
}

.price-estimator__promotion-overline,
.price-estimator__promotion-headline,
.price-estimator__promotion-subhead {
	display: block;
	font-family: var(--ph-font-display);
	font-weight: 400;
	line-height: 1;
}

.price-estimator__promotion-overline {
	/* font-size: 2.25rem; */
}
.price-estimator__promotion-overline.one{
	font-size:45px
}
.price-estimator__promotion-headline {
	/* font-size: 3.75rem; */
	font-style: italic;
}

/* The three lines below are wider than the panel at their full size once the
   offers are held to .container, so each is capped against the viewport as well
   as in px: the px is the size as drawn, the vw keeps the line inside the panel
   at every width the container steps down through. Whichever is smaller wins,
   so the drawn size is what shows on a wide screen and nothing ever spills out
   of the sand. Below 991px the panel goes full width and the media query at the
   foot of this file sets its own sizes instead.

   The coefficients come from how much width each line actually needs:
   "PREMIUM" is 4.8 times its font size, "$20K" 2.4, "OFF YOUR BUILD" 8.4. */
.price-estimator__promotion-headline.one{
	font-size: min(5.6vw, 100px);
}
.price-estimator__promotion-headline.two{
	font-size: min(11.2vw, 158px);
	font-weight: 600;
}

.price-estimator__promotion-subhead.one {
	font-size: 50px;
}
.price-estimator__promotion-subhead.two {
	font-size: min(3.2vw, 60px);
}
/* "Up to $48,000 value" — the amount carries the line, the words sit under it. */
.price-estimator__promotion-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	/* Three flex items on one line would not shrink to fit the narrower panel;
	   wrapping is what keeps "up to $48,000 value" inside it. */
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
	font-family: var(--ph-font-display);
}

.price-estimator__promotion-value-word.one {
	font-size: 30px;
}

.price-estimator__promotion-value-amount {
	/* font-size: 2.75rem; */
	line-height: 1.1;
}
.price-estimator__promotion-value-amount.one{
	font-weight: 600;
	font-size:60px;
}

/* 41rem was wider than the panel ever is now, so it capped nothing. */
.price-estimator__promotion-description {
	max-width: 520px;
  	margin: 14px auto 0;
  	font-family: var(--ph-font-body);
  	font-size: 18px;
  	line-height: 1.5;
}

/* 51px of padding either side pushed this label onto two lines in the narrower
   panel; 32px keeps it a single-line pill. */
.price-estimator__promotion-button {
	margin-top: 24px;
	padding: 11px 32px;
	border: 0;
	border-radius: 999px;
	background: var(--ph-gold-light);
	color: var(--ph-white);
	font-family: var(--ph-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease;
}

.price-estimator__promotion-button:hover {
	background: var(--ph-gold);
}

.price-estimator__promotion.is-applied .price-estimator__promotion-button {
	background: var(--ph-blue);
}

/* The button says what a click will do, then what it did. */
.price-estimator__promotion-applied {
	display: none;
	align-items: center;
	gap: 0.5rem;
}

.price-estimator__promotion.is-applied .price-estimator__promotion-add {
	display: none;
}

.price-estimator__promotion.is-applied .price-estimator__promotion-applied {
	display: inline-flex;
}

/* Stage 4 — "Your choice of add-ons".

   The two-sentence heading centred on the sand, then three offer cards on a
   navy band: picture, title, description and a gold SELECT OFFER button. The
   chosen card is framed in pale blue and its button reads "Offer selected".
   (The .price-estimator__promotion-* rules above belong to the earlier
   two-promotion layout and no longer match anything but the button's two
   labels, which are reused here.) */

.price-estimator__offers-header {
	padding: 2rem 0 3rem;
	background: var(--ph-grey-bg);
	text-align: center;
}

.price-estimator__offers-title {
	margin: 0;
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-display);
	font-size: 50px;
	font-weight: 400;
	line-height: 60px;
}

/* Room at the foot for the floating bar, so it never sits over the buttons. */
.price-estimator__offers-band {
	padding: 70px 0 150px;
	background: var(--ph-blue);
}

.price-estimator__offer {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ph-grey-bg);
	cursor: pointer;
	transition: box-shadow 0.25s ease;
}

.price-estimator__offer.is-applied {
	box-shadow: 0 0 0 6px var(--price-estimator-selected);
}

.price-estimator__offer-figure img,
.price-estimator__offer-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Stands in until an image is chosen in the admin. */
.price-estimator__offer-placeholder {
	background: var(--ph-grey);
}

/* The button is pushed to the foot, so the three line up whatever the length
   of each description. */
.price-estimator__offer-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: 36px 28px 40px;
	text-align: center;
}

.price-estimator__offer-title {
	margin: 0 0 24px;
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-display);
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.15;
	text-transform: uppercase;
}

.price-estimator__offer-description {
	margin: 0 0 30px;
	color: var(--ph-blue-mid);
	font-family: var(--ph-font-body);
	font-size: 15px;
	line-height: 1.45;
}

.price-estimator__offer-description strong {
	font-weight: 700;
}

.price-estimator__offer-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 12px 32px;
	border: 0;
	border-radius: 999px;
	background: var(--ph-gold-light);
	color: var(--ph-white);
	font-family: var(--ph-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease;
}

.price-estimator__offer-button:hover {
	background: var(--ph-gold);
}

.price-estimator__offer.is-applied .price-estimator__offer-button {
	background: var(--ph-blue-mid);
}

@media (max-width: 1399px) {
	.price-estimator__offer-title {
		font-size: 25px;
	}
}

@media (max-width: 991px) {
	.price-estimator__offers-title {
		font-size: 30px;
		line-height:40px;
	}

	.price-estimator__offers-band {
		padding: 40px 0 150px;
	}

	.price-estimator__offer-title {
		font-size: 22px;
	}

	.price-estimator__offer-body {
		padding: 28px 20px 32px;
	}
}

/* Stage 6 — the checkboxes on the download form.

   Rings rather than the browser's square boxes. `appearance: none` strips the
   native control back to nothing, which is what leaves the border and radius
   below free to draw the circle.

   Scoped to the stage, so every checkbox the contact form puts there is covered
   however it is laid out, and the same form used elsewhere on the site keeps
   its native controls. Note `.price-estimator` on its own would not do:
   WordPress puts the page slug on <body>, so it matches the whole page. */
.price-estimator__stage[data-stage-slug="download-estimate"] .wpcf7-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	/* Holds its size in the flex row the label becomes on a phone. */
	flex: 0 0 18px;
	margin: 0 8px 0 0;
	padding: 0;
	border: 1px solid var(--ph-blue-mid);
	border-radius: 50%;
	background: transparent;
	vertical-align: text-bottom;
	cursor: pointer;
}

/* Checked is a filled dot, with the ring still showing around it. */
.price-estimator__stage[data-stage-slug="download-estimate"] .wpcf7-checkbox input[type="checkbox"]:checked {
	background: var(--ph-blue-mid);
	box-shadow: inset 0 0 0 3px var(--ph-white);
}

.price-estimator__stage[data-stage-slug="download-estimate"] .wpcf7-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ph-blue-mid);
	outline-offset: 2px;
}

/* The floating bar — the running total, the breakdown, and the stage controls.

   It rests a tenth of the way up the screen. The script raises it from there
   once the footer scrolls into view, so it never covers the footer; `bottom` is
   the one property it writes. */

.price-estimator__bar {
	position: fixed;
	right: 0;
	bottom: 10vh;
	left: 0;
	/* Above the theme's own z-999 sections, so neither the bar nor the panel
	   opening over the page can be painted behind them. */
	z-index: 1000;
	background: var(--ph-gold-light);
	color: var(--ph-white);
	font-family: var(--ph-font-body);
}

/* Back on its own at the left, then the total, the breakdown and Next together
   at the right. The row is packed to the right and Back pushed away from it, so
   that on the first stage — where Back is hidden and takes no space — the group
   stays where it is rather than sliding across the bar. */
.price-estimator__bar-inner {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: 80px;
}

/* BACK and YOUR SELECTIONS, together at the left. margin-right: auto pushes the
   total and NEXT over to the right. */
.price-estimator__bar-start {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-right: auto;
}

.price-estimator__bar-total {
	display: flex;
	align-items: baseline;
	gap: 36px;
}

.price-estimator__bar-label {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	opacity: 0.85;
}

.price-estimator__bar-amount {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
}

/* Breakdown: a pill on the bar, its panel hanging underneath. */

.price-estimator__breakdown {
	position: relative;
}

/* YOUR SELECTIONS — an outlined white pill, the same height as BACK. */
.price-estimator__breakdown-toggle {
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 22px;
	border: 1.5px solid var(--ph-white);
	border-radius: 999px;
	background: none;
	color: var(--ph-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease;
}

.price-estimator__breakdown-toggle:hover,
.price-estimator__breakdown-toggle[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.15);
}

/* Hangs below the pill as drawn. The script adds is-above when the bar is too
   close to the foot of the screen for the panel to fit under it. */
.price-estimator__breakdown-panel {
	position: absolute;
	top: calc(100% + 0px);
	left: 0;
	min-width: 360px;
	padding: 20px 24px 15px;
	background: #dab678;
	border-radius:10px 10px 0 0;
}

.price-estimator__breakdown.is-above .price-estimator__breakdown-panel {
	top: auto;
	bottom: calc(100% + 15px);
}

.price-estimator__breakdown-title {
	display: block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.3px;
	text-transform: uppercase;
}

.price-estimator__breakdown-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 8px;
	font-size: 13px;
	letter-spacing: 0.65px;
	text-transform: uppercase;
}

/* Stands in for the rows until a floorplan is chosen. */
.price-estimator__breakdown-empty {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.65px;
}

.price-estimator__breakdown-amount {
	flex: none;
	font-weight: 700;
}

/* Stage controls */

/* BACK is a white pill with navy lettering, NEXT a blue one with white — each
   with a long arrow, as drawn. */
.price-estimator__back,
.price-estimator__next {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, opacity 0.25s ease;
}

.price-estimator__back {
	background: var(--ph-white);
	color: var(--ph-blue-mid);
}

.price-estimator__back:hover {
	background: var(--price-estimator-selected);
}

.price-estimator__next {
	background: var(--ph-blue-mid);
	color: var(--ph-white);
}

.price-estimator__next:hover {
	background: var(--ph-blue);
}

/* NEXT while the stage on screen still needs a choice. */
.price-estimator__next:disabled,
.price-estimator__next:disabled:hover {
	background: var(--ph-blue-mid);
	opacity: 0.45;
	cursor: not-allowed;
}

.price-estimator__bar-arrow {
	flex: none;
}

.price-estimator__result:empty {
	display: none;
}

.abruz-link-2.price-estimator__design-tabs{
	padding:0px 0px;
}

.price-estimator__design.floor-plan{
	border:2px solid var(--ph-blue-mid)
}
.steps-bg{
	margin-bottom: -16px;
}
.promo-banner__button.price-estimator__select-floorplan{
	padding: 16px 42px;
}
.d-estimate{
	margin-bottom:30px;
}
.price-estimator{
	margin-bottom:70px;
}
.price-estimator .wp-block-paragraph{
	display:none;
}

.d-estimate-f{
	padding:40px 0px 150px;
}

.price-estimator .h-iner-sec-2{
	padding: 190px 0px 44px;
}

select.txt-b-2{
	font-family:var(--ph-font-body);
	color:var(--ph-blue-mid) !important
}

/* Bootstrap's container steps down to 1140px here, and the inclusion cards
   with it. */
@media (max-width: 1399px) {
	.price-estimator__inclusion-name {
		font-size: 23px;
	}

	.price-estimator__inclusion-price {
		right: 1rem;
		padding: 10px 18px;
		font-size: 12px;
		letter-spacing: 0.05em;
	}
}

/* Five segments will not fit on a phone, so the bar scrolls sideways and the
   current tab is scrolled into view by the script. */
@media (max-width: 991px) {
	/* The step bar shows the current stage alone, as a single gold tab centred
	   on the sand, rather than five segments squeezed onto a phone. */
	.price-estimator__steps {
		justify-content: center;
		margin: 0 0 24px;
		background: none;
	}

	.price-estimator__steps:has(.price-estimator__step:last-child.is-current) {
		border-top-right-radius: 0;
	}

	.price-estimator__step {
		display: none;
	}

	.price-estimator__step.is-current {
		display: flex;
		flex: 0 0 auto;
		padding-left: 24px;
	}

	.price-estimator__stage-intro {
		text-align: center;
	}

	/* The filter panel is folded away behind FILTER DESIGNS — a navy pill,
	   centred — until it is tapped. Open, it shows every field, including the
	   ones the theme's .d-mob-none keeps off a phone elsewhere. */
	.price-estimator__filter-toggle {
		display: block;
		margin: 0 auto;
		padding: 12px 32px;
		border: 0;
		border-radius: 999px;
		background: var(--ph-blue-mid);
		color: var(--ph-white);
		font-family: var(--ph-font-body);
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 1.3px;
		text-transform: uppercase;
		cursor: pointer;
	}

	.price-estimator__filters {
		display: none;
		margin-top: 20px;
	}

	.price-estimator__filters.is-open {
		display: block;
	}

	.price-estimator__filters.is-open .d-mob-none {
		display: block;
	}

	/* The two storey buttons share the row equally, as drawn — the theme sizes
	   .house-type-rw buttons for a row of eight. */
	.price-estimator__filters .house-type-rw .form-check {
		flex: 1;
		width: auto;
		margin: 0;
	}

	/* Each design is a card: the navy bar for its roof, a white body with
	   rounded lower corners, and the pieces of a floorplan pane restacked into
	   one column — dropdown and dimensions button, icons, the dimensions when
	   asked for, the drawing, then SELECT THIS FLOORPLAN at the foot. */
	.price-estimator__design {
		margin-bottom: 24px;
		border: 1px solid var(--ph-blue-pale);
		/* border-radius: 14px; */
		background: var(--ph-white);
	}

	.price-estimator__design-bar {
		padding: 14px 20px;
		font-size: 20px;
	}

	/* The tab row is replaced by the dropdown below it. */
	.price-estimator__design-tabs {
		display: none;
	}

	.price-estimator__design-controls {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 20px 20px 0;
	}

	/* The floorplan dropdown: a pale blue pill, the theme's own arrow.

	   A select sizes itself to its widest option, and a design with a named
	   plan ("30 Home Office") would take most of the row and push the button
	   beside it off the card. So it is held to a fixed width, as drawn: a
	   number shows in full, a longer name is cut short with an ellipsis and
	   read in full on opening. */
	.price-estimator__floorplan-select {
		flex: none;
		width: 92px;
		height: 44px;
		padding: 0 30px 0 18px;
		border: 0;
		border-radius: 999px;
		background: var(--price-estimator-selected) url(../../../images/down-arrow-3.png) no-repeat right 14px center;
		background-size: 12px;
		color: var(--ph-blue);
		font-family: var(--ph-font-body);
		font-size: 15px;
		font-weight: 500;
		text-overflow: ellipsis;
		-webkit-appearance: none;
		appearance: none;
	}

	.price-estimator__dimensions-toggle {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 44px;
		padding: 0 12px;
		border: 1px solid var(--ph-blue-mid);
		border-radius: 999px;
		background: none;
		color: var(--ph-blue-mid);
		font-family: var(--ph-font-body);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 1px;
		text-transform: uppercase;
		white-space: nowrap;
		cursor: pointer;
	}

	.price-estimator__dimensions-toggle svg {
		flex: none;
		width: 10px;
	}

	.price-estimator__dimensions-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.price-estimator__design .tab-content {
		padding: 0 20px 24px;
	}

	/* Flatten the two desktop columns so their contents can be put in one
	   order: display: contents lifts what is inside them up into the pane's
	   flex row, where `order` below arranges it. */
	.price-estimator__floorplan {
		flex-direction: column;
	}

	.price-estimator__floorplan-details,
	.price-estimator__floorplan-drawing {
		display: contents;
	}

	/* The design's name is on the bar and the floorplan's in the dropdown. */
	.price-estimator__floorplan-title {
		display: none;
	}

	.price-estimator__design-summary {
		order: 1;
		margin: 20px 13px 0;
	}

	.price-estimator__design-summary li span {
		font-size: 15px;
	}

	/* The dimensions stay folded until VIEW HOUSE DIMENSIONS is tapped. Written
	   under .price-estimator__design to outrank Bootstrap's .row, which is
	   loaded after this file and would otherwise keep them on display. */
	.price-estimator__design .price-estimator__floorplan-specs {
		display: none;
		order: 2;
		margin-top: 20px;
		/* Set in a touch from the icons above, as drawn. */
		padding: 0px 45px 0px 25px;
	}

	.price-estimator__design.is-showing-dimensions .price-estimator__floorplan-specs {
		display: flex;
	}

	.price-estimator__floorplan-specs .ul-8 li {
		margin-bottom: 8px;
	}

	.price-estimator__floorplan-image {
		order: 3;
		margin-top: 24px;
	}

	.price-estimator__floorplan-frontage {
		order: 4;
	}

	/* A gold pill across the foot of the card. */
	.price-estimator__select-floorplan {
		order: 5;
		display: block;
		width: 100%;
		margin-top: 24px;
		padding: 14px 20px;
		border-radius: 999px;
		text-align: center;
	}

	/* A single column of facades, so the band only needs to reach the first one. */
	.price-estimator__facades-header {
		padding: 1.5rem 0 3rem;
	}

	.price-estimator__facades-title {
		font-size: 30px;
	}

	.price-estimator__facades {
		margin-top: -2rem;
	}

	/* Seven tabs will not sit on one line on a phone, so they wrap two up. */
	.price-estimator__inclusion-tabs-band {
		padding-top: 10px;
	}

	.price-estimator__inclusion-tabs {
		flex-wrap: wrap;
	}

	/* Half the row less half the 8px gap, so two sit side by side. */
	.price-estimator__inclusion-tab {
		flex: 1 0 calc(50% - 4px);
	}

	.price-estimator__inclusion-panels {
		padding-top: 2rem;
	}

	/* The most that keeps PRACTICAL INCLUSIONS on one line on a 375px phone. */
	.price-estimator__inclusion-name {
		font-size: 21px;
	}

	.price-estimator__inclusion-price {
		right: 1rem;
		padding: 10px 12px;
		font-size: 11px;
	}

	/* Four tabs go two up on a phone. */
	.price-estimator__inclusion-tab {
		font-size: 14px;
	}

	/* The bar is tight on a phone: the label goes, and the total sits dead
	   centre with Back and Next at the edges. Three grid columns, the outer
	   two equal, put it there — and keep it there on the first stage, where
	   Back is hidden: its column stays, empty, rather than the total sliding
	   left the way it would in a flex row with one item fewer. */
	/* On a phone the four pieces will not share one line: the total sits
	   centred on a line of its own, with BACK, YOUR SELECTIONS and NEXT in a
	   row beneath it. */
	.price-estimator__bar-inner {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"total total"
			"start next";
		gap: 6px 10px;
		min-height: 0;
		padding-top: 10px;
		padding-bottom: 12px;
	}

	.price-estimator__bar-start {
		grid-area: start;
		gap: 8px;
		margin-right: 0;
	}

	.price-estimator__bar-total {
		grid-area: total;
		justify-self: center;
		gap: 14px;
	}

	.price-estimator__next {
		grid-area: next;
		justify-self: end;
	}

	.price-estimator__bar-label {
		font-size: 13px;
	}

	.price-estimator__bar-amount {
		font-size: 18px;
	}

	.price-estimator__breakdown-toggle {
		height: 40px;
		padding: 0 14px;
		font-size: 13px;
		letter-spacing: 1px;
		white-space: nowrap;
	}

	.price-estimator__breakdown-panel {
		min-width: 354px; left: -49px;
		background: #dab678;
		padding: 20px 24px 15px;
	}

	/* Room is too tight for every label: BACK is its arrow alone in a round
	   white button, while NEXT keeps its word — the one control a visitor has
	   to find. */
	.price-estimator__back {
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		gap: 0;
		font-size: 0;
		letter-spacing: 0;
	}

	.price-estimator__next {
		height: 40px;
		padding: 0 16px;
		gap: 8px;
		font-size: 14px;
		letter-spacing: 1px;
		white-space: nowrap;
	}

	/* One promotion per row, so the panel only needs a small inset. */
	.price-estimator__promotions-header {
		padding: 1rem 0 6rem;
	}

	.price-estimator__promotions-title {
		font-size: 2rem;
	}

	.price-estimator__promotion-panel.one, .price-estimator__promotion-panel.two {
		margin: -3rem 1rem 0;
		padding: 2rem 1.25rem 2.5rem;
	}

	/* Matching the theme's own smaller tag below 767px. */
	.price-estimator__promotion-ribbon {
		--price-estimator-tag-fold: 26px;

		right: 2rem;
		padding: 22px 34px 20px;
		font-size: 0.8125rem;
	}

	.price-estimator__promotion-headline.one {
		font-size: 2.75rem;
	}

	.price-estimator__promotion-overline.one,
	.price-estimator__promotion-subhead.one {
		font-size: 1.75rem;
	}
	.price-estimator__promotion-value-amount.one{
		font-size:30px;
	}
	.price-estimator__promotion-value-word.one{
		font-size:18px;
	}
	.price-estimator__promotion-description{
		font-size:15px;
	}
	.price-estimator__promotion-headline.two{
		font-size:75px;
	}
	.price-estimator__promotion-subhead.two{
		font-size:25px;
	}
	.price-estimator .h-iner-sec-2{
		padding:0px 0px 30px
	}
	.promo-banner__button.price-estimator__select-floorplan{
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	#wpcf7-f4044-p3976-o1 .d-flex, #wpcf7-f4044-p3976-o1 .join-our-mailing{display:block !important;}
	.price-estimator__inclusion-tab{min-height: 40px;}
	.price-estimator__filters .house-type-rw button.form-check-label, .price-estimator__name-input {font-size:13px;}
	.price-estimator__floorplan-frontage.text-end{text-align:center !important; font-size: 15px;}
	.price-estimator__breakdown.is-above .price-estimator__breakdown-panel{bottom: calc(100% + 40px); left: 0; right: 0; background: #dab678; border-radius: 10px 10px 0 0; padding: 20px 24px 15px;}
}

/* Phones: the inclusion cards (stage 3) and the offers (stage 4) become a
   sideways slider, one card at a time with the next one peeking in at the
   right edge of the screen. A native scroll-snap row — swipe, and it settles
   on a card. The row runs out to the screen edge on the right (past the
   container's 12px padding) so the peek reaches the edge; the first card
   still lines up with the container on the left. Room above and below for
   the SELECTED tab, the outline and the offer's 6px ring, which the
   scrolling row would otherwise clip. */
@media (max-width: 767px) {
	.price-estimator__inclusion-panel .row,
	.price-estimator__offers-band .row {
		flex-wrap: nowrap;
		margin-right: -12px;
		padding-bottom: 10px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.price-estimator__inclusion-panel .row::-webkit-scrollbar,
	.price-estimator__offers-band .row::-webkit-scrollbar {
		display: none;
	}

	/* The SELECTED tab stands 20px above its card. */
	.price-estimator__inclusion-panel .row {
		padding-top: 12px;
	}

	.price-estimator__inclusion-panel .row > .col,
	.price-estimator__offers-band .row > .col {
		flex: 0 0 86%;
		width: 86%;
		max-width: 86%;
		scroll-snap-align: start;
	}

	/* The last card snaps flush with the container's right edge. */
	.price-estimator__inclusion-panel .row > .col:last-of-type,
	.price-estimator__offers-band .row > .col:last-of-type {
		padding-right: 12px;
		flex-basis: calc(86% + 12px - var(--bs-gutter-x) * 0.5);
		width: calc(86% + 12px - var(--bs-gutter-x) * 0.5);
		max-width: none;
		scroll-snap-align: end;
	}
	.price-estimator__inclusion-panels{padding: 2.5rem 0 2.5rem;}
	.price-estimator__intro-heading{font-size:30px; line-height:40px;}
	.promo-banner__button.price-estimator__select-floorplan{padding: 16px 35px;}
	.price-estimator__inclusion-body{padding: 3rem 0.66rem 2rem;}
	.d-estimate-f{padding: 40px 0px 50px;}
}

/* Phones: the YOUR SELECTIONS breakdown panel, centred on the bar.
   The panel is absolutely positioned, and .price-estimator__breakdown (the
   wrapper round the YOUR SELECTIONS pill) was its positioned parent — so
   left/right 0 meant the pill's edges, and min-width 354px ran it off the
   right of the screen. With the wrapper static, the panel is placed against
   the bar itself: 12px in from each side (in line with BACK and NEXT),
   sitting right on top of the bar. */
@media (max-width: 767px) {
	.price-estimator__breakdown {
		position: static;
	}

	.price-estimator__breakdown-panel,
	.price-estimator__breakdown.is-above .price-estimator__breakdown-panel {
		left: 12px;
		right: 12px;
		min-width: 0;
	}

	.price-estimator__breakdown.is-above .price-estimator__breakdown-panel {
		bottom: 100%;
	}
}