.dropcap-mini {
	float: left;
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
	margin: 5px 15px 0 0;
}

.dropcap-text {
	padding: 10px;
	white-space: nowrap;
	font-size: 14px;
}

.box {
	max-width: 720px;
	padding: 0 70px !important;
}

/* Villa Uhland CSS */

.vu-year {
	margin: 1px;
}

.vu-magnifier {
	position: absolute;
	background: white;
	padding: 18px 18px;
	margin: 1px;
	border: thin;
}

.vu-responsive-img {
	width: 100%;
	height: auto;
	display: block;
}

.vu-img-mobile { padding: 50px 0px; }
.vu-mobile-only { display: none; }

.vu-box-banner-img { width: 700px; }

.vu-flag {
	width: 20px;
	height: 15px;
	display: inline-block;
	vertical-align: middle;
	border: 1px solid rgba(0, 0, 0, 0.08);
	object-fit: cover;
}

/* Phone numbers must never break to a second line, anywhere. */
a[href^="tel:"] {
	white-space: nowrap;
}

/* Keep the contact strip pinned to the top while the page scrolls.
   We use position:fixed (instead of sticky) because body has
   display:flex / height:100% in skin-red.css, which can disable
   CSS sticky. body gets an initial padding-top here so content is
   never hidden under the topBar before main.js fine-tunes it. */
body {
	padding-top: 42px;
}

.topBar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1031;
	/* Promote to its own compositor layer so MIUI/Android Chrome
	   don't repaint the bar each scroll tick while the URL bar
	   collapses — without this, the bar jiggles on Xiaomi devices. */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.topBar ul.topBarNav li ul.w-150 li a {
	white-space: nowrap;
	padding-left: 12px;
	padding-right: 12px;
}

/* Feature list: icon + text rows that align on every viewport */
.vu-feature-list {
	list-style: none;
	padding: 0;
	margin: 0 0 18px 0;
}

.vu-feature {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	line-height: 1.4;
}

.vu-feature .dropcap-mini {
	float: none;
	flex: 0 0 30px;
	margin: 0 14px 0 0;
}

.vu-feature .dropcap-text {
	flex: 1;
	padding: 0;
	white-space: normal;
	font-size: 14px;
}

@media screen and (max-width: 991px) {

	.breadcrumbs,
	.vu-desktop-only {
		display: none !important;
	}

	.topBar .vu-contact-info {
		float: left;
		margin: 0;
	}

	.topBar .vu-contact-info > li {
		display: inline-block;
		padding: 0 8px 0 0;
		font-size: 12px;
		line-height: 38px;
	}

	.topBar .vu-contact-info > li a {
		display: inline !important;
	}

	.vu-mobile-only { display: block; }
	.vu-box { padding: 70px 20px 100px !important; }

	.vu-box-banner-img { width: 347px; }

	/* On mobile the Swiper carousel is converted to a plain stacked list.
	   Fighting Swiper's flex/transform layout was unreliable; stacking is
	   simpler and gives a better mobile UX. */
	.swiper-container.swiper-coverflow {
		height: auto !important;
		overflow: visible !important;
	}

	.swiper-container.swiper-coverflow .swiper-wrapper {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		transform: none !important;
		-webkit-transform: none !important;
		-ms-transform: none !important;
	}

	.swiper-container.swiper-coverflow .swiper-slide {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		flex-shrink: 1 !important;
		margin: 0 0 8px !important;
		text-align: left !important;
		position: relative !important;
		left: 0 !important;
	}

	.swiper-container.swiper-coverflow .slider-content {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		padding: 20px 0 24px !important;
	}

	.swiper-container.swiper-coverflow .slider-content .box:not(.vu-desktop-only) {
		display: block !important;
		width: 100% !important;
		max-width: 640px !important;
		margin: 0 auto !important;
		padding: 4px 22px !important;
		text-align: left !important;
		vertical-align: baseline !important;
	}

	.swiper-container.swiper-coverflow .slider-content .box.vu-desktop-only {
		display: none !important;
	}

	.swiper-container.swiper-coverflow .swiper-button-prev,
	.swiper-container.swiper-coverflow .swiper-button-next,
	.swiper-container.swiper-coverflow .swiper-pagination {
		display: none !important;
	}

	.swiper-container.swiper-coverflow h2.thin {
		margin-top: 0;
	}

	.swiper-container.swiper-coverflow .meta-info {
		margin: 4px 0 14px;
	}

	.swiper-container.swiper-coverflow .btn {
		margin-top: 8px;
	}

	.vu-img-mobile {
		padding: 18px 0 8px;
		max-width: 100%;
	}

	.vu-img-mobile .vu-responsive-img {
		max-width: 100%;
		height: auto;
	}

	.vu-img-mobile .vu-magnifier {
		display: none;
	}

	.vu-feature {
		margin-bottom: 8px;
	}
}

@media screen and (max-width: 480px) {

	.swiper-container .swiper-slide .slider-content .box {
		padding: 8px 16px !important;
	}

	.swiper-button-prev,
	.swiper-button-next {
		display: none;
	}

	.vu-feature .dropcap-mini {
		flex: 0 0 28px;
		height: 28px;
		width: 28px;
		line-height: 28px;
		margin-right: 12px;
	}

	.vu-feature .dropcap-text {
		font-size: 13px;
	}

	.topBar .vu-contact-info > li {
		font-size: 11px;
		padding-right: 6px;
		line-height: 36px;
	}
}

/* Swiper slide content (left text-box + right photo-box) has top/bottom padding of 0 in the skin,
   so the photo on the right side touches the top and bottom edges of the slider. Add vertical
   breathing room on desktop. */
@media (min-width: 767px) {
	.swiper-container .swiper-slide .slider-content .box {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* The skin hardcodes .swiper-container { height: 700px }, which clips content on small monitors
   and after we made the slide taller (new See Photos button + vertical padding). Make the slider
   grow with content: 600px minimum on the slide itself, no upper cap. Paired with autoHeight:true
   in the Swiper init so slide positions recompute when heights change.

   The min-height sits on the SLIDE (not the container) so the slide's flex centering
   (align-items: center, already from the skin) has a frame to vertically centre its content within
   when the content is shorter than 600px. Putting min-height on the container would let the slide
   shrink to content and the slide content would slide to the top of the container instead. */
.swiper-container {
	height: auto !important;
	background-color: #e1e6e6;
}
.swiper-container .swiper-slide {
	height: auto !important;
	min-height: 600px;
}
.swiper-container .swiper-slide .slider-content {
	height: auto !important;
}

/* "See Photos" secondary button on apartment slides — sits next to the primary "Make a reservation"
   button. Add a small left gap so the two buttons don't touch, and stack vertically on small screens. */
.vu-btn-photos {
	margin-left: 8px;
}
@media (max-width: 480px) {
	.vu-btn-photos {
		margin-left: 0;
		margin-top: 8px;
		display: inline-block;
	}
}

/* Desktop: give the Apartments mega-dropdown more vertical breathing room
   so the two stacked sections (Photos + Apartments at Airbnb) don't feel cramped. */
@media (min-width: 767px) {
	.yamm li .dropdown-menu .yamm-content {
		padding-top: 45px !important;
		padding-bottom: 45px !important;
		min-height: 480px;
	}
	.yamm li .dropdown-menu .yamm-content ul li a {
		padding: 11px 0 !important;
	}
	.yamm li .dropdown-menu .yamm-content ul li.title {
		margin: 12px 0 !important;
	}
}