:root {
	  --font-primary: "Lora", sans-serif;
	  --font-secondary: "Playfair Display", sans-serif;
	  --color-accent-1: #2B5346; /*Verde*/
	  --color-accent-2: #BC9277; /*Beige*/
	  --color-light-1: #F8F5F0; 
	  --color-light-2: #EDF5F3; 
	  --color-dark-1: #05073C;
	  --color-dark-2: #1D3334;
	  --color-dark-3: #0E1D1E;
	  --color-info-1: #CDE9F6;
	  --color-info-2: #4780AA;
	  --color-warning-1: #F7F3D7;
	  --color-warning-2: #927238;
	  --color-error-1: #ECC8C5;
	  --color-error-2: #AB3331;
	  --color-success-1: #DEF2D7;
	  --color-success-2: #5B7052;
	}

	a:hover{ color: var(--color-accent-2)}

	body{ color: var(--color-accent-1) !important }

	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ font-style: italic; }
	.fs-22{ font-size: 22px }
	.border-0 { border: 0px !important }
	.text-verde{ color: var(--color-accent-1) !important }

	.menuFullScreen__right{ background-color: var(--color-light-1); }

	.header.-h-110 { height: 150px; }
	.header .header__logo img{ max-height: 130px; top: 0px; position: relative; }
	.header.is-sticky .header__logo img{ max-height: 80px; top: 0px; position: relative; }
	.header.is-sticky.-h-110 { height: 110px; }
	.header .desktopNav__item > a{ color: #FFF }
	.header.is-sticky .desktopNav__item > a{ color: var(--color-accent-1) }
	.header.-blur {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	header button{ color: var(--color-accent-1) }
	header a{ color: var(--color-accent-1) }
	header .svg.background{ 
		transform: rotate(180deg);
		transform-origin: 50% 50%;
		position: absolute;
		background: url(../images/bg/pattern.svg) no-repeat;
		background-size: cover;
		opacity: 0.8;
		z-index: 0;
		height: 150px;
		background-position: 50% 0px;
	}
	.header__container { position: relative; z-index: 1; }

	header{ 
		/*background: transparent url(../images/bg/header-bg.png) no-repeat;
		background-size: cover;
		background-position: bottom; */
		background: rgba(255,255,255,0) !important
	}

	.header.is-sticky {
	  background: rgba(255,255,255,1) !important;
	  opacity: 1 !important;
	}

	.alt-font{ font-family: var(--font-secondary) }

	.testoSEO{ position: absolute; text-indent: -9999px; }

	.footer.-type-3 .footer__main{ padding: 100px 0; }
	.footer.-type-3 .footer__grid { grid-template-columns: 360px 333px 1fr 1fr; }
	.footer.-type-2 .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
	.footer.-type-2.bg-accent-2{ 
		background: url("../images/bg/skiline-footer.png") no-repeat; 
		border: 0;
		background-size: cover;
		background-position: center;
		background-color: transparent !important;
	}
	


	/* .iconsvg-mountain{ background: url(../images/icon/mountain.svg) no-repeat; } */
	/* .iconsvg-hotel{ background: url(../images/icon/hotel.svg) no-repeat; } */
	/* .iconsvg-restaurant{ background: url(../images/icon/restaurant.svg) no-repeat; } */
	/* .iconsvg-spa{ background: url(../images/icon/spa.svg) no-repeat; } */

	.iconsvg-mountain{ background: url(../images/icon/mountain.png) no-repeat; }
	.iconsvg-hotel{ background: url(../images/icon/hotel.png) no-repeat; }
	.iconsvg-restaurant{ background: url(../images/icon/restaurant.png) no-repeat; }
	.iconsvg-spa{ background: url(../images/icon/spa.png) no-repeat; }

	.bg-logo-sfondo{
		background: url(../images/bg/bg-logo-sfondo.png)  no-repeat;
		background-size: contain;
		background-position: center;
	}

	.bg-logo-sfondo-2{
		background: url(../images/bg/bg-logo-sfondo-2.png)  no-repeat;
		background-size: contain;
		background-position: center;
	}

	.bg-accent-3{ background-color: var(--color-light-1) !important; }

	.button.-type-2.text-white::before { background-color: #FFF; }

	/*HOME PAGE*/
		
		.bg-intro{ background: url(../images/bg/bg-intro.png) no-repeat;
		background-position-x: 0%;
		background-position-y: 0%;
		background-position: center 0;
		position: absolute;
		z-index: 100;
		padding-top: 160px;
		margin-top: -160px; }
		
		.feature-box { padding: 0 50px; }
		.feature-box .feature-box-icon { text-align: center; margin-bottom: 20px  }
		.feature-box .feature-box-icon [class*=" iconsvg-"], .feature-box .feature-box-icon [class^="iconsvg-"]{ 
			text-align: center;
			display: block;
			/* width: 50px; */
			/* height: 50px; */
			width: 100px;
			height: 100px;
			background-size: contain;
			align-content: center;
			/* margin: 0px auto 20px auto;   */
			margin: 0px auto 0px auto;  
		}
		.feature-box .feature-box-content{ text-align: center; margin-bottom: 50px }
		
		.home-section-img-centrali{ padding-top: 250px !important; }
		
		.videobackground .cta__bg div{
		position: relative;
		overflow: hidden;
	}
		
		.videobackground .cta__bg div::after{ content: " ";
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		user-select: none;
		pointer-event: none;
		opacity: 0.6;
		background: rgb(0,0,0);
		transition: all .3s; }

	.searchForm.-type-3 .searchFormItemDropdown.is-active {
		z-index: 2000 !important;
	}


	.searchForm.-type-3 .searchFormItemDropdown__container {
		background: #fff;
	}

	.searchForm.-type-3 .searchFormItem__button > *:nth-child(1) {
		width: 200px;
	}

	.roomCard.-type-2 .roomCard__price {
		position: absolute;
		top: 20px;
		right: 20px;
		left: unset;
		border-radius: 16px 0 16px 0;
		line-height: 0.65;
		padding: 10px 10px;
	}

	.bg-appartamenti {
		background: #2B5346;
		color: #F8F5F0;
	}
	.bg-appartamenti h3.roomCard__title {
		color: #F8F5F0;
	}

	.bg-appartamenti p {
		color: #F8F5F0;
	}



	.pageHero.-type-3 {
	  position: relative;
	  height: 400px;
	  padding-top: 140px;
	  z-index: 0;
	}

	@media (max-width: 767px) {
	  .pageHero.-type-3 {
		height: auto;
		padding-top: 220px; 
		padding-bottom: 50px;
	  }
	}

	@media (max-width: 575px) {
	  .pageHero.-type-3 {
		padding-top: 120px;
	  }
	}

	.pageHero.-type-3 .pageHero__bg {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: -1;
	}

	.pageHero.-type-3 .pageHero__bg img {
	  width: 100%;
	  height: 100%;
	  -o-object-fit: cover;
		 object-fit: cover;
	}
	
	.hero__slider .hero__bg #video {
	  width: 100%;
	  height: 100vh;
	  -o-object-fit: cover;
		 object-fit: cover;
	}

	.hero__slider .hero__bg .overlay-bg-scuro{
		content: "";
		position: absolute;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 100;
	}
	
	

	.pageHero.-type-3 .pageHero__content {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  height: 100%;
	}

	.pageHero.-type-3 .pageHero__title {
	  font-size: 92px;
	  line-height: 0.65;
	}

	@media (max-width: 991px) {
	  .pageHero.-type-3 .pageHero__title {
		line-height: 1.2;
	  }
	}

	@media (max-width: 767px) {
	  .pageHero.-type-3 .pageHero__title {
		font-size: 68px;
	  }
	}

	@media (max-width: 575px) {
	  .pageHero.-type-3 .pageHero__title {
		font-size: 50px;
	  }
	}

	.pageHero.-type-3 .pageHero__text {
	  width: 500px;
	  max-width: 100%;
	  margin: 0 auto;
	  margin-top: 50px;
	}

	@media (max-width: 991px) {
	  .pageHero.-type-3 .pageHero__text {
		margin-top: 30px;
	  }
	}

	.pageHero.-type-3 .pageHero__filter {
	  position: absolute;
	  bottom: 60px;
	  left: 50%;
	  transform: translateX(-50%);
	}

	@media (max-width: 767px) {
	  .pageHero.-type-3 .pageHero__filter {
		position: relative;
		bottom: unset;
		left: unset;
		transform: none;
		display: flex;
		justify-content: center;
		padding: 0 20px;
		margin-top: 40px;
	  }
	}

	@media (max-width: 991px) {
	  .pageHero.-type-3.-items-center {
		height: auto;
		padding-top: 180px;
		padding-bottom: 100px;
	  }
	}

	@media (max-width: 767px) {
	  .pageHero.-type-3.-items-center {
		padding-top: 150px;
		padding-bottom: 70px;
	  }
	}

	.baseCard {
	  display: flex;
	  flex-direction: column;
	  height: 100%; /* importante */
	}


	.weather-card {
		background: #fff;
		border-radius: 16px;
		padding: 1.5rem;
		box-shadow: 0 8px 20px rgba(0,0,0,0.08);
		text-align: center;
		height: 100%;
		font-family: var(--bs-body-font-family);
	}
	.day-name, .weather-card .description {
		font-size: 1.1rem;
		font-weight: 600;
		font-family: var(--bs-body-font-family);
	}
	.description {
		font-size: 0.9rem;
		color: #666;
	}
	.weather-icon {
		font-size: 48px;
		color: #f5c542;
		margin: 1rem 0;
	}
	.weather-icon {
		width: 70px;
		margin: 0 auto;
	}
	.temp .min { color: #0d6efd; font-weight: bold; }
	.temp .max { color: #dc3545; font-weight: bold; }
	.weather-details {
		font-size: 0.9rem;
		text-align: left;
		margin-top: 1rem;
	}
	.weather-details i {
		width: 20px;
		text-align: center;
		margin-right: 6px;
		color: #666;
	}

	.gap-4 {
		gap: 1.5rem !important;
	}
	
	.shadow-lg {
		box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
	}
	
	.weather-details p {
		margin-top: 0;
		margin-bottom: 1rem;
		font-family: var(--bs-body-font-family);
	}


/* ==========================================================================
   MOBILE RESPONSIVE OVERRIDES
   Appended: 2026-03-04
   Breakpoints: 991px (tablet), 767px (mobile landscape), 575px (mobile portrait)
   ========================================================================== */

/* ------------------------------------------------------------------
   18. Overflow prevention - prevent horizontal scroll on all devices
   ------------------------------------------------------------------ */
html, body {
	overflow-x: hidden;
}

/* ------------------------------------------------------------------
   TABLET - max-width: 991px
   ------------------------------------------------------------------ */
@media (max-width: 991px) {

	/* 14. Section padding reduction */
	.layout-pt-lg {
		padding-top: 80px !important;
	}
	.layout-pb-lg {
		padding-bottom: 80px !important;
	}
	.layout-pt-xl {
		padding-top: 100px !important;
	}
	.layout-pb-xl {
		padding-bottom: 100px !important;
	}

	/* 10. Search form in hero - stack vertically */
	.searchForm.-type-1 {
		flex-direction: column !important;
	}
	.searchForm.-type-1 .searchFormItem {
		width: 100% !important;
		border-right: none !important;
		border-bottom: 1px solid #eee;
		padding: 10px 15px !important;
	}
	.searchForm.-type-1 .searchFormItem:last-child {
		border-bottom: none;
	}
	.searchForm.-type-1 .button {
		width: 100% !important;
		margin-top: 10px;
	}

	/* 11. Room detail sidebar full width on tablet */
	.sidebar.-rooms-single {
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 40px;
	}

	/* 12. Instagram image grid - 3 per row on tablet */
	.imageGrid.-type-2 {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	/* 13. CTA video section shorter on tablet */
	.cta.-type-1.videobackground iframe {
		height: 60vh !important;
	}
}

/* ------------------------------------------------------------------
   MOBILE LANDSCAPE - max-width: 767px
   ------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* 1. Header height and logo reduction */
	.header.-h-110 {
		height: 80px !important;
	}
	.header .header__logo img {
		max-height: 50px !important;
	}
	.header.is-sticky.-h-110 {
		height: 70px !important;
	}
	.header.is-sticky .header__logo img {
		max-height: 45px !important;
	}
	header .svg.background {
		height: 80px !important;
	}

	/* 2. Hero video aspect ratio handling */
	.hero__slider .hero__bg #video {
		height: 75vh;
	}
	.hero__slider .hero__bg .overlay-bg-scuro {
		height: 75vh;
	}

	/* 4. Home section images padding reduction */
	.home-section-img-centrali {
		padding-top: 80px !important;
	}

	/* 5. Footer grid - logo full width, menu+contatti side by side, seguici full width */
	.footer.-type-2 .footer__grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 30px;
	}
	.footer.-type-2 .footer__grid > div:first-child {
		grid-column: 1 / -1;
	}
	.footer.-type-2 .footer__grid > div:last-child {
		grid-column: 1 / -1;
	}
	.footer.-type-3 .footer__grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 30px;
	}
	.footer.-type-3 .footer__grid > div:first-child {
		grid-column: 1 / -1;
	}
	.footer.-type-3 .footer__grid > div:last-child {
		grid-column: 1 / -1;
	}

	/* Footer tutto centrato su mobile */
	.footer.-type-2 .footer__grid > div,
	.footer.-type-3 .footer__grid > div {
		text-align: center;
	}
	.footer.-type-2 .footer__grid .d-flex,
	.footer.-type-3 .footer__grid .d-flex {
		justify-content: center;
	}
	.footer.-type-2 .footer__grid .d-flex.flex-column,
	.footer.-type-3 .footer__grid .d-flex.flex-column {
		align-items: center;
	}
	.footer.-type-2 .footer__grid .row,
	.footer.-type-3 .footer__grid .row {
		justify-content: center !important;
	}

	/* Osteria slider nav - hide pagination dots, arrows centered together */
	.osteria-slider-nav .js-slider1-pagination,
	.osteria-slider-nav .pagination {
		display: none !important;
	}
	.osteria-slider-nav {
		justify-content: center !important;
		gap: 15px;
	}

	/* Header gradient background mobile - white to transparent top-down */
	header:not(.is-sticky) {
		background: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.4) 60%, rgba(255,255,255,0) 100%) !important;
	}
	header.is-sticky {
		background: rgba(255,255,255,1) !important;
	}
	.footer.-type-3 .footer__main {
		padding: 60px 0;
	}

	/* Hero mobile: hide YouTube video, show static background image */
	.hero.-type-10 .hero__bg {
		background-image: url('../images/slide/home.jpg') !important;
		background-size: cover !important;
		background-position: center center !important;
	}
	.hero.-type-10 .hero__bg #video {
		display: none !important;
	}
	.hero.-type-10 .hero__bg .overlay-bg-scuro {
		width: 100% !important;
		height: 100% !important;
		top: 0 !important;
		left: 0 !important;
	}
	.hero-logo {
		width: 150px !important;
	}

	/* 6. Contatti page map stacking */
	.sectionBg.col-md-6.-left {
		min-height: 300px !important;
		height: 300px !important;
	}
	.sectionBg.col-md-6.-left iframe {
		height: 300px !important;
	}

	/* 7. Blog sidebar full width */
	.col-auto.sidebar,
	aside.col-auto {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-top: 40px;
	}

	/* 9. All iframe elements responsive */
	iframe {
		max-width: 100% !important;
	}

	/* 12. Instagram image grid - 2 per row */
	.imageGrid.-type-2 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* 13. CTA video section - stack video + text vertically */
	.cta.-type-1.videobackground {
		display: flex !important;
		flex-direction: column !important;
		height: auto !important;
		min-height: auto !important;
	}
	.cta.-type-1.videobackground .cta__bg {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
	}
	.cta.-type-1.videobackground iframe {
		height: 220px !important;
	}
	.videobackground .cta__bg div::after {
		display: none !important;
	}
	.cta.-type-1.videobackground > .container {
		position: relative !important;
		background: none !important;
		padding: 30px 15px !important;
	}
	.cta.-type-1.videobackground > .container * {
		color: var(--color-accent-1, #122223) !important;
	}

	/* Attivita - video iframe height responsive */
	iframe.video-embed-responsive {
		height: 300px !important;
	}

	/* Camera detail - room info icons wrap on mobile */
	.d-flex.x-gap-50,
	.d-flex.x-gap-50.md\:x-gap-20 {
		flex-wrap: wrap;
		gap: 10px 20px !important;
	}

	/* 14. Section padding further reduction */
	.layout-pt-lg {
		padding-top: 50px !important;
	}
	.layout-pb-lg {
		padding-bottom: 50px !important;
	}
	.layout-pt-xl {
		padding-top: 60px !important;
	}
	.layout-pb-xl {
		padding-bottom: 60px !important;
	}
	.layout-pt-md {
		padding-top: 40px !important;
	}
	.layout-pb-md {
		padding-bottom: 40px !important;
	}

	/* 15. Page hero title readability */
	.pageHero__title {
		word-break: break-word;
		overflow-wrap: break-word;
	}

	/* 16. Room card icon row */
	.roomCard .d-flex.x-gap-20 {
		gap: 8px !important;
		flex-wrap: wrap;
		justify-content: center !important;
	}

	/* 19. Mobile fullscreen menu */
	.menuFullScreen__topMobile {
		padding: 15px 20px;
	}

	/* 8. Weather cards - 2 per row */
	.d-flex.flex-wrap.justify-content-center.gap-4 > .weather-card,
	.d-flex.flex-wrap.justify-content-center.gap-4 > div {
		flex: 0 0 calc(50% - 0.75rem) !important;
		max-width: calc(50% - 0.75rem) !important;
	}

	/* 11. Room single image grid */
	.roomsSingleGrid.-type-1 {
		grid-template-columns: 1fr !important;
	}

	/* bg-intro: torna nel flusso su mobile */
	.bg-intro {
		position: relative !important;
		padding-top: 30px !important;
		margin-top: 0 !important;
		background-position: center -16% !important;
	}
	.feature-box .feature-box-icon {
		margin-bottom: 0 !important;
	}
	.icon-with-text-style-10:first-child {
		padding-top: 60px !important;
	}
	section.pt-20.bg-white.pb-40 {
		padding-bottom: 0 !important;
	}
}

/* ------------------------------------------------------------------
   MOBILE PORTRAIT - max-width: 575px
   ------------------------------------------------------------------ */
@media (max-width: 575px) {

	/* 3. Feature box padding */
	.feature-box {
		padding: 0 15px !important;
	}
	.feature-box .feature-box-content {
		margin-bottom: 30px;
	}
	.feature-box .feature-box-icon [class*=" iconsvg-"],
	.feature-box .feature-box-icon [class^="iconsvg-"] {
		width: 70px;
		height: 70px;
	}

	/* 4. Home section images padding further reduction */
	.home-section-img-centrali {
		padding-top: 50px !important;
	}

	/* 8. Weather cards full width */
	.d-flex.flex-wrap.justify-content-center.gap-4 > .weather-card,
	.d-flex.flex-wrap.justify-content-center.gap-4 > div {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	/* 14. Section padding minimal */
	.layout-pt-lg {
		padding-top: 35px !important;
	}
	.layout-pb-lg {
		padding-bottom: 35px !important;
	}
	.layout-pt-xl {
		padding-top: 40px !important;
	}
	.layout-pb-xl {
		padding-bottom: 40px !important;
	}

	/* 15. Very small screen title sizes */
	.pageHero.-type-3 .pageHero__title {
		font-size: 36px !important;
		line-height: 1.1;
	}
	.text-92 {
		font-size: 36px !important;
	}
	.text-64 {
		font-size: 28px !important;
	}

	/* 16. Room card icon row - tighter on very small */
	.roomCard .d-flex.x-gap-20 {
		gap: 5px !important;
	}
	.roomCard .d-flex.x-gap-20 > * {
		font-size: 13px;
	}

	/* 17. Touch-friendly buttons */
	.button.-md {
		min-height: 44px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.button.-sm {
		min-height: 44px;
	}
	a.button,
	button.button {
		min-height: 44px;
	}

	/* 20. Activity page card text readability */
	.col-12.col-lg-3.col-md-4.col-sm-6 .baseCard,
	.col-12.col-lg-3.col-md-4.col-sm-6 .roomCard {
		font-size: 14px;
	}

	/* Search form items on small screens */
	.searchForm.-type-3 .searchFormItem__button > *:nth-child(1) {
		width: 100% !important;
	}

	/* Footer background adjust */
	.footer.-type-2.bg-accent-2 {
		background-size: cover;
		background-position: center bottom;
	}

	/* Hero slider reduced height on small screens */
	.hero__slider .hero__bg #video {
		height: 60vh;
	}
	.hero__slider .hero__bg .overlay-bg-scuro {
		height: 60vh;
	}

	/* pt-100 offset reduction for feature sections */
	.pt-100 {
		padding-top: 0px !important;
	}
}

/* ------------------------------------------------------------------
   EXTRA SMALL - max-width: 375px (iPhone SE, small devices)
   ------------------------------------------------------------------ */
@media (max-width: 375px) {

	/* 15. Title readability on very small screens */
	.pageHero.-type-3 .pageHero__title {
		font-size: 28px !important;
	}
	.text-92 {
		font-size: 28px !important;
	}
	.text-64 {
		font-size: 24px !important;
	}

	/* Header even more compact */
	.header.-h-110 {
		height: 70px !important;
	}
	.header .header__logo img {
		max-height: 40px !important;
	}

	/* Feature box minimal */
	.feature-box {
		padding: 0 10px !important;
	}

	/* Weather card spacing */
	.weather-card {
		padding: 1rem;
	}
}


/* Override colore testo per bottoni -type-1 (default browser su mobile = blu) */
.button.-type-1,
a.button.-type-1,
a.button.-type-1:hover,
a.button.-type-1:visited {
	color: #122223;
	text-decoration: none;
}


/* Mobile: footer copyright e credits centrati */
@media (max-width: 575px) {
	.footer__bottom .text-left {
		text-align: center !important;
	}
}