/**
 * Tailex brand styles shared across the property listing and single property
 * templates (August 2026 redesign, per client PDF spec).
 */
:root {
	--tailex-blue-dark: #002760;
	--tailex-blue: #002d6f;
	--tailex-grey: #a6a6a6;
	--tailex-offwhite: #f4f6fc;
}

/* ---------- Favourite (heart) button ---------- */
.js-tailex-favourite {
	background: none;
	border: none;
	padding: 0;
	color: var(--tailex-blue);
	cursor: pointer;
	line-height: 1;
}
.js-tailex-favourite i {
	font-size: 1.1rem;
}
.js-tailex-favourite.is-favourited {
	color: #c0392b;
}
.js-tailex-favourite .fav-label,
.tailex-arrange-viewing .fav-label {
	font-size: 0.85rem;
	margin-left: 0.35rem;
	vertical-align: middle;
}

/* ---------- Favourites notices ----------
   Used to hand the visitor their list code, and to tell them which code they
   just moved away from when they open a shared link. */
.tailex-fav-notices {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: min(24rem, calc(100vw - 2rem));
}
.tailex-fav-notice {
	position: relative;
	background: var(--tailex-blue-dark);
	color: #fff;
	padding: 0.9rem 2.25rem 0.9rem 1rem;
	font-size: 0.875rem;
	line-height: 1.45;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.tailex-fav-notice strong {
	font-weight: 600;
	letter-spacing: 0.03em;
}
.tailex-fav-notice-close {
	position: absolute;
	top: 0.35rem;
	right: 0.5rem;
	background: none;
	border: 0;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem;
}

/* ---------- Favourites page ---------- */
/* Dark band behind Avada's fixed, transparent header — its logo and links are
   white, so without something dark behind them this page showed no menu at
   all. Full-bleed regardless of the container it is rendered into. */
.tailex-fav-hero {
	background: var(--tailex-blue-dark);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 11rem 0 3rem;
}
@media (max-width: 991.98px) {
	.tailex-fav-hero {
		padding-top: 7rem;
	}
}
.tailex-favourites {
	padding-top: 2.5rem;
	padding-bottom: 3rem;
}
.tailex-fav-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: flex-end;
	align-items: flex-start;
	margin-bottom: 1.5rem;
}
.tailex-fav-title {
	margin: 0;
	color: #fff !important;
}
.tailex-fav-count {
	margin: 0.35rem 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9375rem;
}
.tailex-fav-code {
	background: #dde6ed;
	padding: 0.9rem 1.1rem;
	max-width: 22rem;
}
.tailex-fav-code-label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--tailex-blue-dark);
}
.tailex-fav-code strong {
	font-size: 1.25rem;
	letter-spacing: 0.06em;
	color: var(--tailex-blue-dark);
}
.tailex-fav-hint {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	color: var(--tailex-blue-dark);
}
.tailex-fav-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: 2rem;
}
.tailex-fav-form {
	flex: 1 1 18rem;
}
.tailex-fav-form label {
	display: block;
	font-size: 0.875rem;
	margin-bottom: 0.4rem;
	color: var(--tailex-blue-dark);
}
.tailex-fav-field {
	display: flex;
	gap: 0.5rem;
}
.tailex-fav-field input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid #e2e6ef;
	padding: 0.5rem 0.75rem;
	font-size: 0.9375rem;
}
.tailex-fav-field .btn-tailex {
	white-space: nowrap;
	text-decoration: none;
}
.tailex-fav-feedback {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	color: var(--tailex-blue-dark);
	min-height: 1.2em;
}
.tailex-fav-empty {
	background: var(--tailex-offwhite);
	padding: 2.5rem 1.5rem;
	text-align: center;
}
.tailex-fav-empty p {
	margin: 0 0 0.5rem;
}
.tailex-fav-loading {
	color: var(--tailex-grey);
}

/* ---------- Exclusive badge ---------- */
.tailex-badge-exclusive {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 3;
	background: var(--tailex-blue);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.35rem 0.75rem;
	border-radius: 2px;
}

/* ---------- Media count overlay (video | camera n) ---------- */
.tailex-media-count {
	position: absolute;
	bottom: 0.6rem;
	left: 0.6rem;
	z-index: 3;
	background: rgba(0, 39, 96, 0.85);
	color: #fff;
	font-size: 0.75rem;
	padding: 0.3rem 0.6rem;
	border-radius: 2px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.tailex-media-count .divider {
	opacity: 0.5;
}

/* ---------- Property card image hover zoom ---------- */
.tailex-card-media {
	overflow: hidden;
	position: relative;
}
.tailex-card-media img,
.tailex-card-media .tailex-card-media-bg {
	transition: transform 0.4s ease;
}
.tailex-card:hover .tailex-card-media img,
.tailex-card:hover .tailex-card-media .tailex-card-media-bg {
	transform: scale(1.06);
}
.tailex-card-media-bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/* NOTE: an earlier attempt to disable the sticky header on non-single-property
   pages (forcing position:static on .fusion-sticky-container) broke the
   header everywhere else — that same row also carries Avada's "Absolute"
   positioning (fusion-absolute-container), which overlays it transparently
   on the hero image as its normal resting state, not just its scrolled/stuck
   state. Forcing position:static removed that too, leaving a blank white
   gap with invisible white-on-white nav text. Reverted; the header now
   behaves the same (sticky) on every page again, matching how the site
   already worked before this redesign. Making it sticky-ONLY-on-the-single-
   property-page needs a proper Avada Theme Builder conditional header
   (a GUI job), not a CSS override — flagged as a follow-up, not done here. */

/* ---------- Single property: sub nav (Details/Overview/Features/Gallery) ---------- */
.tailex-property-subnav {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--tailex-offwhite);
	border-bottom: 1px solid #e2e6ef;
}
.tailex-property-subnav .nav-link {
	color: var(--tailex-blue);
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.tailex-property-subnav .nav-link:hover {
	color: var(--tailex-blue-dark);
}
.btn-tailex {
	display: inline-block;
	background-color: var(--tailex-blue-dark);
	color: #fff;
	border-radius: 2px;
	font-size: 0.85rem;
	padding: 0.5rem 1.25rem;
	border: none;
	text-decoration: none;
}
.btn-tailex:hover {
	background-color: var(--tailex-blue);
	color: #fff;
}

/* ---------- Single property: hero ---------- */
.tailex-property-hero {
	position: relative;
	width: 100%;
	height: 70vh;
	min-height: 420px;
	background-size: cover;
	background-position: center;
	color: #fff;
}
.tailex-property-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 39, 96, 0.85) 0%, rgba(0, 39, 96, 0.35) 30%, rgba(0, 39, 96, 0) 55%);
}
.tailex-property-hero .tailex-property-hero-content {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	padding: 2.5rem;
}
.tailex-property-hero h1 {
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	margin-bottom: 0.5rem;
	/* Avada's global heading colour otherwise overrides the inherited white
	   (same clash as Similar Properties/off-market band) — low contrast on
	   bright hero photos. Force it explicitly, plus a text shadow as a
	   second line of defence on busy/bright images. */
	color: #fff !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.tailex-property-hero .tailex-property-price {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 600;
	color: #fff !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* ---------- Overview / features grids ---------- */
.tailex-overview-item {
	margin-bottom: 1.5rem;
}
.tailex-overview-item .label {
	display: block;
	font-weight: 700;
	color: var(--tailex-blue);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.15rem;
}
.tailex-overview-item .value {
	font-size: 1rem;
	color: #222;
}
.tailex-feature-item {
	padding: 0.4rem 0;
	border-bottom: 1px solid #eef0f6;
}

/* ---------- Contact card ---------- */
.tailex-contact-card {
	background: var(--tailex-offwhite);
	border-radius: 2px;
	padding: 1.5rem;
	position: sticky;
	top: 90px;
}
.tailex-contact-card h3 {
	font-size: 1.2rem;
	margin-bottom: 0.25rem;
}
.tailex-contact-card .tailex-agent {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1rem 0;
}
.tailex-contact-card .tailex-agent img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: #fff;
	border-radius: 50%;
	padding: 4px;
}
.tailex-contact-card .tailex-agent .name {
	font-weight: 700;
	color: var(--tailex-blue-dark);
}
.tailex-contact-card .tailex-agent .phone a {
	color: var(--tailex-blue);
	text-decoration: none;
}

/* ---------- Gallery thumb strip ---------- */
.tailex-gallery-thumbs .swiper-slide {
	height: 90px;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}
.tailex-gallery-thumbs .swiper-slide-thumb-active {
	opacity: 1;
}
.tailex-gallery-thumbs .swiper-slide > div {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/* ---------- Similar properties / results carousels ---------- */
.tailex-similar-properties {
	padding: 3rem 0;
}
.tailex-similar-properties h2 {
	color: var(--tailex-blue-dark);
	font-size: 1.6rem;
}
/* .zswiper-container is a shared carousel wrapper reused across the site;
   its nav arrows are position:absolute and need a positioned ancestor or
   they anchor to the viewport instead of the carousel itself. */
.zswiper-container {
	position: relative;
}
/* Avada compiles per-element "Custom CSS" from ALL pages site-wide into one
   global stylesheet, so a dark-themed .zswiper-container used elsewhere on
   the site (`.zswiper-container > .swiper > .swiper-wrapper > .swiper-slide
   { background-color:#232852 !important }`) leaks into ours here. That rule
   has 4 chained classes of specificity; match it with 5 to win regardless of
   source order. */
.tailex-similar-properties .zswiper-container > .swiper > .swiper-wrapper > .swiper-slide {
	background-color: #fff !important;
}
.tailex-card h3,
.tailex-card p,
.tailex-card .value {
	color: #222 !important;
}

/* ---------- Listing page (buy/rent/sell) ---------- */
.tailex-results-panel {
	background-color: var(--tailex-offwhite);
	padding: 2rem;
}
.tailex-results-panel .tailex-card {
	background-color: #fff;
}
/* The whole card links to the property via an invisible full-card overlay
   (rather than wrapping everything in <a>, which would make the Arrange
   Viewing link an invalid nested anchor). The real, visible controls sit
   above it with a higher z-index. */
.tailex-card-stretched-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Card height used to be dictated by the text column — the main photo carried
   no ratio of its own and just stretched (h-100) to whatever the copy needed,
   which made the card taller than the client's reference. The ratio now lives
   on photo 1's column, so the image block sets the height and the thumbnails
   and text follow. Keeping it on the column (rather than the photo) means a
   card whose copy runs long still stretches instead of leaving a white gap
   under the images. */
.tailex-results-panel .tailex-card > .col-lg-8 > .row {
	height: 100%;
}
.tailex-results-panel .tailex-card > .col-lg-8 > .row > .col-lg-8 {
	aspect-ratio: 7 / 5;
}
.tailex-results-panel .results-img-1 {
	height: 100% !important;
}
/* The thumbnail stack was the real culprit: two `h-50` tiles resolved to
   150px each and overflowed their column (2x150 + gutter = 316), so the row
   settled taller than photo 1. It also sat inset inside the white panel
   (16px above, 8px below) instead of reading as part of the image block.
   The column is now the flex context — so it stretches to the row height —
   and the stack divides that height exactly, flush with photo 1. */
.tailex-results-panel .tailex-card .row.p-0.gy-2 {
	--bs-gutter-y: 0;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	/* Bootstrap's `.row` wraps; combined with a column direction that made the
	   two tiles lay out as wrapped lines and left 8px of slack top and bottom. */
	flex-wrap: nowrap;
	gap: 5px;
}
/* The row carries clearfix ::before/::after pseudo-elements. Under flex those
   count as items, so the 8px gap was applied three times and left the stack
   inset 8px from photo 1 top and bottom. */
.tailex-results-panel .tailex-card .row.p-0.gy-2::before,
.tailex-results-panel .tailex-card .row.p-0.gy-2::after {
	display: none;
}
.tailex-results-panel .results-img-2,
.tailex-results-panel .results-img-3 {
	height: auto !important;
	flex: 1 1 0;
	min-height: 0;
	padding: 0;
}
/* ---------- Results card typography ----------
   The client's reference card reads as one system: a single family, one
   accent colour plus a grey, and one type scale. Ours had drifted — the
   title inherited Avada's OPTICIAN (an all-caps display face, hence the
   shouting) in pure black, while the rest ran in Lexend across two
   different blues and five sizes. Normalised below. */
.tailex-card .card-header {
	font-family: inherit;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--tailex-blue-dark);
}
.tailex-card .card-text {
	font-size: 0.8125rem;
}
/* `.tailex-card p` above forces #222 with !important, so the muted location
   line needs the same weapon to stay grey. */
.tailex-card .card-body .card-text.text-secondary {
	color: var(--tailex-grey) !important;
}
.tailex-card-specs {
	gap: 0.35rem 1.5rem;
	font-size: 0.8125rem;
	color: var(--tailex-blue-dark);
}
/* `pb-0` on the footer left the price sitting 6px off the card's bottom edge. */
.tailex-card .card-footer {
	padding-bottom: 0.75rem !important;
}
/* Bootstrap ships its utilities as !important, so `.fs-3` needs matching
   force to come down to the reference card's size. */
.tailex-card .card-footer span.fs-3 {
	font-size: 1.625rem !important;
}

/* Equal gutters between photo 1, the thumbnail stack and the text column.
   Bootstrap's own gutters left them at 23px and 30px. */
@media (min-width: 992px) {
	.tailex-results-panel .tailex-card > .col-lg-8 > .row > .col-lg-8 {
		padding-right: 0 !important;
	}
	/* Photo 1 gives up 20% of its width; the space goes to the text column,
	   which brings the three-column split closer to the client's reference.
	   The inner split is re-derived so the thumbnails keep their size. */
	.tailex-results-panel .tailex-card > .col-lg-8 {
		width: 57.78%;
	}
	.tailex-results-panel .tailex-card > .col-lg-8 > .row > .col-lg-8 {
		width: 61.54%;
	}
	.tailex-results-panel .tailex-card > .col-lg-8 > .row > .col-lg-4 {
		width: 38.46%;
	}
	.tailex-results-panel .tailex-card > .col-lg-4 {
		width: 42.22%;
		padding-left: 24px;
		padding-right: 0;
	}
	/* Photo 1 and the two thumbnails read as one image block, so they sit
	   tight (5px); the 24px above is kept for the gap to the text column. */
	.tailex-results-panel .tailex-card > .col-lg-8 > .row > .col-lg-4 {
		padding-left: 5px;
		padding-right: 0;
	}
	/* `d-lg-block` would keep the thumbnail column from stretching. Column
	   direction makes the stack's height definite, so the two tiles can
	   resolve `flex-basis: 0` against it instead of against their own
	   content height. */
	.tailex-results-panel .tailex-card > .col-lg-8 > .row > .col-lg-4 {
		display: flex !important;
		flex-direction: column;
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* Card actions row (Favourite / Arrange Viewing) — sits above the stretched
   link so both controls stay clickable. */
.tailex-card-actions {
	position: relative;
	z-index: 2;
	font-size: 0.8125rem;
}
/* Both icons share one size so they stay matched to each other — the heart
   carries its own 1.1rem rule for the single-property page. */
.tailex-card-actions i {
	font-size: 0.9375rem;
}
.tailex-card-actions .js-tailex-favourite,
.tailex-card-actions .tailex-arrange-viewing,
.tailex-card-actions .tailex-my-list {
	color: var(--tailex-blue-dark);
	/* One gap for all three, so the distance from icon to label cannot drift
	   as actions are added — it used to come from a margin listing only two
	   of them. Paired with `fa-fw` on the icons, which equalises glyph boxes
	   that are otherwise different widths. */
	gap: 0.4rem;
}
/* Saving nothing yet means there is no list to visit, so the entry point stays
   out of the way until there is. Hidden by default so it never flashes in
   before the favourites script has read the visitor's list.
   No `d-flex` utility on this one, deliberately: Bootstrap ships those as
   !important, and owning `display` here keeps the toggle a plain rule. */
.tailex-my-list {
	display: none;
	align-items: center;
	position: relative;
	z-index: 2;
	text-decoration: none;
}
body.tailex-has-favourites .tailex-my-list {
	display: flex;
}
.tailex-my-list:hover {
	text-decoration: underline;
}
.tailex-card-actions .fav-label {
	font-size: inherit;
	margin-left: 0;
}
.tailex-arrange-viewing {
	position: relative;
	z-index: 2;
	color: var(--tailex-blue-dark);
	text-decoration: none;
}
.tailex-arrange-viewing:hover {
	text-decoration: underline;
}
.tailex-cant-find {
	background-color: #dde6ed;
	border: 0;
	color: var(--tailex-blue-dark);
}
.tailex-cant-find p {
	color: var(--tailex-blue-dark);
}
.tailex-cant-find a {
	color: var(--tailex-blue-dark);
	text-decoration: underline;
}
/* Pagination: client wants plain numbers, not boxed buttons — override the
   simplePagination.js "dark-theme" skin. Note: .pagi IS the .dark-theme
   element (not an ancestor of it), and the page items are <span>, not <a>. */
.pagi.dark-theme a,
.pagi.dark-theme span {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: var(--tailex-blue) !important;
	padding: 0 0.5rem !important;
	margin: 0 !important;
	font-size: 0.9rem !important;
}
.pagi.dark-theme a:hover,
.pagi.dark-theme li:not(.disabled):not(.active) span:hover {
	background: none !important;
	text-decoration: underline !important;
}
.pagi.dark-theme .current {
	color: var(--tailex-blue-dark) !important;
	font-weight: 700 !important;
	text-decoration: underline;
}
.pagi.dark-theme li.disabled span {
	color: #bbb !important;
}
/* The sidebar search is one component, so it keeps a single 16px rhythm the
   whole way down. The fields already shared it; this form's own top margin
   and vertical padding were adding 61px above the first field and 33px
   below the last. */
/* The `form#` selector is deliberate: the Customizer's Additional CSS sets
   `#rohsigma_searchbar { padding-top:21px; padding-bottom:33px }` with
   !important, and being inline it lands after this file. Matching the tag
   as well outranks it. Removing it there instead would be cleaner, but it
   lives in the database and so would not travel with a deploy. */
form#rohsigma_searchbar {
	margin-top: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* Type's options come from the Inmobalia API, which is IP-allowlisted to the
   production server, so locally the AJAX 500s and leaves an empty control —
   hidden in effect, but its column still held 39px plus its margin. Collapse
   the column itself, and only while the control is genuinely empty: once the
   options render, the selector stops matching and the field returns. */
#rohsigma_searchbar .col:has(> #rohsigma_type:empty) {
	display: none;
}
/* Client wants the filter dropdowns as plain underlined text, not boxed
   buttons — the reference code search box is the one exception that keeps
   its box per spec. */
#rohsigma_area .vscomp-toggle-button,
#rohsigma_location .vscomp-toggle-button,
#rohsigma_type .vscomp-toggle-button,
#rohsigma_bedrooms .vscomp-toggle-button,
#rohsigma_bathrooms .vscomp-toggle-button,
#rohsigma_minprice .vscomp-toggle-button,
#rohsigma_maxprice .vscomp-toggle-button {
	border: none !important;
	border-bottom: 1px solid #ccc !important;
	border-radius: 0 !important;
	background: transparent !important;
}

/* ---------- Off-market CTA band ---------- */
/* Client re-created this band at page level with a different design, so the
   widget's own copy drops its blue background and reads on the page ground.
   Text and button follow the background to stay legible. */
.tailex-offmarket-band {
	position: relative;
	background-color: transparent;
	color: var(--tailex-blue-dark);
	overflow: hidden;
}
.tailex-offmarket-band img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	position: absolute;
	inset: 0;
}
.tailex-offmarket-band .content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 4rem 1.5rem;
}
/* Avada's global heading colour otherwise overrides this band's text
   (same clash seen on Similar Properties cards) — force it explicitly. */
.tailex-offmarket-band .content h2,
.tailex-offmarket-band .content p {
	color: var(--tailex-blue-dark) !important;
}
.tailex-offmarket-band .btn-tailex-outline {
	display: inline-block;
	margin-top: 1rem;
	border: 1px solid var(--tailex-blue-dark);
	color: var(--tailex-blue-dark);
	padding: 0.6rem 1.5rem;
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.tailex-offmarket-band .btn-tailex-outline:hover {
	background: var(--tailex-blue-dark);
	color: #fff;
}

/* ---------- Sales / Rental toggle ----------
   The markup lives in a [fusion_code] block on the buy/rent pages and sets
   display:flex + max-width:350px, so the grey pill stretched to the full
   sidebar column with empty space after the two buttons. Client wants it
   hugging its content. Selector is `div.` so it outranks that inline
   <style>, which the browser sees after this file. */
div.property_tabs_menu {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
}

/* =====================================================================
   HOMEPAGE — client notes "TAILEX - Website Notes - Homepage" (Aug 2026)
   =====================================================================
   Everything below lives in this file (rather than in the Customizer's
   Additional CSS) so it ships with the plugin. Note that the Customizer
   block is printed AFTER this stylesheet and is written almost entirely
   in !important, so several rules here are deliberately given one extra
   class of specificity to win against it. Where that happens it is
   called out in a comment.
   ------------------------------------------------------------------ */

/* ---------- Floating CALL US | MESSAGE button ---------- */
/* It is an Avada off-canvas popup rendered in the footer. Avada opens it
   on scroll-down but never closes it again, so it stayed on screen when
   the visitor scrolled back up over the hero. tailex-home.js tags the
   wrapper with .tailex-cta and toggles .tailex-cta-visible on <body>
   once the hero is behind us; without JS the button simply behaves as
   it did before. */
/* visibility (not pointer-events) does the hiding: Avada keeps
   pointer-events:none on this full-viewport wrapper even while the popup
   is open — only the small inner panel is clickable — and overriding it
   here would have turned the wrapper into an invisible sheet swallowing
   every click on the page. */
/* !important is load-order, not taste: Avada's own
   `.awb-off-canvas-wrap.awb-show{opacity:1;visibility:visible}` has the
   same specificity as this rule and its stylesheet is printed after this
   one, so without it the popup shows through on the hero. */
.awb-off-canvas-wrap.tailex-cta {
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}
body.tailex-cta-visible .awb-off-canvas-wrap.tailex-cta {
	opacity: 1 !important;
	visibility: visible !important;
}
/* The black slab behind the two links is the column background, set from
   an inline --awb-bg-color custom property; !important on the resolved
   property is what removes it. */
.awb-off-canvas .tailex-cta-column,
.awb-off-canvas .tailex-cta-column > .fusion-column-wrapper {
	background-color: transparent !important;
	box-shadow: none !important;
}
.awb-off-canvas .btn-group.tailex-cta-group {
	background: #f1f0ef;
	box-shadow: 0 8px 16px rgba(10, 52, 113, 0.22);
	padding: 0 !important;
	overflow: hidden;
}
.awb-off-canvas .btn-group a.caallbutts,
.awb-off-canvas .btn-group a.caallbutts2 {
	background-color: #f1f0ef !important;
	color: #0a3471 !important;
	font-family: 'OPTICIAN', 'Lexend', sans-serif;
	font-size: 0.75rem !important;
	line-height: 1.1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.6rem 1.1rem !important;
	border: 0 !important;
	border-radius: 0 !important;
}
/* Beats `.caallbutts:hover{background:black}` in the Customizer block. */
.awb-off-canvas .btn-group a.caallbutts:hover,
.awb-off-canvas .btn-group a.caallbutts2:hover {
	background-color: #e4e2e0 !important;
	color: #0a3471 !important;
	border: 0 !important;
}
.awb-off-canvas .btn-group a.caallbutts2,
.awb-off-canvas .btn-group a.caallbutts2:hover {
	border-left: 1px solid rgba(10, 52, 113, 0.3) !important;
}

/* ---------- "Our Collection" section ---------- */
/* .tailex-collection-host is put on the section container by
   tailex-home.js — the container itself carries id="bigpic_container",
   which the page reuses on the exclusive-property band below, so it is
   not safe to style by id. */
body.home .tailex-collection-host {
	background-color: #f5f5f5;
	position: relative;
	overflow: hidden;
}
body.home .tailex-collection-host > * {
	position: relative;
	z-index: 1;
}
/* The section's column already carries the same #f5f5f5 the client asked
   for, and an opaque column background would paint over the stencil
   below. The colour now lives on the container, so the column can go
   transparent and let the mark through. */
body.home .tailex-collection-host .fusion-column-wrapper {
	background-color: transparent !important;
}
/* Stencil brand mark behind the section, left-hand side. Painted as a
   masked block so the line art takes the brand blue instead of the grey
   it has baked in. */
body.home .tailex-collection-host::before {
	content: '';
	position: absolute;
	/* Sits behind the title block and runs on behind the photo strip —
	   the carousel is full-bleed, so the top of the section is where the
	   mark actually reads. */
	left: -7%;
	top: -8%;
	width: min(34rem, 42%);
	aspect-ratio: 1 / 1;
	background-color: var(--tailex-blue);
	opacity: 0.13;
	z-index: 0;
	-webkit-mask-image: url(../img/tailex-stencil-mark.png);
	mask-image: url(../img/tailex-stencil-mark.png);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	pointer-events: none;
}
@media (max-width: 767.98px) {
	body.home .tailex-collection-host::before {
		width: 80%;
		left: -28%;
		top: -4%;
		opacity: 0.1;
	}
}
.tailex-collection-title {
	color: var(--tailex-blue-dark) !important;
	text-transform: uppercase;
}
/* "A curated portfolio" — same font as the title, per the notes. */
.tailex-collection-sub,
.tailex-collection-sub p {
	font-family: 'OPTICIAN', 'Lexend', sans-serif !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---------- "Our Collection" carousel ---------- */
.tailex-collection {
	position: relative;
	--tailex-collection-h: 320px;
}
.tailex-collection .swiper {
	/* Room for the hover lift and its shadow — the swiper clips overflow. */
	padding: 18px 4px 30px;
	overflow: hidden;
}
/* The Customizer carries `#bigpic_container div{padding-bottom:0
   !important}`, and an id beats any number of classes — matching the id
   is the only way to keep the room the hover lift and its shadow need.
   Harmless if that id is ever removed: the rule above then stands on its
   own. */
#bigpic_container .tailex-collection .swiper {
	padding-bottom: 30px !important;
}
.tailex-collection .swiper-slide {
	height: auto;
	background-color: transparent !important;
}
.tailex-collection-card {
	display: block;
	position: relative;
	height: var(--tailex-collection-h);
	overflow: hidden;
	text-decoration: none;
	background-color: #e9eaee;
	transition: transform 0.45s ease, box-shadow 0.45s ease;
	will-change: transform;
}
.tailex-collection-photo {
	display: block;
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	filter: grayscale(100%);
	transition: filter 0.45s ease;
}
.tailex-collection-card:hover,
.tailex-collection-card:focus-visible {
	transform: translateY(-10px);
	box-shadow: 0 16px 28px rgba(0, 39, 96, 0.28);
}
.tailex-collection-card:hover .tailex-collection-photo,
.tailex-collection-card:focus-visible .tailex-collection-photo {
	filter: grayscale(0%);
}
/* Last slide: the way into the full search. */
.tailex-collection-explore {
	background-color: #232852;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
}
.tailex-collection-explore-inner {
	display: block;
	color: #fff;
}
.tailex-collection-arrow {
	display: block;
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 1.1rem;
	color: #fff;
}
.tailex-collection-explore-title {
	display: block;
	font-family: 'OPTICIAN', 'Lexend', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.95rem;
	color: #fff;
}
.tailex-collection-explore-sub {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.75);
}
.tailex-collection-explore:hover .tailex-collection-explore-sub {
	color: #fff;
}
/* Arrows: this carousel has its own, so the Customizer rules that hide
   the shared prev arrow (.toto) and shove the next one 300px in (.tito)
   do not reach it. */
.tailex-collection-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--tailex-blue-dark);
	font-size: 1.25rem;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(0, 39, 96, 0.2);
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}
.tailex-collection-nav:hover {
	background: #fff;
}
.tailex-collection-nav.is-disabled {
	opacity: 0;
	pointer-events: none;
}
.tailex-collection-prev {
	left: 8px;
}
.tailex-collection-next {
	right: 8px;
}
@media (min-width: 576px) {
	.tailex-collection {
		--tailex-collection-h: 380px;
	}
}
@media (min-width: 992px) {
	.tailex-collection {
		--tailex-collection-h: 460px;
	}
}
@media (min-width: 1200px) {
	.tailex-collection {
		--tailex-collection-h: 540px;
	}
}

/* ---------- Exclusive property band ---------- */
/* `.onebig` keeps its Customizer height/padding; the element is now an
   anchor, so it needs an explicit display. */
.onebig.tailex-exclusive {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-size: cover;
	background-position: center;
	text-decoration: none;
	color: #fff;
}
.tailex-exclusive-badge {
	align-self: flex-start;
	display: inline-block !important;
	background: rgba(35, 40, 82, 0.85);
	color: #fff;
	font-family: 'OPTICIAN', 'Lexend', sans-serif;
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 0.45rem 0.85rem;
	margin: 0.5rem 0 0 0.5rem;
}
.tailex-exclusive-copy {
	display: block;
	align-self: flex-end;
	margin-top: auto;
	text-align: right;
	padding: 0 1rem 0 0;
	font-family: 'OPTICIAN', 'Lexend', sans-serif;
	/* .tailbox1 carries 50px of margin plus 50px of padding from the
	   Customizer, which left the copy floating well above the bottom of
	   the band; the design sits it low in the frame. */
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.tailex-exclusive-title {
	display: block;
	font-family: 'OPTICIAN', 'Lexend', sans-serif;
	font-size: clamp(1.15rem, 2.1vw, 1.9rem);
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.tailex-exclusive-price {
	display: block;
	margin-top: 0.5rem;
	font-size: clamp(0.9rem, 1.2vw, 1.1rem);
	letter-spacing: 0.1em;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.tailex-exclusive-desc {
	display: block;
	margin-top: 0.9rem;
	margin-left: auto;
	max-width: 34rem;
	font-size: 0.75rem;
	line-height: 1.6;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
/* Plain, quiet text — the grey badge box is gone. */
.tailex-exclusive-ref {
	display: block;
	margin-top: 1.1rem;
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 991.98px) {
	.tailex-exclusive-copy {
		padding: 0 1.25rem 1.5rem;
		text-align: center;
	}
	.tailex-exclusive-desc {
		margin-right: auto;
	}
}
@media (max-width: 575.98px) {
	/* The old badge was hidden below 600px by a Customizer rule on
	   `.bg-tailex`; this markup no longer uses that class, so the badge
	   shows on phones as the client asked. */
	.tailex-exclusive-badge {
		font-size: 0.55rem;
		letter-spacing: 0.18em;
		padding: 0.35rem 0.7rem;
	}
	.tailex-exclusive-desc {
		display: none;
	}
}

/* ---------- Explore Costa del Sol locations ---------- */
/* Black & white, colour + a small lift on hover. */
body.home .fusion-image-carousel .fusion-image-wrapper img {
	filter: grayscale(100%);
	transition: filter 0.45s ease, transform 0.45s ease;
}
body.home .fusion-image-carousel .fusion-image-wrapper:hover img {
	filter: grayscale(0%);
	transform: scale(1.06);
}