/* MYC Villas. Matches the yacht pages: navy #0a104a, the gold gradient
   d5b038 -> a57d02, Poppins, flat cards with the More-details hover. */

.myc-villas,
.myc-villa {
	--myc-navy: #0a104a;
	--myc-navy-soft: #1a2260;
	--myc-gold: #d5b038;
	--myc-gold-dark: #a57d02;
	--myc-grad: linear-gradient(90deg, #d5b038 0%, #a57d02 100%);
	--myc-ink: #212121;
	--myc-muted: #6b7785;
	--myc-line: #e4e8ee;
	--myc-bg: #f7f8fa;
	max-width: 1240px;
	margin: 0 auto;
	padding: 56px 24px 80px;
	color: var(--myc-ink);
	font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

.myc-villas h1,
.myc-villa h1,
.myc-villas h2,
.myc-villa h2 {
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	color: var(--myc-navy);
	line-height: 1.2;
}

.myc-eyebrow {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: 12px;
	color: var(--myc-gold);
	margin: 0 0 10px;
}

.myc-villas__intro h1 { font-size: clamp(30px, 4vw, 46px); margin: 0 0 12px; }
.myc-lede { color: var(--myc-muted); margin: 0 0 34px; font-size: 17px; }

/* ------------------------------------------------------------------ search */

.myc-search {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
	gap: 14px;
	align-items: end;
	/* Every control is 44px tall, so the labels and the button line up exactly. */
	background: #fff;
	border: 1px solid var(--myc-line);
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 12px 30px rgba(10, 16, 74, .06);
}

.myc-search__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.myc-search__field label {
	font-size: 12px;
	line-height: 16px;
	height: 16px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--myc-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.myc-search input,
.myc-search select,
.myc-form input,
.myc-form textarea {
	width: 100%;
	border: 1px solid var(--myc-line);
	border-radius: 10px;
	padding: 0 12px;
	font: inherit;
	font-size: 15px;
	line-height: 44px;
	height: 44px;
	color: var(--myc-ink);
	background: #fff;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
}

/* The date control keeps its native picker, the rest sit on one baseline. */
.myc-search input[type="date"] { -webkit-appearance: none; appearance: none; }

.myc-search select,
.myc-form select {
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path fill="%236b7785" d="M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z"/></svg>' );
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 11px 7px;
	padding-right: 34px;
}

.myc-form textarea {
	line-height: 1.5;
	height: auto;
	padding: 11px 12px;
}
.myc-search input:focus,
.myc-search select:focus,
.myc-form input:focus,
.myc-form textarea:focus {
	outline: 2px solid var(--myc-gold);
	outline-offset: 1px;
	border-color: var(--myc-gold);
}

/* ------------------------------------------------------------------ button */

.myc-button {
	display: inline-block;
	height: 44px;
	line-height: 44px;
	background: var(--myc-grad);
	color: #fff;
	border: 0;
	border-radius: 9px;
	padding: 0 26px;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .02em;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: filter .18s ease, box-shadow .18s ease;
}
.myc-button:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(165, 125, 2, .35); color: #fff; }
/* Divi Theme Builder targets content links with #et-boc id selectors, so
   only !important can keep the button text white. */
.myc-villas a.myc-button,
.myc-villa a.myc-button,
.myc-villas a.myc-button:hover,
.myc-villa a.myc-button:hover,
.myc-villas a.myc-button:visited,
.myc-villa a.myc-button:visited { color: #fff !important; }
.myc-button--ghost {
	background: transparent;
	color: var(--myc-navy);
	border: 2px solid var(--myc-gold);
	line-height: 40px;
}
.myc-button--ghost:hover { background: var(--myc-grad); color: #fff; border-color: transparent; filter: none; }
.myc-button--block { width: 100%; height: 48px; line-height: 48px; }

/* ------------------------------------------------------------------- cards */

.myc-results-count { margin: 30px 0 18px; color: var(--myc-muted); font-size: 14px; }

[data-myc-results] { position: relative; transition: opacity .15s ease; }
[data-myc-results].is-loading { opacity: .4; pointer-events: none; }
[data-myc-results].is-loading::after {
	content: "";
	position: absolute;
	top: 90px;
	left: 50%;
	width: 34px;
	height: 34px;
	margin-left: -17px;
	border: 3px solid var(--myc-line);
	border-top-color: var(--myc-gold);
	border-radius: 50%;
	animation: myc-spin .7s linear infinite;
}
@keyframes myc-spin { to { transform: rotate(360deg); } }

.myc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
}

/* Boxed cards with rounded corners; the site's colors and hovers:
   gold gradient button, gold title on hover, More-details veil on the photo. */

.myc-card {
	background: #fff;
	border: 1px solid var(--myc-line);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.myc-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(10, 16, 74, .12); }

.myc-card__media {
	display: block;
	position: relative;
	aspect-ratio: 680 / 385;
	overflow: hidden;
	background: var(--myc-bg);
}
/* Absolute + inset survives theme img { height: auto !important } overrides,
   so a portrait or collage cover can never stretch the card. */
.myc-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.myc-card__city {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	background: rgba(10, 16, 74, .82);
	color: #fff;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
}

.myc-card__flag {
	position: absolute;
	right: 14px;
	top: 14px;
	z-index: 2;
	background: var(--myc-grad);
	color: #fff;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
}

/* The yacht-grid hover: a light veil over the photo plus the gold pill. */
.myc-card__hover {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(241, 237, 237, .62);
	opacity: 0;
	transition: opacity .2s ease;
}
.myc-card__media:hover .myc-card__hover,
.myc-card__media:focus-visible .myc-card__hover { opacity: 1; }
.myc-card__cta {
	background: var(--myc-grad);
	color: #fff;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 300;
	padding: 10px 22px;
	border-radius: 10px;
}

.myc-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* Divi styles bare h3/p inside content with its own margins and paddings,
   so the card lines need the heavier hand to stay tight. */
.myc-card__body .myc-card__title,
.myc-card__body p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.35 !important;
}
/* A Custom CSS snippet (Anna's doc, item A6) sets min-height:56px on card
   titles to align rows of two-line names. The villas carry short written
   names now, so the reserve just opens a hole under every title. */
.myc-card__title { font-size: 20px; font-weight: 700; min-height: 0 !important; }
.myc-card__title a { color: var(--myc-navy); text-decoration: none; transition: color .2s ease; font-weight: 700; }
.myc-card:hover .myc-card__title a { color: var(--myc-gold); }
.myc-card__specs { margin: 0; color: var(--myc-muted); font-size: 14px; }
.myc-card__price {
	margin: 0;
	color: var(--myc-ink);
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 300;
}
.myc-card__price strong { font-weight: 500; color: var(--myc-ink); }
.myc-card__price span { color: var(--myc-muted); }
.myc-card__body .myc-button { margin-top: auto; }

/* ----------------------------------------------------------- single villa */

.myc-breadcrumb { margin: 0 0 14px; font-size: 13px; color: var(--myc-muted); display: flex; flex-wrap: wrap; gap: 8px; }
.myc-breadcrumb a { color: var(--myc-muted); text-decoration: none; }
.myc-breadcrumb a:hover { color: var(--myc-gold); }

/* Price and minimum stay right under the H1, not only in Good to know. */
.myc-villa__headline { margin: 0 0 26px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.myc-villa__headline strong { font-family: "Poppins", sans-serif; font-size: 26px; color: var(--myc-navy); }
.myc-villa__headline > span { font-size: 14px; color: var(--myc-muted); }
/* Scoped under the headline so the muted span colour cannot override it. */
.myc-villa__min,
.myc-villa__headline > .myc-villa__min {
	background: #fff;
	border: 1.5px solid var(--myc-gold);
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 13px;
	font-weight: 600;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	color: var(--myc-navy);
}

.myc-villa__lead { color: var(--myc-ink); line-height: 1.7; margin-bottom: 20px; font-size: 16px; }

.myc-pairing p { color: #3c4653; line-height: 1.7; margin: 0 0 16px; }

/* ------------------------------------------------------------- page copy */

/* ------------------------------------------------- the written page copy */

.myc-copy {
	margin-top: 64px;
	border-top: 1px solid var(--myc-line);
	padding-top: 56px;
	color: #3c4653;
	line-height: 1.7;
}
.myc-copy a { color: var(--myc-gold-dark); }
.myc-copy a:hover { color: var(--myc-navy); }

.myc-copy__intro {
	max-width: 940px;
	margin: 0 auto 44px;
	text-align: center;
	font-size: 18px;
	line-height: 1.75;
	color: #3c4653;
}

/* A centred section heading, sized like the "FAQs" heading on the yacht
   pages: Poppins 800 in navy with a short gold rule under it. */
.myc-copy__title {
	margin: 0;
	text-align: center;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--myc-navy);
}
.myc-copy__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 14px auto 0;
	border-radius: 3px;
	background: var(--myc-grad);
}
.myc-copy__sub {
	margin: 14px 0 0;
	text-align: center;
	font-size: 19px;
	color: var(--myc-ink);
}

/* The area sections, as cards across the full width of the page. */
.myc-copy__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.myc-copy__card {
	background: #fff;
	border: 1px solid var(--myc-line);
	border-radius: 18px;
	padding: 32px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.myc-copy__card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(10, 16, 74, .10); }

.myc-copy__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 18px;
	border-radius: 15px;
	background: var(--myc-grad);
	color: #fff;
}
.myc-copy__icon svg { width: 27px; height: 27px; }

.myc-copy .myc-copy__card h2 {
	margin: 0 0 10px;
	font-size: 21px;
	line-height: 1.3;
}
.myc-copy .myc-copy__card p {
	margin: 0;
	max-width: none;
	font-size: 15px;
	line-height: 28px;
	color: #3c4653;
}

/* The villa-and-yacht block runs the full width and sits on the tinted
   ground, so the page ends on something other than another white card. */
.myc-copy__card--wide {
	grid-column: 1 / -1;
	background: var(--myc-bg);
	border-color: transparent;
}
.myc-copy__card--wide:hover { transform: none; box-shadow: none; }

/* ------------------------------------------------------ how booking works */

.myc-steps { margin-top: 72px; }

.myc-steps__list {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.myc-steps__item {
	position: relative;
	margin: 0;
	padding: 34px 26px 28px;
	background: #fff;
	border: 1px solid var(--myc-line);
	border-radius: 18px;
}
.myc-steps__num {
	position: absolute;
	top: -16px;
	left: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--myc-grad);
	color: #fff;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
}
.myc-steps__icon {
	display: block;
	margin: 4px 0 14px;
	color: var(--myc-gold-dark);
}
.myc-steps__icon svg { width: 28px; height: 28px; }

.myc-copy .myc-steps__item h3 {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.35;
	color: var(--myc-navy);
}
.myc-copy .myc-steps__item p {
	margin: 0;
	max-width: none;
	font-size: 14.5px;
	line-height: 26px;
	color: #3c4653;
}

/* ------------------------------------------------------------------- FAQs */

.myc-faqs { margin-top: 80px; }
.myc-faq { margin-top: 40px; }

.myc-faq__item {
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--myc-line);
	background: none;
}
.myc-faq__item:first-child { border-top: 1px solid var(--myc-line); }

/* display:flex is what removes the browser's own disclosure triangle in
   Blink and WebKit; list-style does it in Gecko. Both, plus the explicit
   marker rules, so no engine ever draws a stray arrow above the question. */
.myc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0;
	padding: 24px 4px;
	cursor: pointer;
	list-style: none;
}
.myc-faq__q::-webkit-details-marker { display: none; }
.myc-faq__q::marker { content: ""; font-size: 0; }

.myc-faq .myc-faq__q h3 {
	margin: 0;
	padding: 0;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--myc-navy);
}
.myc-faq__q:hover h3 { color: var(--myc-gold-dark); }

.myc-faq__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--myc-navy);
	transition: transform .25s ease;
}
.myc-faq__chevron svg { width: 22px; height: 22px; display: block; }
.myc-faq__item[open] > .myc-faq__q .myc-faq__chevron { transform: rotate(180deg); }

.myc-faq__a { padding: 0 80px 26px 4px; }
.myc-faq .myc-faq__a p {
	margin: 0;
	max-width: none;
	font-size: 16px;
	line-height: 30px;
	color: #3c4653;
}

/* -------------------------------------------------------------- narrower */

@media (max-width: 1099px) {
	.myc-steps__list { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}

@media (max-width: 860px) {
	.myc-copy { margin-top: 48px; padding-top: 40px; }
	.myc-copy__intro { font-size: 16.5px; text-align: left; margin-bottom: 32px; }
	.myc-copy__grid { grid-template-columns: 1fr; }
	.myc-copy__card { padding: 26px 22px; }
	.myc-copy__title { font-size: 27px; }
	.myc-copy__sub { font-size: 17px; }
	.myc-steps { margin-top: 56px; }
	.myc-steps__list { grid-template-columns: 1fr; }
	.myc-faqs { margin-top: 60px; }
	.myc-faq .myc-faq__q h3 { font-size: 18px; }
	.myc-faq__q { padding: 20px 2px; gap: 16px; }
	.myc-faq__a { padding: 0 0 22px; }
	.myc-faq .myc-faq__a p { font-size: 15px; line-height: 28px; }
}
}

.myc-villa__head h1 { font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 8px; }
.myc-villa__meta { color: var(--myc-muted); margin: 0 0 26px; }

/* The photo carousel, same look as the MetaSlider one on the yacht pages:
   16:9 slides, 17px radius, 30px gap, round white arrows, lightbox on click. */

/* Swiper drives the carousel: an endless loop with the active slide centred
   and the neighbours peeking on both sides, like the yacht slider. The
   --plain block below is the no-JS / no-Swiper fallback. */
/*
 * One photo at a time, full width. The !important flags are deliberate: page
 * caches on this site outlive a deploy by up to half an hour while every
 * cached page shares this one stylesheet, so these rules must flatten any
 * older carousel markup (flex strips, Swiper classes) into the same simple
 * slider. villas.js switches the visible slide with inline styles; without
 * JS only the first photo shows, which is fine.
 */
.myc-carousel { position: relative; margin-bottom: 40px; overflow: hidden; }
.myc-carousel .myc-carousel__track {
	display: block !important;
	overflow: hidden !important;
	padding: 0 !important;
}
.myc-carousel .myc-carousel__slide.myc-carousel__slide {
	position: relative;
	width: 100% !important;
	flex: none !important;
	aspect-ratio: 16 / 9;
	border-radius: 17px;
	overflow: hidden;
	background: var(--myc-bg);
	display: none;
	cursor: zoom-in;
	transform: none !important;
	margin: 0 !important;
}
.myc-carousel .myc-carousel__slide.myc-carousel__slide:first-child { display: block; }
.myc-carousel__slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.myc-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--myc-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(10, 16, 74, .18);
	z-index: 2;
	transition: color .15s ease, background .15s ease;
}
.myc-carousel__nav:hover { color: var(--myc-gold-dark); background: #fff; }
.myc-carousel__nav--prev { left: 18px; }
.myc-carousel__nav--next { right: 18px; }

.myc-villa__layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr); gap: 48px; align-items: start; }
.myc-villa__section { margin-bottom: 36px; }
.myc-villa__section h2 { font-size: 21px; margin: 0 0 14px; }
.myc-villa__description { color: #3c4653; line-height: 1.7; }

.myc-amenities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 20px; }
.myc-amenities li { position: relative; padding-left: 20px; color: #3c4653; font-size: 15px; }
.myc-amenities li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--myc-gold); }

.myc-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.myc-facts li { background: var(--myc-bg); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.myc-facts span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--myc-muted); }
.myc-facts strong { font-family: "Poppins", sans-serif; color: var(--myc-navy); }

/* -------------------------------------------------------- about-villa tabs */

.myc-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 18px;
	border-bottom: 1px solid var(--myc-line);
}
.myc-tabs__tab {
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	padding: 10px 16px;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--myc-navy);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.myc-tabs__tab:hover { color: var(--myc-gold); }
.myc-tabs__tab.is-active { color: var(--myc-gold-dark); border-bottom-color: var(--myc-gold); }
.myc-tabs__panel { display: none; color: #3c4653; line-height: 1.7; }
.myc-tabs__panel.is-active { display: block; }
.myc-tabs__panel p { margin: 0 0 1em; }
.myc-tabs__panel p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- booking column */

.myc-booking {
	position: sticky;
	top: 100px;
	background: #fff;
	border: 1px solid var(--myc-line);
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 16px 40px rgba(10, 16, 74, .08);
}
.myc-booking__price { margin: 0 0 16px; display: flex; align-items: baseline; gap: 8px; }
.myc-booking__price strong { font-size: 28px; font-family: "Poppins", sans-serif; color: var(--myc-navy); }
.myc-booking__price span { font-size: 13px; color: var(--myc-muted); }

.myc-quote { background: var(--myc-bg); border-radius: 12px; padding: 16px; margin-bottom: 18px; font-size: 14px; }
.myc-quote--blocked { background: #fdf6ec; }
.myc-quote p { margin: 0 0 8px; }
.myc-quote p:last-child { margin-bottom: 0; }
.myc-quote__line, .myc-quote__total { display: flex; justify-content: space-between; gap: 12px; }
.myc-quote__total strong { font-family: "Poppins", sans-serif; color: var(--myc-navy); font-size: 18px; }
.myc-quote__note { color: var(--myc-muted); font-size: 12px; }

.myc-form__title { font-size: 18px; margin: 0 0 14px; }
.myc-form__row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.myc-form__row label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--myc-muted); }
.myc-form__note { font-size: 12px; color: var(--myc-muted); margin: 12px 0 0; text-align: center; }
.myc-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.myc-notice { background: var(--myc-bg); border-left: 3px solid var(--myc-gold); padding: 12px 14px; border-radius: 8px; font-size: 14px; }
.myc-notice--ok { background: #eef7f0; border-left-color: #3f8f5e; }
.myc-notice--error { background: #fdf0ef; border-left-color: #c0564b; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.myc-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.myc-search .myc-button { grid-column: 1 / -1; }
	.myc-villa__layout { grid-template-columns: 1fr; gap: 32px; }
	.myc-booking { position: static; }
}

@media (max-width: 640px) {
	.myc-villas, .myc-villa { padding: 36px 18px 60px; }
	.myc-search { grid-template-columns: 1fr; }
	.myc-grid { grid-template-columns: 1fr; }
	.myc-carousel .myc-carousel__slide.myc-carousel__slide { border-radius: 12px; }
	.myc-carousel__nav { width: 38px; height: 38px; }
	.myc-carousel__nav--prev { left: 10px; }
	.myc-carousel__nav--next { right: 10px; }
}

.myc-reset { margin: 14px 0 0; font-size: 13px; text-align: right; }
.myc-reset a { color: var(--myc-muted); text-decoration: underline; }
.myc-reset a:hover { color: var(--myc-gold); }

/* ----------------------------------------------------- similar villas, 1 Sep 2026 */
/* Anna's cross-linking spec: a "Similar villas" block on every villa page,
   placed after the two-column layout (main content + sticky booking form)
   so it gets the full 1240px .myc-villa container width, same as .myc-villas
   on the /villas/ catalogue. Renders through myc_render_villa_card(), the
   exact same .myc-grid / .myc-card markup the catalogue uses (no separate
   card variant here any more), so the cards cannot visually drift from the
   archive. Responsive behaviour (3 columns down to 1) comes for free from
   the shared .myc-grid rules above. */

.myc-similar { margin-top: 8px; }
.myc-similar .myc-grid { margin: 0 0 22px; }

.myc-similar__backlink {
	margin: 0;
	color: var(--myc-muted);
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
}
.myc-similar__backlink a {
	color: var(--myc-navy);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--myc-gold);
}
.myc-similar__backlink a:hover { color: var(--myc-gold-dark); }