/* ==========================================================================
   Sunny View — page components (Home sections, site plan, carousels).
   Class names = the Elementor global-class labels editors pick (sv-*).
   All sizes in design px of the 2560 canvas via var(--u).
   ========================================================================== */

/* --- Section rhythm & spacing utilities ------------------------------------
   Container classes get a boosted selector inside Elementor so they beat the
   atomic base styles (.elementor .e-flexbox-base { padding:10px; flex-direction: row }). */
.sv-section,
.elementor .elementor-element.sv-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 0;
}
.sv-pt-s, .elementor .elementor-element.sv-pt-s { padding-top: max(32px, calc(63 * var(--u))); }
.sv-pt-m, .elementor .elementor-element.sv-pt-m { padding-top: max(48px, calc(155 * var(--u))); }
.sv-pt-l, .elementor .elementor-element.sv-pt-l { padding-top: max(64px, calc(206 * var(--u))); }
/* The Home intro: its two lines centred between the hero and the gallery (Figma: 365 px band). */
.sv-py-c, .elementor .elementor-element.sv-py-c { padding-block: max(40px, calc(134.5 * var(--u))); }
.sv-pb-s, .elementor .elementor-element.sv-pb-s { padding-bottom: max(32px, calc(63 * var(--u))); }
.sv-pb-m, .elementor .elementor-element.sv-pb-m { padding-bottom: max(48px, calc(155 * var(--u))); }
.sv-pb-l, .elementor .elementor-element.sv-pb-l { padding-bottom: max(64px, calc(206 * var(--u))); }
.sv-gap-s, .elementor .elementor-element.sv-gap-s { gap: max(16px, calc(24 * var(--u))); }
.sv-gap-m, .elementor .elementor-element.sv-gap-m { gap: max(20px, calc(48 * var(--u))); }

/* Intro statement: centred text, bolded "|" separators in terracotta. */
.sv-statement {
	width: var(--sv-container);
	margin-inline: auto;
	font-size: var(--sv-fs-text);
	line-height: var(--sv-lh-text);
	font-weight: 400;
	text-align: center;
	color: #1C2247; /* Figma: this text is #1C2247, not the navy. */
}
.sv-statement strong,
.sv-statement b {
	font-weight: 600;
	color: #C46040; /* Figma: the "|" separators. */
}

/* Centred body text (e.g. "Къщите в Sunny View…"), bold = 600 navy. */
.sv-text-center {
	width: var(--sv-container);
	margin-inline: auto;
	font-size: var(--sv-fs-text);
	line-height: var(--sv-lh-text);
	text-align: center;
	color: #1C2247; /* Figma */
}
.sv-text-center strong { font-weight: 600; }

/* Navy band (e.g. under a carousel): white title + text, centred. */
.sv-band-navy,
.elementor .elementor-element.sv-band-navy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: max(20px, calc(48 * var(--u)));
	padding: max(48px, calc(155 * var(--u))) 0; /* the text centred in the band (agency 07.10) */
	background: var(--sv-navy);
	color: var(--sv-white);
	text-align: center;
}
.sv-band-navy :is(h1, h2, h3, .sv-title) {
	width: var(--sv-container);
	margin: 0 auto;
	font-size: var(--sv-fs-title);
	font-weight: 500;
	line-height: var(--sv-lh-title);
	text-transform: uppercase;
	color: var(--sv-white);
}
.sv-band-navy p {
	width: var(--sv-container);
	margin-inline: auto;
	font-size: var(--sv-fs-text);
	line-height: var(--sv-lh-text);
	color: var(--sv-white);
}

/* Full-width wrapper for widgets (no padding, no flex row). */
.sv-full,
.elementor .elementor-element.sv-full {
	display: block;
	width: 100%;
	padding: 0;
}

/* --- Hero slider ----------------------------------------------------------- */
.sv-hero {
	position: relative;
	height: max(420px, calc(1253 * var(--u)));
	overflow: hidden;
	background: var(--sv-navy);
	color: var(--sv-white);
}
/* Phones: lower, so the 16:9 video loses less at the sides (agency 07.10): 312 px at 390 instead of 420. */
@media (max-width: 767px) {
	.sv-hero { height: min(420px, max(300px, 80vw)); }
}
.sv-hero__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.sv-hero__track::-webkit-scrollbar { display: none; }
.sv-hero__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
/* Selectors are boosted to beat Elementor's `.elementor img { height: auto }`. */
.sv-hero__media,
.sv-hero .sv-hero__media img,
.sv-hero .sv-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* The video covers its first-frame image once it plays. */
.sv-hero .sv-hero__media video { opacity: 0; transition: opacity .5s var(--sv-ease); }
.sv-hero .sv-hero__media video.is-playing { opacity: 1; }
/* A slide with a title: a soft navy shade from the top, so the white title holds on a bright sky (agency 30.10). */
.sv-hero__slide--titled .sv-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(8 21 58 / .5) 0%, rgb(8 21 58 / .3) 20%, rgb(8 21 58 / 0) 42%);
	pointer-events: none;
}
.sv-hero__title {
	position: absolute;
	left: 50%;
	top: max(44px, calc(155 * var(--u)));
	transform: translateX(-50%);
	width: min(calc(100% - 40px), 1900px);
	margin: 0;
	font-size: var(--sv-fs-hero);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: .009em;
	text-align: center;
	text-transform: uppercase;
	color: var(--sv-white);
}
.sv-hero__title strong { font-weight: 600; }
/* Figma: one line, 1:1 line height. Figma starts it at x = 934.8 of 2560 (128 right of centre, and elsewhere in
   each video slide); centred on the owner's word (08.10). */
@media (min-width: 1024px) {
	.sv-hero__title {
		width: auto;
		line-height: 1;
		white-space: nowrap;
	}
}

.sv-hero__dots {
	position: absolute;
	left: 50%;
	bottom: max(12px, calc(18 * var(--u)));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: max(8px, calc(12 * var(--u)));
	margin: 0;
	padding: 0;
	list-style: none;
}
.sv-hero__dot {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: max(28px, calc(56 * var(--u)));
	height: 16px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.sv-hero__dot::before {
	content: "";
	display: block;
	height: max(3px, calc(4 * var(--u)));
	border-radius: 2px;
	background: rgb(255 255 255 / .5);
	transition: background-color .3s var(--sv-ease), height .3s var(--sv-ease), width .3s var(--sv-ease);
}
.sv-hero__dot[aria-current="true"]::before {
	height: max(4px, calc(6 * var(--u)));
	width: calc(100% + max(2px, calc(5 * var(--u))));
	background: var(--sv-white);
}

/* --- Carousel (3 visible, arrows, optional navy band at the bottom) -------- */
/* Figma (type pages, Home "Къщите"): cards 649 × 711, 20 apart, 1987 wide; the arrow glyphs 68 (left) and
   50 (right) from the cards. The Home lifestyle gallery is drawn differently: .sv-carousel-lifestyle. */
.sv-carousel {
	--sv-car-inner: 1987;
	--sv-car-gap: max(10px, calc(20 * var(--u)));
	--sv-car-ratio: 649 / 711;
	--sv-car-per: 3;
	--sv-car-arrow-w: max(20px, calc(30 * var(--u)));
	--sv-car-arrow-off: max(14px, calc(68 * var(--u)));
	--sv-car-arrow-off-next: max(14px, calc(50 * var(--u)));
	--sv-car-shift: 9.5; /* Figma: these cards sit 9.5 right of centre (296–2283) */
	position: relative;
}
.sv-carousel-lifestyle .sv-carousel {
	--sv-car-inner: 1990;
	--sv-car-gap: max(10px, calc(16 * var(--u)));
	--sv-car-ratio: 652.67 / 711;
	--sv-car-arrow-off: max(14px, calc(29 * var(--u)));
	--sv-car-arrow-off-next: max(14px, calc(24 * var(--u)));
	--sv-car-shift: 0;
}
.sv-carousel--band {
	background: linear-gradient(to bottom, transparent var(--sv-band-start, 75%), var(--sv-navy) var(--sv-band-start, 75%));
}
.sv-carousel__inner {
	position: relative;
	left: calc(var(--sv-car-shift) * var(--u));
	width: min(calc(100% - 2 * (var(--sv-car-arrow-w) + var(--sv-car-arrow-off) + 12px)), calc(var(--sv-car-inner) * var(--u)), calc(var(--sv-car-inner) * 1px));
	margin-inline: auto;
}
.sv-carousel__track {
	display: flex;
	gap: var(--sv-car-gap);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	list-style: none;
}
.sv-carousel__track::-webkit-scrollbar { display: none; }
.sv-carousel__item {
	position: relative;
	flex: 0 0 calc((100% - (var(--sv-car-per) - 1) * var(--sv-car-gap)) / var(--sv-car-per));
	aspect-ratio: var(--sv-car-ratio);
	margin: 0;
	overflow: hidden;
	scroll-snap-align: start;
	background: #e9eaee;
}
.sv-carousel .sv-carousel__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--sv-ease);
}
@media (hover: hover) {
	.sv-carousel .sv-carousel__item:hover img { transform: scale(1.12); }
}
.sv-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: calc(var(--sv-car-arrow-w) + 16px);
	height: max(56px, calc(80 * var(--u)));
	padding: 0 8px;
	border: 0;
	background: transparent;
	color: var(--sv-navy);
	cursor: pointer;
	transform: translateY(-50%);
	transition: color .2s var(--sv-ease), opacity .2s;
}
.sv-carousel__arrow .sv-icon { width: var(--sv-car-arrow-w); height: auto; }
.sv-carousel__arrow:hover { color: var(--sv-terracotta); }
.sv-carousel__arrow[disabled] { opacity: .25; cursor: default; }
.sv-carousel__arrow--prev { right: calc(100% + var(--sv-car-arrow-off) - 8px); }
.sv-carousel__arrow--next { left: calc(100% + var(--sv-car-arrow-off-next) - 8px); }

@media (max-width: 1023px) {
	.sv-carousel { --sv-car-per: 2; }
}
@media (max-width: 599px) {
	.sv-carousel { --sv-car-per: 1.15; }
	.sv-carousel__inner { width: calc(100% - 40px); }
	.sv-carousel__arrow { display: none; }
}
.sv-carousel__link { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.sv-carousel__link:focus-visible { outline: 3px solid var(--sv-terracotta); outline-offset: -3px; }

/* --- Lightbox (Figma "gallery home page open IMG": navy 95%, photo centred, X top right, arrows on the sides) */
/* Three slides (previous, current, next) on a track that the script moves: the photos slide, and a swipe or a mouse
   drag carries the photo with it. Zoom (agency 31.10): click / double tap, the zoom button, pinch, wheel; drag to pan. */
html.sv-lightbox-open { overflow: hidden; }
.sv-lightbox {
	--sv-lb-gap: 24px; /* between the slides; GAP in lightbox.js */
	--sv-lb-top: max(10px, calc(98 * var(--u)));
	--sv-lb-right: max(10px, calc(120 * var(--u)));
	--sv-lb-btn: max(48px, calc(65 * var(--u)));
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: rgb(8 21 58 / .95);
	color: var(--sv-white);
	overscroll-behavior: contain;
	/* Every gesture goes to the script: swipe, pinch, double tap, pan (the page itself must not zoom or scroll). */
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.sv-lightbox::backdrop { background: transparent; }
/* Opening and closing (owner 31.10): the dark layer fades in while the photo grows from the thumbnail that was
   clicked (--sv-lb-from-*: its centre on the screen, set by the script); closing, it shrinks back towards its
   thumbnail and fades. The track's `scale` is separate from its `transform` (the sliding), so they never clash. */
.sv-lightbox { opacity: 0; transition: opacity .22s ease-in; }
.sv-lightbox.is-in { opacity: 1; transition: opacity .3s ease-out; }
@media (prefers-reduced-motion: no-preference) {
	.sv-lightbox__track { scale: .88; transition: scale .22s ease-in; }
	.sv-lightbox.is-in .sv-lightbox__track { scale: 1; transition: scale .45s cubic-bezier(.2, .75, .3, 1); }
	.sv-lightbox.is-in .sv-lightbox__track.is-moving { transition: scale .45s cubic-bezier(.2, .75, .3, 1), transform .42s cubic-bezier(.2, .75, .3, 1); }
	.sv-lightbox__img.is-zooming { transition: opacity .25s var(--sv-ease), transform .32s cubic-bezier(.2, .75, .3, 1); }
}
.sv-lightbox__track {
	position: absolute;
	inset: 0;
	transform-origin: var(--sv-lb-from-x, 50%) var(--sv-lb-from-y, 50%);
}
.sv-lightbox__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: max(64px, calc(91 * var(--u))) max(72px, calc(325 * var(--u)));
	transform: translateX(calc(var(--sv-lb-pos, 0) * (100% + var(--sv-lb-gap))));
}
.sv-lightbox__img {
	display: block;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transition: opacity .25s var(--sv-ease);
	cursor: zoom-in;
	-webkit-user-drag: none;
}
.sv-lightbox__img.is-loaded { opacity: 1; }
.sv-lightbox.is-zoomed .sv-lightbox__img { cursor: grab; }
/* Zoomed in, the photo runs under the buttons: a soft shadow keeps them readable on its light parts. */
.sv-lightbox.is-zoomed :is(.sv-lightbox__close, .sv-lightbox__zoom, .sv-lightbox__arrow) { filter: drop-shadow(0 0 4px rgb(8 21 58 / .6)); }
.sv-lightbox.is-panning .sv-lightbox__img { cursor: grabbing; }
.sv-lightbox__close,
.sv-lightbox__zoom,
.sv-lightbox__arrow {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sv-white);
	cursor: pointer;
	transition: color .2s var(--sv-ease);
}
.sv-lightbox__close:hover,
.sv-lightbox__zoom:hover,
.sv-lightbox__arrow:hover { color: var(--sv-terracotta); }
.sv-lightbox__close:focus-visible,
.sv-lightbox__zoom:focus-visible,
.sv-lightbox__arrow:focus-visible { outline: 2px solid var(--sv-terracotta); outline-offset: 2px; }
.sv-lightbox__close,
.sv-lightbox__zoom {
	top: var(--sv-lb-top);
	right: var(--sv-lb-right);
	width: var(--sv-lb-btn);
	height: var(--sv-lb-btn);
}
.sv-lightbox__close .sv-icon { width: max(24px, calc(38 * var(--u))); height: auto; }
/* Left of the X; its icon says what a press does (zoom in, or back out). */
.sv-lightbox__zoom { right: calc(var(--sv-lb-right) + var(--sv-lb-btn)); }
.sv-lightbox__zoom .sv-icon { width: max(24px, calc(38 * var(--u))); height: auto; }
.sv-lightbox__zoom[aria-pressed="false"] .sv-icon + .sv-icon,
.sv-lightbox__zoom[aria-pressed="true"] .sv-icon:first-child { display: none; }
.sv-lightbox__arrow {
	top: 50%;
	width: max(48px, calc(62 * var(--u)));
	height: max(72px, calc(86 * var(--u)));
	transform: translateY(-50%);
}
.sv-lightbox__arrow .sv-icon { width: max(18px, calc(30 * var(--u))); height: auto; }
.sv-lightbox__arrow--prev { left: max(10px, calc(195 * var(--u))); }
.sv-lightbox__arrow--next { right: max(10px, calc(195 * var(--u))); }
.sv-lightbox__arrow[hidden] { display: none; }
@media (max-width: 599px) {
	.sv-lightbox__slide { padding: 72px 0; }
	.sv-lightbox__arrow { top: auto; bottom: 8px; transform: none; }
}
/* Phones (agency 07.10): smaller arrows; turned sideways, the photo fills the screen between them. */
@media (max-width: 599px), (max-height: 500px) and (orientation: landscape) {
	.sv-lightbox { --sv-lb-btn: 40px; }
	.sv-lightbox__arrow { width: 40px; height: 56px; }
	.sv-lightbox__arrow .sv-icon { width: 14px; }
	.sv-lightbox__close .sv-icon,
	.sv-lightbox__zoom .sv-icon { width: 20px; }
}
@media (max-height: 500px) and (orientation: landscape) {
	.sv-lightbox { --sv-lb-top: 2px; --sv-lb-right: 2px; }
	.sv-lightbox__slide { padding: 6px 44px; }
	.sv-lightbox__arrow--prev { left: 2px; }
	.sv-lightbox__arrow--next { right: 2px; }
}

/* --- Site plan (hotspots) -------------------------------------------------- */
.sv-plan {
	position: relative;
	width: min(100%, calc(2354 * var(--u)));
	margin-inline: auto;
}
.sv-plan__canvas {
	position: relative;
	aspect-ratio: var(--sv-plan-ratio, 2266 / 695);
}
.sv-plan__hint,
.sv-plan__card-close { display: none; }
.sv-plan .sv-plan__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Clickable house outlines (SVG, % of the image → responsive). */
.sv-plan .sv-plan__areas {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.sv-plan__area { cursor: pointer; outline: none; }
/* The polygon is the (invisible) hit area. A transparent fill still receives pointer events. */
.sv-plan__area polygon {
	fill: rgb(190 99 70 / 0);
	stroke: none;
}
/* Outlines on (site settings, for testing / mapping): every house outlined, the active one filled. */
.sv-plan--outlines .sv-plan__area polygon {
	fill: rgb(190 99 70 / .06);
	stroke: rgb(190 99 70 / .55);
	stroke-width: 1px;
	stroke-linejoin: miter; /* round joins render X-shaped artefacts in Chrome */
	transition: fill .2s var(--sv-ease), stroke .2s var(--sv-ease);
}
.sv-plan--outlines .sv-plan__area:hover polygon,
.sv-plan--outlines .sv-plan__area:focus-visible polygon,
.sv-plan--outlines .sv-plan__area.is-active polygon,
.sv-plan--outlines .sv-plan__area.is-current polygon {
	fill: rgb(190 99 70 / .22);
	stroke: var(--sv-terracotta);
	stroke-width: 2px;
}
.sv-plan--outlines .sv-plan__area.is-sold:hover polygon,
.sv-plan--outlines .sv-plan__area.is-sold.is-active polygon { fill: rgb(8 21 58 / .18); stroke: var(--sv-navy); }

/* Home (agency 09.10): the houses text sits halfway between the navy band and the drawing's top (the plan
   image has ~8 % white above the drawing): 35 up, and as much more room below, so the plan stays put. */
.sv-section:has(.sv-plan--hover) > .sv-text-center { margin-block: calc(-35 * var(--u)) calc(35 * var(--u)); }

/* Number badge above each house (Figma: 82 px terracotta circle, number 36/600 white). */
.sv-plan__badge {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 3;
	display: grid;
	place-items: center;
	width: max(26px, calc(64 * var(--u)));
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--sv-terracotta);
	box-shadow: 0 0 0 max(3px, calc(6 * var(--u))) rgb(190 99 70 / .3);
	color: var(--sv-white);
	font-size: max(12px, calc(28 * var(--u)));
	font-weight: 600;
	line-height: 1;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.6);
	transition: opacity .2s var(--sv-ease), transform .2s var(--sv-ease);
}
.sv-plan__badge.is-sold { background: var(--sv-navy); box-shadow: 0 0 0 max(3px, calc(6 * var(--u))) rgb(8 21 58 / .25); }
.sv-plan__badge.is-active,
.sv-plan__badge.is-current,
.sv-plan--numbered .sv-plan__badge {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
/* Type pages (Figma): navy 56 × 53 markers, the number 24 / 600, whatever the status. */
.sv-plan--numbered .sv-plan__badge {
	width: max(20px, calc(56 * var(--u)));
	aspect-ratio: 56 / 53;
	background: var(--sv-navy);
	box-shadow: none;
	font-size: max(10px, calc(24 * var(--u)));
	letter-spacing: .04em;
}
.sv-plan--numbered .sv-plan__badge.is-dim { opacity: .35; background: var(--sv-navy); box-shadow: none; }
/* Agency 09.10: the marker shows the house card like the house does, opens it on click, and turns terracotta. */
.sv-plan--numbered .sv-plan__badge:not(.is-dim) { pointer-events: auto; cursor: pointer; transition: background-color .2s var(--sv-ease); }
.sv-plan.sv-plan--numbered .sv-plan__badge.is-active { background: var(--sv-terracotta); } /* also over the touch rule */

/* Card sits in the empty lower-right corner of the plan, clear of the drawing (agency 07.10). Figma: its
   text starts at 71.9 % / 67.5 % of the plan (the card's own padding, 18 / 14, is taken off); text only, no
   background (owner 08.10: a background caught the drawing); title, line, then the status and the specs as one
   block of 28.8 lines; no link (the house itself is the link; the phone sheet has one). */
.sv-plan__card {
	position: absolute;
	left: calc(71.88% - max(12px, calc(18 * var(--u))));
	top: calc(70.91% - max(10px, calc(14 * var(--u)))); /* Figma 67.45 %; agency 09.10: as much space above as on the left */
	z-index: 4;
	width: min(24%, 560px);
	min-width: 220px;
	padding: max(10px, calc(14 * var(--u))) max(12px, calc(18 * var(--u)));
	color: var(--sv-navy);
}
.sv-plan__card[hidden] { display: none; }
.sv-plan__card-title {
	margin: 0;
	padding-bottom: max(10px, calc(15.6 * var(--u)));
	font-size: max(17px, calc(30 * var(--u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: linear-gradient(var(--sv-terracotta), var(--sv-terracotta)) left bottom / max(64px, calc(112 * var(--u))) max(3px, calc(4 * var(--u))) no-repeat;
}
.sv-plan__card-status {
	margin: max(8px, calc(15.5 * var(--u))) 0 0;
	font-size: max(14px, calc(24 * var(--u)));
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sv-terracotta);
}
.sv-plan__card-specs {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: max(14px, calc(24 * var(--u)));
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .05em;
}
.sv-plan__card-link {
	display: none;
	margin-top: max(12px, calc(18 * var(--u)));
	font-size: var(--sv-fs-nav);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sv-terracotta);
	text-decoration: none;
}
.sv-plan__card-link:hover { color: var(--sv-navy); }

/* Touch screens have no hover: every house shows its number, so it is clear what can be tapped.
   Default terracotta, the tapped house navy (Figma: marker terracotta, navy on hover). */
@media (hover: none) {
	.sv-plan--hover .sv-plan__badge {
		width: 20px;
		font-size: 10px;
		box-shadow: 0 0 0 3px rgb(190 99 70 / .3);
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	.sv-plan .sv-plan__badge.is-active {
		z-index: 4;
		background: var(--sv-navy);
		box-shadow: 0 0 0 3px var(--sv-white), 0 4px 12px rgb(8 21 58 / .35);
		transform: translate(-50%, -50%) scale(1.3);
	}
}

/* Phones: the whole plan would make each house ~8 px wide, so it stays 1000 px wide,
   runs edge to edge and scrolls sideways (JS starts it centred). */
@media (max-width: 767px) {
	.sv-plan__scroller {
		margin-inline: calc(50% - 50vw + var(--sv-scrollbar, 0px) / 2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.sv-plan__scroller::-webkit-scrollbar { display: none; }
	.sv-plan__canvas { width: 1000px; }
	.sv-plan__hint {
		position: absolute;
		top: 12px;
		left: 50%;
		z-index: 5;
		display: flex;
		align-items: center;
		gap: 10px;
		width: max-content;
		margin: 0;
		padding: 9px 16px;
		border-radius: 999px;
		background: rgb(8 21 58 / .85);
		box-shadow: 0 6px 18px rgb(8 21 58 / .25);
		color: var(--sv-white);
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: .08em;
		text-transform: uppercase;
		white-space: nowrap;
		pointer-events: none;
		transform: translateX(-50%);
		transition: opacity .3s var(--sv-ease), visibility 0s .3s;
	}
	.sv-plan__hint-icon {
		flex: none;
		width: 6px;
		height: auto;
		color: var(--sv-terracotta);
		animation: sv-nudge-left 1.6s var(--sv-ease) infinite;
	}
	.sv-plan__hint-icon:last-child { animation-name: sv-nudge-right; }
	.sv-plan.is-touched .sv-plan__hint { opacity: 0; visibility: hidden; }
}
@keyframes sv-nudge-left { 50% { transform: translateX(-3px); } }
@keyframes sv-nudge-right { 50% { transform: translateX(3px); } }

/* Below the desktop layout the card is a bottom sheet: always in view, no layout shift. */
@media (max-width: 1099px) {
	.sv-plan__card {
		position: fixed;
		inset: auto 0 0;
		z-index: 95;
		width: auto;
		min-width: 0;
		max-width: 480px;
		margin-inline: auto;
		padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
		border-radius: 16px 16px 0 0;
		background: var(--sv-white);
		box-shadow: 0 -12px 40px rgb(8 21 58 / .2);
		animation: sv-sheet-in .3s var(--sv-ease);
	}
	.sv-plan__card-title { padding-right: 44px; }
	.sv-plan__card-close {
		position: absolute;
		top: 10px;
		right: 10px;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--sv-navy);
		cursor: pointer;
	}
	.sv-plan__card-close svg { width: 20px; height: 20px; }
	.sv-plan__card-link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		margin-top: 20px;
		background: var(--sv-terracotta);
		color: var(--sv-white);
		font-size: 13px;
	}
	.sv-plan__card-link:hover,
	.sv-plan__card-link:focus-visible { background: var(--sv-terracotta-dark); color: var(--sv-white); }
}
@keyframes sv-sheet-in { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
	.sv-plan__card,
	.sv-plan__hint-icon { animation: none; }
}


/* --- Contact page (Figma `contact` 252:3132) ------------------------------- */
.sv-contact { padding: max(32px, calc(62 * var(--u))) 0 max(48px, calc(85 * var(--u))); }
.sv-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 1081fr) minmax(0, 624fr);
	gap: 48px max(32px, calc(287 * var(--u)));
	width: var(--sv-container);
	margin-inline: auto;
}
.sv-contact__title {
	margin: 0 0 max(24px, calc(32 * var(--u)));
	font-size: var(--sv-fs-title);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .05em;
	text-align: center;
	text-transform: uppercase;
	color: var(--sv-terracotta);
}
/* Figma: the text box (624) is a little wider than its frame (605) and reaches into the margin. */
.sv-contact__info { margin-right: calc(-24 * var(--u)); padding-top: calc(108 * var(--u)); }
.sv-contact__label {
	display: inline-block;
	margin: 0;
	padding-bottom: max(8px, calc(14 * var(--u)));
	border-bottom: 3px solid var(--sv-terracotta);
	font-size: var(--sv-fs-subtitle);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .05em;
	text-transform: uppercase;
}
/* Figma: the values have no letter-spacing (only the labels do) and a 48 px line. */
.sv-contact__value {
	margin: max(12px, calc(22 * var(--u))) 0 max(32px, calc(52 * var(--u)));
	font-size: var(--sv-fs-subtitle);
	line-height: var(--sv-lh-text);
	overflow-wrap: anywhere;
}
.sv-contact__value:last-child { margin-bottom: 0; }
.sv-contact__value a { text-decoration: none; }
.sv-contact__value a:hover { color: var(--sv-terracotta); }
@media (max-width: 899px) {
	.sv-contact__inner { grid-template-columns: minmax(0, 1fr); }
	.sv-contact__info { padding-top: 0; }
}

/* --- Forms (Contact Form 7 with our markup; its own CSS is not loaded) ------ */
.sv-form {
	--sv-field-h: max(48px, calc(70 * var(--u)));
	--sv-field-gap: max(14px, calc(31 * var(--u)));
	--sv-field-grey: #8C8C8C;
	--sv-error: #B3261E;
	display: grid;
	gap: var(--sv-field-gap);
}
.sv-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: max(14px, calc(33 * var(--u))); }
.sv-form__field,
.sv-form__submit { margin: 0; }
.sv-form .wpcf7-form-control-wrap { position: relative; display: block; }
.sv-form input[type="text"],
.sv-form input[type="email"],
.sv-form input[type="tel"],
.sv-form select,
.sv-form textarea {
	display: block;
	width: 100%;
	height: var(--sv-field-h);
	padding: 0 max(14px, calc(23 * var(--u)));
	border: 1px solid var(--sv-terracotta);
	border-radius: 0;
	background: var(--sv-white);
	color: var(--sv-navy);
	font: inherit;
	font-size: max(16px, calc(21 * var(--u)));
	letter-spacing: .05em;
	appearance: none;
	transition: box-shadow .2s var(--sv-ease), border-color .2s var(--sv-ease);
}
.sv-form textarea {
	height: max(140px, calc(219 * var(--u)));
	padding-block: max(12px, calc(23 * var(--u)));
	line-height: 1.4;
	resize: vertical;
}
.sv-form ::placeholder { color: var(--sv-field-grey); font-weight: 300; opacity: 1; }
/* "Къща (по избор)": a chevron, and the placeholder colour while no house is chosen. */
.sv-form select {
	padding-right: max(40px, calc(64 * var(--u)));
	background: var(--sv-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23BE6346' stroke-width='2'/%3E%3C/svg%3E") no-repeat right max(14px, calc(23 * var(--u))) center / max(14px, calc(20 * var(--u))) auto;
	cursor: pointer;
}
.sv-form select:has(option[value=""]:checked) { color: var(--sv-field-grey); font-weight: 300; }
.sv-form select option { color: var(--sv-navy); font-weight: 400; }
.sv-form input:focus-visible,
.sv-form select:focus-visible,
.sv-form textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(190 99 70 / .3); }
.sv-form .wpcf7-submit {
	width: 100%;
	min-height: max(48px, calc(66 * var(--u)));
	font-size: max(15px, calc(21 * var(--u)));
}
.sv-form.submitting .wpcf7-submit { opacity: .6; cursor: progress; }
.sv-form .wpcf7-spinner { display: none; }

.sv-form__consent {
	font-size: max(13px, calc(18 * var(--u)));
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: .05em;
	color: var(--sv-field-grey);
}
.sv-form__consent .wpcf7-list-item { display: block; margin: 0; }
.sv-form__consent label { display: inline-flex; align-items: center; gap: max(12px, calc(22 * var(--u))); cursor: pointer; }
.sv-form__consent input[type="checkbox"] {
	--sv-box: max(22px, calc(29 * var(--u)));
	display: grid;
	place-content: center;
	flex: none;
	width: var(--sv-box);
	height: var(--sv-box);
	margin: 0;
	border: 1px solid var(--sv-terracotta);
	background: var(--sv-white);
	appearance: none;
	cursor: pointer;
}
/* The tick: sized from the box (a % would resolve against the content-sized grid track, i.e. 0). */
.sv-form__consent input[type="checkbox"]::before {
	content: "";
	width: calc(var(--sv-box) * .6);
	height: calc(var(--sv-box) * .6);
	background: var(--sv-terracotta);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
	transform: scale(0);
	transition: transform .15s var(--sv-ease);
}
.sv-form__consent input[type="checkbox"]:checked::before { transform: scale(1); }
.sv-form__consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--sv-terracotta); outline-offset: 2px; }

/* Validation and the response message. */
.sv-form .wpcf7-not-valid { border-color: var(--sv-error); }
.sv-form .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: max(13px, calc(18 * var(--u))); color: var(--sv-error); }
.sv-form .wpcf7-response-output {
	margin: 0;
	padding: max(10px, calc(16 * var(--u))) max(14px, calc(23 * var(--u)));
	border: 1px solid currentColor;
	font-size: max(14px, calc(20 * var(--u)));
	color: var(--sv-navy);
}
.sv-form.init .wpcf7-response-output,
.sv-form.resetting .wpcf7-response-output,
.sv-form.submitting .wpcf7-response-output { display: none; }
.sv-form.invalid .wpcf7-response-output,
.sv-form.unaccepted .wpcf7-response-output,
.sv-form.spam .wpcf7-response-output,
.sv-form.failed .wpcf7-response-output,
.sv-form.aborted .wpcf7-response-output { color: var(--sv-error); }
.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
.wpcf7 .hidden-fields-container { display: none; }
@media (max-width: 599px) {
	.sv-form__row { grid-template-columns: minmax(0, 1fr); gap: var(--sv-field-gap); }
}

/* --- Google map: the image first, the interactive map on request ----------- */
.sv-map {
	position: relative;
	/* The Figma proportion (2560 × 1054), at least 360 px tall on phones (no aspect-ratio: with a
	   min-height it would widen the section and scroll the page sideways). */
	height: max(360px, calc(100vw * 1054 / 2560));
	overflow: hidden;
	background: #E8EAED;
}
.sv-map__img,
.sv-map__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.sv-map__overlay {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	justify-items: center;
	gap: max(10px, calc(16 * var(--u)));
	width: max-content;
	max-width: calc(100% - 32px);
	padding: max(18px, calc(32 * var(--u))) max(20px, calc(44 * var(--u)));
	background: rgb(8 21 58 / .9);
	color: var(--sv-white);
	text-align: center;
	transform: translate(-50%, -50%);
}
.sv-map__load { white-space: normal; }
.sv-map__note { margin: 0; font-size: var(--sv-fs-small); font-weight: 300; }
.sv-map.is-loaded .sv-map__overlay { display: none; }
@media (max-width: 599px) {
	/* Keep the pin visible: the button sits at the bottom on phones. */
	.sv-map__overlay { top: auto; bottom: 16px; transform: translateX(-50%); }
}

/* The contact page is where the side tab leads; the Figma contact frame has none. */
.page-template-page-contact .sv-sidetab { display: none; }

/* --- Carousel: navy band behind the top (type pages) ----------------------- */
.sv-carousel--band-top {
	background: linear-gradient(to bottom, var(--sv-navy) var(--sv-band-start, 25%), transparent var(--sv-band-start, 25%));
}

/* --- House types: Къщи listing and type pages (Figma `houses base`, `houses A…S`) */
/* Figma: the type cards start 84 below the header on a type page, 77 on the listing. */
.sv-type { padding-top: max(24px, calc(84 * var(--u))); }
.sv-type--listing { padding-top: max(24px, calc(77 * var(--u))); padding-bottom: max(48px, calc(128 * var(--u))); }
/* A type without plans (S until its new drawings come, agency 09.10) ends like the listing, not on the footer. */
.sv-type:not(.sv-type--listing):not(:has(.sv-type__plans)) { padding-bottom: max(48px, calc(128 * var(--u))); }

/* The six type cards. */
.sv-types {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: max(10px, calc(20 * var(--u)));
	width: var(--sv-container);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.sv-types__item { margin: 0; transition: opacity .25s var(--sv-ease); }
.sv-types--has-current .sv-types__item:not(.is-current) { opacity: .5; }
.sv-types--has-current .sv-types__item:not(.is-current):hover,
.sv-types--has-current .sv-types__item:not(.is-current):focus-within { opacity: 1; }
.sv-types__link {
	position: relative;
	display: block;
	aspect-ratio: 649 / 482;
	overflow: hidden;
	background: var(--sv-navy);
	color: var(--sv-white);
	text-decoration: none;
}
.sv-types__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 45%, rgb(8 21 58 / .85));
}
.sv-types .sv-types__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--sv-ease);
}
@media (hover: hover) {
	.sv-types__link:hover .sv-types__img { transform: scale(1.06); }
}
.sv-types__link:focus-visible { outline: 3px solid var(--sv-terracotta); outline-offset: 3px; }
.sv-types__link:hover,
.sv-types__link:focus,
.sv-types__link:active { color: var(--sv-white); } /* agency 09.10: "Къщи" and the numbers stay white */
.sv-types__label {
	position: absolute;
	right: max(12px, calc(19 * var(--u)));
	bottom: max(8px, calc(10 * var(--u)));
	left: max(12px, calc(19 * var(--u)));
	z-index: 1;
	display: grid;
	justify-items: end;
	font-size: max(13px, calc(25.5 * var(--u)));
	line-height: 1.88;
	text-align: right;
}
/* Agency 09.10: the numbers 24 instead of Figma's 25.5, so type A's sixteen fit one line on Macs too (they had
   no room to spare); a wrapped second line sits 1.3 apart, the first keeps its place. */
.sv-types__numbers {
	font-size: max(12px, calc(24 * var(--u)));
	line-height: 1.3;
	padding-block: .35em;
}
.sv-types__title {
	text-transform: uppercase;
	background: linear-gradient(var(--sv-terracotta), var(--sv-terracotta)) right bottom / max(48px, calc(90 * var(--u))) 2px no-repeat;
}
@media (max-width: 1023px) {
	.sv-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.sv-types { grid-template-columns: minmax(0, 1fr); }
}
/* Phones and tablets: on a type page the cards are a swipeable strip, not 3–6 rows above the content. */
@media (max-width: 1023px) {
	.sv-types--has-current {
		grid-template-columns: none;
		grid-auto-columns: 42%;
		grid-auto-flow: column;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.sv-types--has-current::-webkit-scrollbar { display: none; }
	.sv-types--has-current .sv-types__item { scroll-snap-align: center; }
}
@media (max-width: 599px) {
	.sv-types--has-current { grid-auto-columns: 72%; }
}

/* The plan (numbered mode) and the "Къщи 1 | 2 | …" panel in the card's place (R-52). */
.sv-type__plan { margin-top: max(40px, calc(115 * var(--u))); }
.sv-plan__panel {
	position: absolute;
	left: 75%;
	top: 55%;
	z-index: 3;
	width: max(220px, calc(442 * var(--u))); /* Figma: the numbers wrap after 10 for type A */
	color: var(--sv-navy);
	font-size: max(16px, calc(32 * var(--u)));
	line-height: 1.25;
}
.sv-plan__card:not([hidden]) + .sv-plan__panel { visibility: hidden; }
/* Type pages (Figma `houses A`): the panel sits in the empty lower-right corner (72.1 % / 69.25 %); the
   house card opens from the same place. Only this type's numbers are shown. */
@media (min-width: 1100px) {
	.sv-plan--numbered .sv-plan__panel,
	.sv-plan--numbered .sv-plan__card { top: 69.25%; bottom: auto; left: 72.09%; }
	/* One line per spec, as in Figma (the corner is wider than the text); on small laptops Home keeps the
	   card's last line clear of the gallery below. A line longer than the corner (since 15.10 type A's garage, "…(не са
	   включени в цената)", and the "РЗП" areas) wraps at the plan's right edge instead of running off the page. */
	.sv-plan__card { white-space: nowrap; width: max-content; max-width: calc(28.12% + 2 * max(12px, calc(18 * var(--u)))); }
	.sv-plan__card-specs li { white-space: normal; }
	/* Room under the plan for the tallest card (type A since 15.10/20.10: yard, "РЗП", a garage line that wraps), so it
	   stays at least 16 clear of the gallery below: 24–30 from 1440 up, more on small laptops (the text has a floor). */
	.sv-plan--hover { margin-bottom: max(24px, calc(30 * var(--u))); }
	@media (max-width: 1439px) {
		.sv-plan--hover { margin-bottom: calc((1440px - 100vw) * .3 + 24px); }
	}
	/* The type's specs are in the band right below: the card names the house and its status, and stays above the band. */
	.sv-plan--numbered .sv-plan__card-specs { display: none; }
}
.sv-plan--numbered .sv-plan__badge.is-dim { display: none; }
.sv-plan__panel-title {
	margin: 0 0 max(14px, calc(28 * var(--u)));
	padding-bottom: max(8px, calc(12 * var(--u)));
	text-transform: uppercase;
	background: linear-gradient(var(--sv-terracotta), var(--sv-terracotta)) left bottom / max(64px, calc(116 * var(--u))) max(3px, calc(5 * var(--u))) no-repeat;
}
.sv-plan__panel-numbers { margin: 0; }
@media (max-width: 1099px) {
	.sv-plan__panel {
		position: static;
		width: auto;
		margin: 16px var(--sv-gutter) 0;
	}
	.sv-plan__card:not([hidden]) + .sv-plan__panel { visibility: visible; }
}

/* "Характеристики" on the navy band (one block per variant). */
.sv-type__specs {
	margin-top: max(40px, calc(103 * var(--u)));
	padding: max(48px, calc(101 * var(--u))) 0 max(40px, calc(99 * var(--u)));
	background: var(--sv-navy);
	color: var(--sv-white);
}
/* The design widths (1509 / 560 per column on the 2560 canvas) get floors, or tablets squeeze the 16 px text. */
.sv-specs { width: min(var(--sv-container), max(calc(1509 * var(--u)), 760px)); margin: 0 auto; }
.sv-specs + .sv-specs { margin-top: max(40px, calc(70 * var(--u))); }
.sv-type__suffix { color: var(--sv-terracotta); } /* Figma S: "къщи 23, 31, 39" in the titles */
/* "Направете оглед" under the last variant (not in Figma; agency 21.10). */
.sv-specs__cta { margin: max(28px, calc(56 * var(--u))) 0 0; }
.sv-specs__title,
.sv-layout__title {
	margin: 0 0 max(28px, calc(56 * var(--u)));
	font-size: max(24px, calc(48 * var(--u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.sv-specs__cols {
	display: grid;
	grid-template-columns: 259fr 472fr 626fr;
	column-gap: max(24px, calc(72 * var(--u)));
}
.sv-specs__col,
.sv-layout__rooms {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--sv-fs-text);
	line-height: var(--sv-lh-text);
}
/* Figma: the shorter columns are centred against the tallest; a second line closes them 31 below the text
   (one-variant types). S (several variants) keeps that space but hides the line. */
.sv-specs__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: max(14px, calc(25 * var(--u)));
	border-top: max(3px, calc(5 * var(--u))) solid var(--sv-terracotta);
}
.sv-specs__col {
	padding-bottom: max(14px, calc(31 * var(--u)));
	border-bottom: max(3px, calc(5 * var(--u))) solid transparent;
}
.sv-specs:only-child .sv-specs__col { border-bottom-color: var(--sv-terracotta); }
.sv-specs__col:nth-child(3) { letter-spacing: .0234em; } /* Figma: 0.775 at 33 (A, B, D, E, S) */
@media (max-width: 767px) {
	/* Stacked, the next column's top line is the separator: one closing line at the end only. */
	.sv-specs__cols { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	.sv-specs__col { padding-bottom: 24px; border-bottom-width: 0; }
	.sv-specs:only-child .sv-specs__col:last-child { border-bottom-width: 3px; }
}
/* Figma, every type: the lines are 259 / 472 / 626 long and 73 apart; a longer text stays on one line and runs
   past its line (B: "Подземен гараж с четири паркоместа"), and the block is centred with that text (B: 32 left).
   From 1440 up, where the text scales with the canvas. */
@media (min-width: 1440px) {
	.sv-specs { width: fit-content; max-width: var(--sv-container); }
	/* A text longer than its column (the plot ranges since 15.10: "Площ на парцела: 918–1 081 кв.м.", the "РЗП" areas
	   since 20.10) widens it, so the next column keeps its 73 gap; when the three no longer fit the container, the
	   last column (type A's garage "…(не са включени в цената)") wraps instead of running over. */
	.sv-specs__cols { grid-template-columns: minmax(calc(259 * var(--u)), max-content) minmax(calc(545 * var(--u)), max-content) minmax(0, max-content); column-gap: 0; }
	.sv-specs__col:nth-child(3) { white-space: normal; }
	.sv-specs__col {
		--sv-line: 259;
		min-width: calc(var(--sv-line) * var(--u));
		white-space: nowrap;
		border-width: 0;
		padding-top: calc(25 * var(--u) + max(3px, calc(5 * var(--u))));
		padding-bottom: calc(31 * var(--u) + max(3px, calc(5 * var(--u))));
		background: linear-gradient(var(--sv-terracotta), var(--sv-terracotta)) left top / calc(var(--sv-line) * var(--u)) max(3px, calc(5 * var(--u))) no-repeat;
	}
	.sv-specs__col:nth-child(2) { --sv-line: 472; margin-left: calc(73 * var(--u)); }
	.sv-specs__col:nth-child(3) { --sv-line: 626; margin-left: calc(73 * var(--u)); }
	.sv-specs:only-child .sv-specs__col {
		background:
			linear-gradient(var(--sv-terracotta), var(--sv-terracotta)) left top / calc(var(--sv-line) * var(--u)) max(3px, calc(5 * var(--u))) no-repeat,
			linear-gradient(var(--sv-terracotta), var(--sv-terracotta)) left bottom / calc(var(--sv-line) * var(--u)) max(3px, calc(5 * var(--u))) no-repeat;
	}
}

/* The photo carousel: the navy band continues behind its top quarter. */
.sv-type__gallery { margin: 0; }

/* "Разпределение" (one block per variant). */
/* Figma: the block is 1609 wide for three floors and 1240 for two, centred; columns 100 apart. */
.sv-layout {
	--sv-layout-w: 1609;
	width: min(var(--sv-container), max(calc(var(--sv-layout-w) * var(--u)), calc(var(--sv-cols, 3) * 300px)));
	margin: max(48px, calc(98 * var(--u))) auto 0;
	color: var(--sv-navy);
}
.sv-layout--1 { --sv-cols: 1; }
.sv-layout--2 { --sv-cols: 2; --sv-layout-w: 1240; }
.sv-layout--3 { --sv-cols: 3; }
.sv-layout--2 .sv-layout__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Figma C / E / S: equal */
.sv-layout + .sv-layout { margin-top: max(40px, calc(70 * var(--u))); }
/* Figma sizes the columns to their text (A: 397 / 550 / 459): auto tracks share the block that way. */
.sv-layout__cols {
	display: grid;
	grid-template-columns: repeat(var(--sv-cols, 3), auto);
	column-gap: max(24px, calc(100 * var(--u)));
}
.sv-layout__col {
	padding-top: max(14px, calc(29 * var(--u)));
	border-top: max(3px, calc(5 * var(--u))) solid var(--sv-terracotta);
}
.sv-layout__floor {
	margin: 0 0 max(8px, calc(16 * var(--u)));
	font-size: var(--sv-fs-subtitle);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--sv-terracotta);
}
@media (max-width: 767px) {
	.sv-layout__cols,
	.sv-layout--2 .sv-layout__cols { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } /* one under the other, two floors too (client 14.10) */
}
/* Figma, every type: each floor's column (its name and rooms) has its own letter-spacing: the garage 0.58, the first
   floor 1.71, the second 0.03 at 33. */
.sv-layout__col:nth-child(1) { letter-spacing: .0176em; }
.sv-layout__col:nth-child(2),
.sv-layout--2 .sv-layout__col:nth-child(1) { letter-spacing: .0518em; }
.sv-layout__col:nth-child(3),
.sv-layout--2 .sv-layout__col:nth-child(2) { letter-spacing: .001em; }
.sv-layout__col .sv-layout__floor { letter-spacing: inherit; }
/* Figma, every type: the same lines, 397 / 550 / 459 long at 0 / 496 / 1150 (two floors: 550 / 459 at 0 / 654);
   a longer room line runs past its line, and the block is centred with the last column's text (B: 24 left,
   C / E / S: 65 left). From 1440 up, as the specs. */
@media (min-width: 1440px) {
	.sv-layout { width: fit-content; max-width: var(--sv-container); }
	/* A room line longer than its column (English; the agency's own lines since 20.10, "Гараж за 2 бр. коли (не е вкл. в
	   цената)") widens the column, so the next keeps its gap; when the block no longer fits the container, the last
	   column wraps instead of running over. */
	.sv-layout__cols { grid-template-columns: minmax(calc(397 * var(--u)), max-content) minmax(calc(649 * var(--u)), max-content) minmax(0, max-content); column-gap: 0; }
	.sv-layout--2 .sv-layout__cols { grid-template-columns: minmax(calc(550 * var(--u)), max-content) minmax(0, max-content); }
	.sv-layout__col {
		--sv-line: 397;
		min-width: calc(var(--sv-line) * var(--u));
		border-top: 0;
		padding-top: calc(29 * var(--u) + max(3px, calc(5 * var(--u))));
		background: linear-gradient(var(--sv-terracotta), var(--sv-terracotta)) left top / calc(var(--sv-line) * var(--u)) max(3px, calc(5 * var(--u))) no-repeat;
	}
	.sv-layout__col:nth-child(2) { --sv-line: 550; margin-left: calc(99 * var(--u)); }
	.sv-layout__col:nth-child(3) { --sv-line: 459; margin-left: calc(104 * var(--u)); }
	.sv-layout--2 .sv-layout__col:nth-child(1) { --sv-line: 550; margin-left: 0; }
	.sv-layout--2 .sv-layout__col:nth-child(2) { --sv-line: 459; margin-left: calc(104 * var(--u)); }
	.sv-layout__rooms { white-space: nowrap; }
	.sv-layout__col:last-child .sv-layout__rooms { white-space: normal; }
	.sv-layout--3 .sv-layout__col:first-child > * { margin-left: calc(3.4 * var(--u)); } /* Figma: the garage text sits 3.4 in */
}

/* The 2D plans (lightbox on click). */
/* The drawings of a type share one scale (all cut from the same A4 sheets at one resolution): each image carries its
   full size in width/height and the row shrinks them all by the same factor (flex-shrink is weighted by that size),
   so no per-image styles. Bottoms on one line, the captions under them; the row as wide as the content.
   A row per variant (type S: two rows of three); rows of equally wide files get the same scale. */
.sv-plans {
	display: flex;
	flex-direction: column;
	gap: max(32px, calc(48 * var(--u)));
	width: calc(100% - 2 * var(--sv-gutter));
	margin: max(40px, calc(61 * var(--u))) auto max(48px, calc(81 * var(--u)));
}
@media (min-width: 1024px) {
	.sv-plans { width: var(--sv-container); }
}
.sv-plans__row {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: max(16px, calc(20 * var(--u)));
}
.sv-plans__item {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0;
	text-align: center;
}
.sv-plans__link { display: block; cursor: zoom-in; }
.sv-plans__link:focus-visible { outline: 3px solid var(--sv-terracotta); outline-offset: 3px; }
.sv-plans .sv-plans__img {
	display: block;
	max-width: 100%; /* no width: the width attribute gives each drawing its share of the row */
	height: auto;
}
.sv-plans__caption {
	margin-top: max(10px, calc(19 * var(--u)));
	font-size: var(--sv-fs-subtitle);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--sv-navy);
}
@media (max-width: 767px) {
	.sv-plans__row { flex-direction: column; align-items: stretch; }
	.sv-plans__item { flex: none; }
}