/* Little Place in the Country: Lodgify overrides. How to update: see notes at the bottom. */

/* ==================================================================
   BASE
   ================================================================== */

body {
	background: #FAF9F6 url("https://l.icdbcdn.com/oh/fe373c93-83bf-4a7d-9f73-d0d436362d6d.jpg") no-repeat center 100vh;
	background-size: 1620px;
	font-size: 14px;
}
::selection {
  color: white;
  background: #f55;
}
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 2rem 0 0.5rem }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.1rem; }
p { margin: 0 0 .5em; line-height: 1.5em; }
ul,ol { line-height: 1.5em; }
figure { margin: 0; }

@media only screen and (max-width: 600px) {
	#root h1 {
		font-size: 30px;
		line-height: 1.3em;
	}
}

hr {
	padding: 2rem 0;
	border: 1px solid transparent;
	border-width: 1px 0 0;
	margin: 0 auto;
}

/* Utility classes */
#root .large,
#root .large p,
#root .large ul,
#root .large ol {
	font-size: 20px !important;
}
#root .light { opacity: .65; }
#root .text-center {
	text-align: center;
}
#root .no-top-margin {
	margin-top: 0 !important;
}
#root .no-bottom-margin,
#root .no-bottom-margin figure {
	margin-bottom: 0 !important;
}
#root .no-top-padding {
	padding-top: 0 !important;
}

/* Links. Find: data-testid="widgets.rich-text.content" (HTML blocks), "multiparagraph-html-paragraph" (rental description) */
#root a,
#root a:hover { cursor: pointer !important; pointer-events: auto; }
#root .primary, .primary:hover { color: white !important; }
#root :is([data-testid="widgets.rich-text.content"], [data-testid="multiparagraph-html-paragraph"]) a,
#root .multi-paragraph-read-more { color: #888170; }

#root :is([data-testid="widgets.rich-text.content"], [data-testid="multiparagraph-html-paragraph"]) a:hover,
#root .header-content nav li > a:hover {
	transition: color 0.5s ease;
}
#root :is([data-testid="widgets.rich-text.content"], [data-testid="multiparagraph-html-paragraph"]) a:hover,
#root .header-content nav li > a:hover,
#root header nav li > a.active {
	color: #f55;
}

/* Rounded images. Find: data-testid="theme-wrapper" (whole page) */
#root .property-pictures .image-container .responsive-image-wrapper.gallery-thumbnail .image,
#root [data-testid="theme-wrapper"] .ui.thumbnail .responsive-image-wrapper,
#root [data-testid="theme-wrapper"] .ui.thumbnail.gallery-thumbnail,
#root [data-testid="theme-wrapper"] .ui.card,
#root [data-testid="theme-wrapper"] .ui.cards>.card,
#root [data-testid="theme-wrapper"] .html-container img,
#root [data-testid="theme-wrapper"] .ui.image,
#root [data-testid="theme-wrapper"] .image-container,
#root [data-testid="theme-wrapper"] .responsive-image-wrapper {
	border-radius: 8px;
}

/* Section dividers */
#root div.no-line { display: none; }

/* Show Lodgify's 'View more' text in full */
#root .multi-paragraph { max-height: none; overflow: visible; }
#root .multi-paragraph-read-more:before { background: none; }
#root .multi-paragraph-read-more { text-align: left; display: none; }


/* ==================================================================
   HEADER
   Find: <header data-testid="header">
   ================================================================== */

#root header[data-testid="header"] {
	padding-top: 0;
}
#root [data-testid="theme-wrapper"] header {
	padding-top: 0;
	margin-bottom: 0;
}

/* Logo. Find: data-testid="logo.image-wrapper", "logo.image-img" */
#root .logo-subtext {
	display: none;
}
#root header [data-testid="logo.image-wrapper"].isLoaded .image:hover {
	filter: saturate(14) hue-rotate(317deg);
}
#root header [data-testid="logo.image-img"] {
	transition: none;
}

/* Desktop menu */
#root header .header-content ul {
	gap: 0;
	font-size: 14px;
	padding: 0;
}
#root .header-content nav li > a {
	display: inline-block;
	padding: 6px 10px 4px;
	border-radius: 8px;
}
/* Last menu link as a button ('All Sites'); skips the GBP currency picker */
#root .header-content li:nth-last-child(1 of :has(> a)) > a {
	margin-left: 1rem;
	padding: 5px 10px 3px;
	box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.07);
	border: 1px solid rgba(0, 0, 0, 0.1);
	transition: background .2s ease-in-out !important;
}
#root .header-content li:nth-last-child(1 of :has(> a)) > a::after {
	display: none;
}
#root .header-content li:nth-last-child(1 of :has(> a)) > a:hover {
	color: white;
	background: #f55;
	border-color: transparent;
}

/* Mobile menu. Find: data-testid="sliding-menu" */
#root header ul.orientation-vertical {
	gap: 1rem;
	font-size: 16px;
}
#root header ul.orientation-vertical a { color: #888; }
#root header ul.orientation-vertical a.active { color: #f55; }
#root header ul.orientation-vertical li:last-child a {
	margin: 1rem 0 0 0;
}
@media only screen and (max-width: 1080px) {
	#root [data-testid="theme-wrapper"] header { height: 80px; min-height: 80px; }
	#root [data-testid="sliding-menu"] .sliding-menu-wrapper { height: 80px; }
}


/* ==================================================================
   FOOTER
   Find: <div data-testid="component-resolver.Footer">
   ================================================================== */

#root .layout-viewport footer { margin-top: 5rem; }
#root .rights span { display: none; }

/* Both footer bands */
#root footer > div {
	background: transparent;
}
/* Link columns */
#root footer nav {
	padding: 30px 10px;
	gap: 2rem;
	justify-content: space-between;
 }
#root footer nav > div > span,
#root footer nav > div > a { padding: 0.5rem 1rem; }
/* Bottom bar */
#root footer > div:last-child > div {
	padding: 0 20px;
}
/* Address and copyright */
#root footer div:has(> .address-and-contact) { display: block; gap: 1rem; columns: 2; }
#root footer div:has(> .address-and-contact) .address-and-contact,
#root footer div:has(> .address-and-contact) .rights {
	max-width: none;
}
#root footer div:has(> .address-and-contact) .rights {
	text-align: right;
}
#root footer div:has(> .address-and-contact) .address-and-contact .footer-element,
#root footer div:has(> .address-and-contact) .rights {
	margin: 5px;
}
@media only screen and (max-width: 1080px) {
	#root footer div:has(> .address-and-contact) { columns: 1; }
	#root footer div:has(> .address-and-contact) .rights { text-align: left; }
}


/* ==================================================================
   HOMEPAGE
   ================================================================== */

/* Hero slideshow. Find: data-testid="widgets.hero-widget" */
#root [data-testid="widgets.hero-widget"],
#root [data-testid="widgets.hero-widget"] [data-testid="responsive-image-img"] {
	height: calc(100vh - 110px);
	max-height: none;
	margin-bottom: 0;
}
@media only screen and (max-width: 1080px) {
	#root [data-testid="widgets.hero-widget"],
	#root [data-testid="widgets.hero-widget"] [data-testid="responsive-image-img"] {
		height: calc(100vh - 80px);
	}
}
#root [data-testid="widgets.hero-widget"] {
	padding: 0;
}
/* Square corners. Find: data-testid="widgets.hero-widget.carousel" (rounded itself, plus its children) */
#root [data-testid="widgets.hero-widget.carousel"],
#root [data-testid="widgets.hero-widget.carousel"] * {
	border-radius: 0 !important;
}
#root [data-testid="widgets.hero-widget"] h1 {
	font-size: 28px;
	max-width: 1000px;
	font-family: "Comfortaa", Helvetica, Arial, sans-serif;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, .8)
}
@media only screen and (max-width: 600px) { #root [data-testid="widgets.hero-widget"] h1 { font-size: 18px; line-height: 1.8em; } }
/* Slideshow arrow icons. Find: data-testid="carousel.arrows" (the <svg> inside each button) */
#root [data-testid="widgets.hero-widget"] [data-testid="carousel.arrows"] svg {
	background: rgb(166, 146, 121);
	border-radius: 100% !important;
	transform: scale(1.5);
	opacity: .5;
}
#root [data-testid="widgets.hero-widget"] [data-testid="carousel.arrows"] svg:hover {
	opacity: 1;
}

/* --- Your HTML blocks (classes you set; these don't change) --- */

/* Check availability button */
#root .check-availibilty-container {
	text-align: center;
	position: absolute;
	z-index: 1;
	top: -145px;
	left: 0;
	right: 0;
}
#root .check-availibilty-container a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .6rem;
	color: white;
	border-radius: 8px;
	white-space: nowrap;
	gap: .5rem;
	width: 300px;
	text-decoration: none;
	cursor: pointer;
	margin: 0 auto;
	transition: all 0.1s ease;
}
#root .check-availibilty-container a:hover {
	transform: scale(1.05);
	color: white;
}
#root  .check-availibilty-container a svg {
	width: 24px;
	height: 24px;
}

/* Hero chips */
#root .hero-chips-container {
	text-align: center;
	position: absolute;
	z-index: 1;
	top: -80px;
	left: 0;
	right: 0;
}
#root .chip {
	display: inline-block;
	margin: .5rem;
	color: rgb(213 199 163);
	font-size: 12px;
	padding: 4px 6px 2px;
	border-radius: 6px;
	background: rgba(166, 146, 121, .3);
	backdrop-filter: blur(5px);
}
@media only screen and (max-width: 600px) {
	#root .chip {
		margin: .3rem .15rem;
		font-size: 11px;
	}
}

/* Poem */
#root .poem-container {
	margin: 3rem 4rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 3rem;
}
#root .poem-painting img {
	max-width: 350px;
	box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
}
#root .poem-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	max-width: 520px;
	margin: 0 auto;
}
#root .poem-text p {
	font-size: 16px;
	font-style: italic;
	max-width: 520px;
}
@media only screen and (max-width: 1000px) {
	#root .poem-container {
		margin: 3rem 0;
	}
}
@media only screen and (max-width: 820px) {
	#root .poem-container {
			flex-direction: column;
	}
   #root .poem-painting {
		display: none;
	}
}

/* As featured on */
.featured-on-container {
	text-align: center;
	margin: 1rem 0 5rem;
}
.featured-on-container a {
	cursor: pointer;
}
.featured-on-container h6 {
	margin-top: 0;
	margin-bottom: .5rem;
}
.featured-on-container img {
	width: 100%;
	max-width: 760px !important;
	height: auto;
}

/* Featured properties */
#root .featured-property-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}
#root .featured-property-container.col3 {
	grid-template-columns: 1fr 1fr 1fr;
}
#root .featured-property-container.col1 {
	grid-template-columns: 1fr;
	justify-items: center;
}
@media only screen and (max-width: 600px) {
	#root .featured-property-container {
		grid-template-columns: 1fr;
	}
}
@media only screen and (max-width: 900px) {
	#root .featured-property-container.col3 {
		grid-template-columns: 1fr;
	}
   #root .featured-property { max-width: none; }
}
#root .featured-property {
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
	background-color: #fcfcfa;
	transition: all .2s ease-in-out;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 492px;
}
#root .featured-property:hover { transform: scale(1.02); }
#root .featured-property h4 { margin: .5rem 0 0; }
#root .feature-location { font-size: 13px; color: #b6a98a; }
#root .featured-property figure,
#root .feature-image { margin:0; }
#root .feature-content { padding: .2rem 1.5rem 1em }
#root [data-testid="widgets.rich-text.content"] .feature-button a { display: block; width: 100%; background: #cbc1a7; color: white; text-decoration: none; padding: .75rem 1.5rem; transition: all .1s ease-in-out; }
#root .feature-button a:hover { background: #ff5555; color: white; }
#root .featured-property-header { text-align: center; margin-bottom: 1rem; }

/* Features list */
#root .homepage-features-list {
	margin: 3rem 0 1rem;
	padding: 3rem 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 1rem;
}
#root .homepage-features-list li {
	list-style: none;
	margin: 0;
	padding: 1rem;
	text-align: center;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
	background-color: #fcfcfa;
	color: #888170;
	transition: all .2s ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;
}
#root .homepage-features-list li img {
	max-width: 100px;
	height: auto;
}
#root .homepage-features-list li:hover { transform: scale(1.04); }
#root .homepage-features-description {
	text-align: center;
	margin: 0 auto 5rem !important;
	max-width: 780px;
	font-size: 16px;
}
@media only screen and (max-width: 1000px) {
	#root .homepage-features-list {
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media only screen and (max-width: 600px) {
	#root .homepage-features-list {
		grid-template-columns: 1fr 1fr;
	}
}

/* Hosts */
#root .hosts-container {
	margin: 5rem 0;
	background: #fcfcfa;
	border: 1px solid #ebe7dd;
	padding: 1.5rem;
	border-radius: 14px;
	display: flex;
	flex-direction: row;
	gap: 1.5rem;
}
#root .hosts-photo {
	flex-basis: 33.33%;
	margin: 0;
	display: flex;
}
#root .hosts-photo img {
	border-radius: 8px;
	width: 100%;
	object-fit: cover;
}
#root .hosts-content { flex-basis: 66.66%; padding: 1rem; }
#root .hosts-content p { font-size: 16px; }
@media only screen and (max-width: 800px) {
	#root .hosts-container { flex-direction: column; }
	#root .hosts-photo { max-width: 300px !important; }
	#root .hosts-content { padding: 0; }
}

/* Newsletter Subscribe button. ConvertKit's padding rule breaks because Lodgify escapes its '>' */
#root .newsletter-block .formkit-submit > span {
	padding-left: 24px;
	padding-right: 24px;
}

/* Closing thought */
#root .closing-thought-container { text-align: center; }


/* ==================================================================
   OUR PLACES PAGE
   Find: data-testid="component-resolver.SearchAppV2"
   ================================================================== */

/* Search bar. Find: data-testid="search-app.searchbar" */
#root [data-testid="search-app.searchbar"] {
	background: transparent;
	padding: 0;
}
#root section:has(> [data-testid="search-app.searchbar"]) {
	box-shadow: none;
}
#root [data-testid="search-app.searchbar"] button.primary,
#root [data-testid="search-app.searchbar"] button.secondary {
	border: none;
	line-height: 1em;
}
/* Location dropdown. Find: data-testid="search-app.searchbar.location-select" */
#root [data-testid="search-app.searchbar.location-select"] {
	background: white;
}
/* Hide: guests counter, 'More filters', results count and sort */
#root [data-testid="search-app.searchbar"] div:has(> [data-testid="counter-add-button"]) {
	display: none;
}
#root section:has(> [data-testid="search-app.searchbar"]) > div:not([data-testid]) { display: none; }
#root [data-testid="component-resolver.SearchAppV2"] div:has(> h4 + button) { display: none; }

/* List and map panels (desktop; the map panel is second) */
#root [data-testid="component-resolver.SearchAppV2"] > div > div {
	height: calc(100vh - 110px);
}
#root [data-testid="component-resolver.SearchAppV2"] > div > div:nth-child(2) { padding: 0; }

/* Property cards. Find: data-testid="search-app.rental-card" */
#root [data-testid="search-app.rental-card"] {
	height: 250px;
}
#root [data-testid="theme-wrapper"] .card-cover-image .responsive-image-wrapper {
	border-radius: 0;
}
#root [data-testid="search-app.rental-card"] .card-body p {
	display: none;
}


/* ==================================================================
   RENTAL PAGES
   ================================================================== */

/* Hero image. Find: data-testid="property-hero" */
#root [data-testid="property-hero"]::before {
	background: transparent !important;
}
#root [data-testid="property-hero"] [data-testid="property-hero.background-image-wrapper"],
#root [data-testid="property-hero"]::before {
	width: 100%;
	margin: 0;
	border-radius: 0;
}
#root [data-testid="property-hero"],
#root [data-testid="property-hero"] [data-testid="property-hero.background-image-wrapper"] {
	height: calc(100vh - 256px);
}
#root [data-testid="property-hero"] > div { padding: 0 20px; }
/* Square, full width (Lodgify adds side margins and rounded corners) */
#root [data-testid="property-hero"] {
	margin: 0;
	border-radius: 0;
}

/* 'Show all photos' button. Find: data-testid="property-hero.view-more-pictures" */
#root [data-testid="property-hero.view-more-pictures"],
#root .button.secondary {
	background: white;
	color: rgba(68, 68, 68, .9) !important;
	border: 1px solid rgba(68, 68, 68, .9);
	border-radius: 8px;
	padding: 10px 12px 7px;
	font-size: 13px;
	text-decoration: none;
}
#root [data-testid="property-hero.view-more-pictures"] svg  {
	margin: -5px 0.5rem -4px 0;
}
#root [data-testid="property-hero.view-more-pictures"]:hover,
#root .button.secondary:hover {
	background: white;
	color: rgba(68,68,68,1) !important;
	border-color: rgba(68,68,68,1);
}

/* In-page menu: hide the 5th link (Rates). Find: data-testid="horizontalMenu" */
#root [data-testid="horizontalMenu"] li:nth-child(5) {
	display: none;
}

/* Booking bar. Find: data-testid="component-resolver.PropertyPageSearchBar" */
/* Property name */
#root [data-testid="component-resolver.PropertyPageSearchBar"] section > div:first-child > span:first-child { font-weight: normal; font-size: 18px; }
/* Location and stars row (the div after the name) */
#root [data-testid="component-resolver.PropertyPageSearchBar"] section > div:first-child > span:first-child + div { gap: 0 1em; font-size: 13px; }
#root [data-testid="component-resolver.PropertyPageSearchBar"] section > div:first-child > span:first-child + div > div:first-child { flex-direction: row-reverse; }
#root [data-testid="component-resolver.PropertyPageSearchBar"] div:has(> div > button.on) { align-items: center; }
#root [data-testid="component-resolver.PropertyPageSearchBar"] div:has(> button.on) { margin: 0 0 2px 3px; }
/* Hide guests counter. Find: data-testid="counter-add-button" */
#root [data-testid="component-resolver.PropertyPageSearchBar"] div:has(> [data-testid="counter-add-button"]) { display: none; }
#root div:has(> [data-testid="counter-input"]) {
	margin-right: .5rem;
}

/* Description: hide 'Mobile House' label and Highlights block. Find: data-testid="component-resolver.Description" */
#root .ui.sub.header,
#root [data-testid="component-resolver.Description"] > div > div:has(> div > .icon) {
	display: none;
}

/* Section headings */
#root [data-testid="component-resolver.PropertyPictures"] h2,
#root [data-testid="component-resolver.Amenities"] h2,
#root [data-testid="component-resolver.Location"] h2,
#root [data-testid="component-resolver.Availability"] h2,
#root [data-testid="component-resolver.Reviews"] h2 {
	margin-top: 5rem;
}

/* Amenities. Find: data-testid="component-resolver.Amenities" */
#root [data-testid="component-resolver.Amenities"] h2 + div {
	column-count: 3;
	display: block;
	gap: 5rem;
	margin: 0 0 -1.5rem 30px
}
@media only screen and (max-width: 1000px) { #root [data-testid="component-resolver.Amenities"] h2 + div { column-count: 2; } }
@media only screen and (max-width: 600px) { #root [data-testid="component-resolver.Amenities"] h2 + div { column-count: 1; } }
#root [data-testid="component-resolver.Amenities"] h2 + div > div {
   padding: 0.75rem 0;
}
/* Group heading and icon */
#root [data-testid="component-resolver.Amenities"] h2 + div > div > div {
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
}
#root [data-testid="component-resolver.Amenities"] h2 + div > div > div > p { color: #555; font-size: 14px; margin: 0; }
#root [data-testid="component-resolver.Amenities"] h2 + div > div > div > svg { margin-left: -32px; }
/* Group list */
#root [data-testid="component-resolver.Amenities"] h2 + div > div > p {
	color: #888170;
	text-transform: capitalize;
	font-size: 13px;
	margin: 0;
}

/* Location. Find: data-testid="component-resolver.Location" */
#root [data-testid="component-resolver.Location"] .grid-address {
	font-family: "Comfortaa", Helvetica, Arial, sans-serif;
	margin-bottom: 1.5rem;
	line-height: 1.5em;
	color: #555;
}
@media only screen and (min-width: 601px) {
	#root [data-testid="component-resolver.Location"] > div { grid-template-areas:
		'header header'
		'map address'
		'map description'
		'map transport-text'
		'map transport-icons';
	}
}

/* Availability calendar. Find: data-testid="widgets.availability-widget" */
#root [data-testid="widgets.availability-widget"] {
	background: transparent;
}
#root [data-testid="availability-widget.date-picker-range-calendar"] {
	border: 1px solid rgba(203, 193, 167,0.5);
}

/* Reviews. Find: data-testid="component-resolver.Reviews" */
/* Card grid */
#root [data-testid="component-resolver.Reviews"] > div > div:last-child {
  display: block;
  column-count: 2;
  gap: 2rem;
}
@media only screen and (max-width: 600px) { #root [data-testid="component-resolver.Reviews"] > div > div:last-child { column-count: 1; } }
/* Card */
#root [data-testid="component-resolver.Reviews"] > div > div:last-child > div {
	margin-bottom: 2rem;
	border-radius: 8px;
	padding: 1.5rem 1rem;
	break-inside: avoid;
}
#root [data-testid="component-resolver.Reviews"] button.on  { color: #cbc1a7; }
/* Title and text run inline */
#root [data-testid="component-resolver.Reviews"] > div > div:last-child > div > h3 {
	display: inline;
	margin: 0 5px 0 0;
	padding: 0;
	font-size: 14px;
	font-family: "Comfortaa", Helvetica, Arial, sans-serif;
	line-height: 1.5em;
	color: #555;
}
#root [data-testid="component-resolver.Reviews"] > div > div:last-child > div > p { display: inline; }

/* Photo lightbox. Find: data-testid="property-hero.gallery.content" or "property-pictures.gallery.content" (added to the end of <body> when opened) */
[data-testid$="gallery-overlay"],
.pictures-gallery-overlay,
.image-gallery-index {
	background: transparent !important;
}
[data-testid$="gallery.content"] {
	background-color: rgba(0, 0, 0, .6) !important;
	backdrop-filter: blur(10px);
	padding: 0 !important;
}
[data-testid$="gallery.content"] .image {
	max-height: calc(100vh - 9rem) !important;
	background-color: transparent;
}
/* Caption */
[data-testid$="gallery.description"] {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
	padding: 0 120px 0 14px;
	text-align: left;
	position: fixed;
	top: 14px;
}
@media only screen and (max-width: 768px) {
	[data-testid$="gallery.description"] { padding-right: 50px; }
}
/* Close button */
[data-testid$="gallery.close-button"] { width: 40px; height: 40px; }
/* Arrows */
[data-testid$="gallery.content"] [data-testid="carousel.arrows"] button {
	padding: 0.7em !important;
	border-radius: 8px;
	background: white;
	opacity: .7;
}
[data-testid$="gallery.content"] [data-testid="carousel.arrows"] button.left {
	position: fixed;
	left: 10px;
}
[data-testid$="gallery.content"] [data-testid="carousel.arrows"] button.right {
	position: fixed;
	right: 10px;
}
[data-testid$="gallery.content"] [data-testid="carousel.arrows"] button svg { stroke: #000; }
[data-testid$="gallery.content"] [data-testid="carousel.arrows"] button:hover { opacity: 1; }

/* Older Lodgify gallery and photo markup (not found on the pages checked in Nov 2026) */
#root .image-gallery>.image-gallery-content .image-gallery-slide-wrapper .image-wrapper {
	width: auto;
}
#root .image-gallery>.image-gallery-content .image-gallery-slide-wrapper .image-wrapper .image {
	object-fit: cover;
	border-radius: 8px;
	max-width: 1060px;
}
.image-gallery,
.image-gallery>.image-gallery-content .image-gallery-slide-wrapper {
	margin-bottom: 0;
}
.image-gallery-slide,
.image-gallery>.image-gallery-content .image-gallery-slide-wrapper>.image-gallery-swipe .image-gallery-slides {
	background-color: transparent;
}
@media only screen and (max-width: 768px) {
	.image-gallery-index { display: none; }
	.image-gallery-thumbnails { display: none; }
}
.image-gallery>.image-gallery-content .image-gallery-slide-wrapper>.image-gallery-index {
	position: fixed;
	top: 8px;
	right: 40px;
}
.image-gallery-thumbnails {
	position: fixed;
	bottom: 10px;
	width: 100vw;
}
.image-gallery>.image-gallery-content .image-gallery-thumbnails-wrapper .image-gallery-thumbnails-container .image-gallery-thumbnail {
	width: 90px !important;
	height: 90px !important;
}
.gallery-wrapper {
	height: calc(100vh - 12rem);
	overflow: hidden;
	position: fixed;
	top: 3.5rem;
	display: flex;
	align-items: center;
}
.image-gallery>.image-gallery-content .image-gallery-slide-wrapper>span:first-child { padding: 0 20px; }
#root .image-gallery-index {
	top: -50px;
	right: 0;
	left: 0;
	line-height: 1.5em;
	opacity: .5;
	padding: 0;
	text-align: center;
	font-size: 12px;
}
#root .property-pictures { display: block; gap: 2rem; columns: 2; margin-bottom: 2rem; }
#root .property-pictures .image-container { padding: 1rem 0; }
@media only screen and (max-width: 600px) {
	#root .property-pictures { columns: 1; }
	#root .property-pictures .image-container { padding: .5rem 0; }
	#root .property-pictures .image-container figcaption { display: none; }
}
#root .property-pictures .image-container .responsive-image-wrapper.gallery-thumbnail {
	max-height: 320px;
	margin-bottom: 10px;
}

/* --- Your HTML blocks in the description (classes you set; these don't change) --- */

/* Intro and sidebar */
#root .property-intro-container {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 3rem;
}
@media only screen and (max-width: 920px) {
	#root .property-intro-container { flex-direction: column; }
}
#root .property-description p { font-size: 16px; }
#root .sidebar-container {
	width: 140rem;
	font-size: 14px;
}
#root .sidebar-container h5 {
	margin-bottom: 0;
	line-height: 1.5em;
}
#root .property-features-section {
	padding: 1.5rem;
	border: 1px solid rgba(203, 193, 167,0.5);
	border-radius: 8px;
	margin-bottom: 1.5rem;
	background: rgba(255,255,255,.7);
}
#root .also-included-block {
	margin-top: 1.5rem;
}
#root .check-in-out-block {
	border-top: 3px dotted #ccc;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}
@media only screen and (max-width: 920px) {
	#root .sidebar-container {
		width: 100%;
	}
	#root .property-features-section {
		background: transparent;
		padding: 0;
		border: none;
	}
	#root .check-in-out-block,
	#root .also-included-block {
		border-top: none;
		margin-top: 1.5rem;
		padding-top: 0;
	}
}

/* Amenities and check-in lists */
#root .amenities-list {
	margin: 0;
	padding-left: 20px;
}
#root .check-in-out-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
#root .amenities-list li,
#root .check-in-out-list li {
	margin: .5rem 0;
}

/* Extra blocks ('Find Out More') */
#root .extras-section {
	margin: 5rem 0 1rem;
	text-align: center;
}
#root .extra-block-container {
	margin: 2rem 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1rem;
}
#root .extra-block {
	list-style: none;
	margin: 0;
	padding: 10px;
	text-align: center;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
	background-color: #fcfcfa;
	border: 1px solid #fcfcfa;
	color: #888170;
	transition: all .2s ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: all 200ms ease-in-out;
}
#root .extra-block:hover {
	transform: scale(1.02);
}
#root .extra-block h5 {
	color: #888170;
	line-height: 1.4em;
	margin-bottom: 0.3rem;
	font-family: "Comfortaa", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
#root .extra-block p {
	font-size: 13px;
}
#root .extra-block-highlight {
	background: #fff;
	border-color: rgba(136, 129, 112, 0.7);
}
#root .extra-block-highlight h5,
#root .extra-block-highlight p {
	color: #000;
}
@media only screen and (min-width: 1000px) {
	#root .extra-block.video-tour-bluebird,
	#root .extra-block.video-tour-woods,
	#root .extra-block.video-tour-wigwam,
	#root .extra-block.video-tour-horsehut {
		background-size: 100px;
		background-position: left;
		background-repeat: no-repeat;
		padding-left: 112px;
		align-items: flex-start;
		text-align: left;
	}
	#root .extra-block.video-tour-bluebird { background-image: url(https://l.icdbcdn.com/oh/a65b8f1a-5870-4b16-899c-1b255badf376.jpg); }
	#root .extra-block.video-tour-woods { background-image: url(https://l.icdbcdn.com/oh/31dd388d-c380-4e33-95ee-fd1b72a5274e.jpg); }
	#root .extra-block.video-tour-wigwam { background-image: url(https://l.icdbcdn.com/oh/19b266da-b3f8-4c45-b13d-e030eb60d5da.jpg); }
	#root .extra-block.video-tour-horsehut { background-image: url(https://l.icdbcdn.com/oh/89782935-3d04-4cc0-97fd-bd68a502ac30.jpg); }
}
@media only screen and (max-width: 1000px) {
	#root .extra-block-container {
		grid-template-columns: 1fr 1fr;
	}
}
@media only screen and (max-width: 600px) {
	#root .extra-block-container {
		grid-template-columns: 1fr 1fr;
	}
}

/* Your hosts */
#root .your-hosts { margin-top: 5rem; text-align: center; }
#root .your-hosts h5,
#root .your-hosts p {
	text-align: center !important;
}
#root .your-hosts-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 1rem;
}
#root .your-hosts-container .your-host {
	display: flex;
	flex-direction: row;
	text-align: left;
	align-items: center;
	flex: 1;
	padding: .25rem .5rem;
	margin: 0;
	max-width: 300px;
	background: rgba(255,255,255,.6);
	border: 1px solid rgba(203, 193, 167,0.5);
	border-radius: 100px;
	gap: 1rem;
	overflow: hidden;
}
@media only screen and (max-width: 601px) {
	#root .your-hosts-container { flex-direction: column; }
	#root .your-hosts-container .your-host { margin: 0 auto; width: 300px; }
}
#root .host-profile {
	overflow: hidden;
	height: 100px;
	margin: 0;
}
#root .host-profile img {
	margin: 0;
	padding: 10px;
	width: 100px;
	height: auto;
	border-radius: 100%;
}
#root .host-name {
	display: block;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.3em;
}
#root .host-role { color: #888170; font-size: 13px; }

/* Multi-day discount and rates tables */
#root .multi-day-discount { margin-top: 3rem; }
#root .table-wrapper {
	margin: 1rem 0 0;
	background: rgba(255,255,255,.6);
	border-radius: 8px;
	border: 1px solid rgba(203, 193, 167,0.5);
	overflow: hidden;
}
#root .multi-day-discount table {
	text-align: center;
	border: none;
}
#root .multi-day-discount th,
#root .multi-day-discount td {
	border: none;
}
#root .rates tr:nth-child(2n) { background: rgba(203, 198, 187,0.1); }


/* ==================================================================
   LOCAL GUIDE, MAKING OF, AND WELCOME PAGES
   Your HTML blocks (classes you set; these don't change)
   ================================================================== */

/* Related pages and 'On this page' menus */
#root .related-pages-nav-container,
#root .on-this-page-container {
	margin-left: -1rem;
	margin-right: -1rem;
	padding: 10px;
	border-radius: 8px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	line-height: 1.2em;
}
#root .related-pages-nav-container {
	color: rgba(0,0,0,0.3);
	margin-top: -1rem;
}
#root .on-this-page-container {
	background: #b3a88f;
	color: rgba(255, 255, 255, 0.6);
	position: sticky;
	top: 5px;
	z-index: 2;
	box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
}
#root .nav-title,
#root .related-pages-nav-container a,
#root .on-this-page-container a {
	flex-shrink: 2;
}
#root .related-pages-nav-container a,
#root .on-this-page-container a {
	text-decoration: none;
	padding: 2px 5px;
}
#root .on-this-page-container a { color: rgba(255,255,255,0.8) !important; }
#root .on-this-page-container a:hover { color: white !important; }
#root .related-pages-nav-container a { opacity: .5; color: #000 !important; }
#root .related-pages-nav-container a:hover { opacity: 1; }
#root .related-pages-nav-container a.current { opacity: 1; color: #000 !important; font-weight: bold; }
@media only screen and (max-width: 840px) {
	#root .related-pages-nav-container,
	#root .on-this-page-container {
		display: block;
		font-size: 12px;
	}
	#root .related-pages-nav-container a,
	#root .on-this-page-container a {
			display: inline-block;
	}
}

/* Local guide hero */
#root .hero-image-full {
	background: #111;
	position: absolute;
	width: 100vw;
	height: calc(100vh - 110px);
	min-height: 500px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
}
#root .hero-image-full figure { margin: 0; }
#root .hero-image-full img {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	opacity: 0.6;
}
#root .hero-intro-container {
	position: absolute;
	width: calc(100% - 2rem);
	height: calc(100vh - 110px);
	min-height: 500px;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	top: 0;
	left: 0;
	padding: 0 1rem;
}
#root .hero-intro {
	margin: 0 auto;
	max-width: 740px;
}
#root .hero-intro h1 { color: white !important; }
#root .hero-intro p {
	color: white;
	font-size: 16px;
}
#root .hero-intro .large {
	margin-top: 1rem;
}
#root .hero-intro a,
#root .hero-intro a:hover { color: white !important; }
#root .hero-content-spacer {
	height: calc(100vh - 110px);
}

/* Guidebook card (shared with the contact form below) */
#root [data-testid="widgets.contact-widget"],
#root .guidebook-container {
	max-width: 800px;
	margin: 2rem auto 5rem;
	background: #fcfcfa;
	border: 1px solid #ebe7dd;
	padding: 1.5rem;
	border-radius: 14px;
	box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
}

/* Guidebook blocks */
#root .guidebook-block {
	margin: 0;
	border-bottom: 5px dotted #ebe7dd;
	padding: 5rem 0;
}
#root .guidebook-block:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
#root .guidebook-block h3 {
	margin-top: 3rem;
	font-family: "Comfortaa", Helvetica, Arial, sans-serif;
}
#root .guidebook-block h3:first-child {
	margin-top: 0;
}
#root .guidebook-block h4 {
	font-size: 1.25rem;
	color: #888170;
	font-family: "Comfortaa", Helvetica, Arial, sans-serif;
}
#root .guidebook-block.large h4 {
	margin-top: 4rem;
}
#root .guidebook-block p { font-size: 16px; }
#root .guidebook-block ul { font-size: 15px; }
#root .guidebook-block li { margin-bottom: .3rem; }
#root .guidebook-block figure {
	margin: 1.5rem 0;
}
#root .guidebook-block figure img {
	transition: all 500ms ease-out;
	box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	display: block;
	margin: 0 auto;
	max-height: 600px;
}
#root .guidebook-block figure img:hover {
	transform: scale(1.02);
}
#root .guidebook-block iframe {
	border-radius: 12px;
}
#root .hero-intro .guidebook-directions,
#root .hero-intro .guidebook-links,
#root .guidebook-block .guidebook-directions,
#root .guidebook-block .guidebook-links {
	font-size: 13px;
	opacity: .8;
}

/* Video tours and making-of blocks */
#root .video-tour-block {
	text-align: center;
}
#root .video-tour {
	border-radius: 16px;
	width: 360px;
	height: 636px;
}
#root .making-of-block {
	border-bottom: 3px dotted #ebe7dd;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}


/* ==================================================================
   CONTACT PAGE
   Find: data-testid="widgets.contact-widget" (card styles shared with the guidebook above)
   ================================================================== */

#root [data-testid="widgets.contact-widget"] {
	padding-left: 3rem;
	padding-right: 3rem;
}


/* ==================================================================
   NOTES

   How to update after Lodgify changes something:
   1. On the live page, right-click the element and choose Inspect.
   2. In the Elements panel, look upwards for the nearest data-testid
	  attribute. Each section above names the one it relies on (Find: …).
   3. If Lodgify has renamed it, search the Elements panel (Cmd+F) for
	  data-testid and update the selector here.

   Avoid selectors like .css-1abc23: Lodgify regenerates those on every publish.
   Selectors starting component-resolver. are whole page sections
   (e.g. component-resolver.Amenities).

   RETIRED RULES
   Not matched on the pages checked in Nov 2026 (all 13 pages; desktop and
   mobile; photo gallery and currency menu opened). Kept for reference.

   Unverified: map internals (hidden behind cookie consent when checked):
	#root .css-6kc55d { border-radius: 8px 0 0 0; }
	#root .css-194bpr3 { justify-content: flex-end; }

   House Rules section (not on any of the four rental pages):
	#root .css-10kzby9 .css-1jipdwj.has-label { margin: .7rem 0; }

   Results-count heading colour (the heading is hidden by this file):
	h4.css-19ntu0z { color: #888170; }

   Location h4 (no h4 besides .grid-address in the section):
	#root .css-wpmde0 h4 { margin: 0; font-size: 16px; font-family: "Comfortaa", Helvetica, Arial, sans-serif; }

   Currency selector (now a 'GBP' button and menu, no matching element):
	#root .css-jt5ydg.variant-normal { border-radius: 8px; border-color: rgba(203, 193, 167,0.5); padding: .5rem; }

   Old review card layout (dropped on purpose: the new cards put avatar,
   stars, and date above the text, and this layout would squash them):
	#root .css-1u4x5f8 { display: flex; align-items: center; }
	#root .css-uf1ume { margin-bottom: 10px; flex-direction: column; align-items: center; gap: 5px; }
	#root .css-uf1ume span.ui.sub.header { display: inline; color: #cbc1a7; font-size: 14px; }
	#root .css-uf1ume .css-3tartg.on { font-size: 1.4rem; }
	#root .css-1diyz6t { opacity: 0.4; margin: 10px 0 0; font-size: 12px; }

   Unidentified (not in the live site or the archived copies checked):
	#root .css-t7bzjt.secondary { color: #888170; }  + 'Show all photos' button styles
	#root .css-r6t8vf { padding: 12px 20px; }
	#root .css-9cerha { display: none; }
	.css-ogorhe.styled-override.css-ogorhe.styled-override { padding: 0.4rem !important; border-radius: 100%; background: #000; }
	.css-it2pbu.styled-override .image-gallery-slide-wrapper .css-1jipdwj svg { stroke: #fff; }
   ================================================================== */