/* Skin House Toolkit: design tokens and shared primitives.
   Values taken from the live site: taupe #99897E, creams #EDE7E2 / #F8F5F1,
   Poppins headings, Lato body, 15/25/50px radii. */

.sh {
	--sh-taupe: #99897e;
	--sh-taupe-dark: #7d6e64;
	--sh-cream: #ede7e2;
	--sh-sand: #e4dcd4;
	--sh-light: #f8f5f1;
	--sh-white: #ffffff;
	--sh-ink: #242424;
	--sh-text: #5f5a56;
	--sh-muted: #8a827c;
	--sh-line: rgba(36, 36, 36, 0.1);
	--sh-dark: #161514;
	--sh-r-sm: 15px;
	--sh-r-md: 25px;
	--sh-r-pill: 50px;
	--sh-shadow: 0 18px 40px -24px rgba(60, 45, 35, 0.35);
	--sh-font-head: "Poppins", sans-serif;
	--sh-font-body: "Lato", sans-serif;
	--sh-pad: clamp(56px, 7vw, 96px);

	/* No position/z-index/clip-path/transform here: any of them makes the band a
	   stacking layer that paints over the theme's sticky booking bar on phones. */
	font-family: var(--sh-font-body);
	color: var(--sh-text);
	padding-block: var(--sh-pad);
	box-sizing: border-box;
}

.sh *,
.sh *::before,
.sh *::after {
	box-sizing: border-box;
}

/* Bands are full-bleed when the parent container is full width (the toolkit's
   own containers are). In a boxed container they simply fill the box. */
.sh { width: 100%; }

.sh .sh-wrap {
	width: min(1180px, 100% - 40px);
	margin-inline: auto;
}

/* Tones. The band colour is painted edge to edge with a border-image outset:
   it bleeds past a boxed parent as ink overflow (no horizontal scrollbar, unlike
   100vw) and, unlike box-shadow + clip-path, creates no stacking context, so
   sticky/fixed theme bars still sit on top. */
.sh[class*="sh-tone--"] {
	--sh-band: var(--sh-light);
	background-color: var(--sh-band);
	border-image: linear-gradient(var(--sh-band), var(--sh-band)) fill 0 / 0 / 0 100vmax;
}
/* Site fix: the shared pre-footer block (cms_block 11719) ends with a black
   BOOKING / WHATSAPP strip (container c208366) that overhangs the block by ~40px
   on phones. Whatever section follows it (Elementor containers and widgets are
   position:relative) painted over the buttons. Lift the strip above what follows. */
.elementor-11719 .elementor-element.elementor-element-c208366 { z-index: 2; }

.sh.sh-tone--white { --sh-band: var(--sh-white); }
.sh.sh-tone--cream { --sh-band: var(--sh-light); }
.sh.sh-tone--sand  { --sh-band: var(--sh-cream); }
.sh.sh-tone--dark  { --sh-band: var(--sh-dark); color: rgba(255, 255, 255, 0.78); }

/* Kicker + heading */
.sh .sh-head { margin-bottom: 28px; }
.sh .sh-head--center { text-align: center; }
.sh .sh-kicker {
	margin: 0 0 10px;
	font: 600 12px/1.4 var(--sh-font-head);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sh-taupe);
}
.sh .sh-heading {
	margin: 0;
	font: 600 clamp(26px, 3vw, 38px)/1.18 var(--sh-font-head);
	letter-spacing: -0.01em;
	color: var(--sh-ink);
}
.sh.sh-tone--dark .sh-heading { color: #fff; }
.sh.sh-tone--dark .sh-kicker { color: #c9bbb0; }

/* Brand pill button with round arrow badge (matches site BOOKING buttons). */
.sh a.sh-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 7px 7px 7px 24px;
	border-radius: var(--sh-r-pill);
	font: 600 14px/1 var(--sh-font-head);
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.sh a.sh-btn .sh-btn__badge {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	transition: transform 0.2s ease;
}
.sh a.sh-btn .sh-icon { width: 16px; height: 16px; }
.sh a.sh-btn--solid { background: var(--sh-taupe); color: #fff; }
.sh a.sh-btn--solid .sh-btn__badge { background: rgba(255, 255, 255, 0.22); color: #fff; }
.sh a.sh-btn--solid:hover { background: var(--sh-taupe-dark); color: #fff; }
.sh a.sh-btn--ghost { background: transparent; color: var(--sh-ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.sh a.sh-btn--ghost .sh-btn__badge { background: var(--sh-cream); color: var(--sh-ink); }
.sh a.sh-btn--ghost:hover { background: var(--sh-ink); color: #fff; }
.sh.sh-tone--dark a.sh-btn--ghost { color: #fff; }
.sh.sh-tone--dark a.sh-btn--ghost .sh-btn__badge { background: rgba(255, 255, 255, 0.14); color: #fff; }
.sh.sh-tone--dark a.sh-btn--ghost:hover { background: #fff; color: var(--sh-ink); }
.sh a.sh-btn:hover .sh-btn__badge { transform: rotate(45deg); }
.sh a.sh-btn:focus-visible { outline: 2px solid var(--sh-taupe); outline-offset: 3px; }

/* Prose: long-form copy typography. */
.sh .sh-prose { font-size: 16.5px; line-height: 1.75; color: var(--sh-text); }
.sh .sh-prose > :first-child { margin-top: 0; }
.sh .sh-prose > :last-child { margin-bottom: 0; }
.sh .sh-prose p { margin: 0 0 1.1em; }
.sh .sh-prose h2,
.sh .sh-prose h3,
.sh .sh-prose h4 {
	font-family: var(--sh-font-head);
	font-weight: 600;
	color: var(--sh-ink);
	line-height: 1.25;
	letter-spacing: -0.005em;
}
.sh .sh-prose h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 1.8em 0 0.6em; }
.sh .sh-prose h3 { font-size: 19px; margin: 1.6em 0 0.5em; }
.sh .sh-prose h4 { font-size: 16.5px; margin: 1.4em 0 0.4em; }
.sh .sh-prose a {
	color: var(--sh-ink);
	text-decoration: underline;
	text-decoration-color: var(--sh-taupe);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.sh .sh-prose a:hover { color: var(--sh-taupe-dark); }
.sh .sh-prose strong { color: var(--sh-ink); }
.sh .sh-prose ul { list-style: none; margin: 0 0 1.2em; padding: 0; }
.sh .sh-prose ul li {
	padding-left: 30px;
	margin-bottom: 0.55em;
}
/* Tick floated into the padding, not absolutely positioned (keeps list items
   out of the stacking order; see tokens note on sticky bars). */
.sh .sh-prose ul li::before {
	content: "";
	float: left;
	margin: 0.38em 0 0 -30px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--sh-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399897e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.sh .sh-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.sh .sh-prose ol li { margin-bottom: 0.5em; padding-left: 4px; }
.sh .sh-prose ol li::marker { color: var(--sh-taupe); font-weight: 700; }

.sh .sh-icon { width: 22px; height: 22px; flex: none; }

@media (prefers-reduced-motion: reduce) {
	.sh a.sh-btn,
	.sh a.sh-btn .sh-btn__badge { transition: none; }
}