/* Skin Life site styles. Colours and type sizes are set once here. */

/* Type weights, chosen by the clinic in October 2026 after comparing previews, for a finer, clinical
   look: large headings in the serif at light (300); small headings (h3, h4) at regular, so they lead
   the text under them; the menu at regular; ordinary text a half step lighter than regular (350)
   at 16px, the size most clinic sites use. Before that headings were medium (500) and text was
   regular at 17px. Both files hold every weight, so no extra download was needed. */
@font-face {
	font-family: "Inter";
	src: url("fonts/inter-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader";
	src: url("fonts/newsreader-latin.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* Ordinary text: the size comes from the theme's settings (16px); the half-step weight is set here,
   because the theme only offers whole steps. "html body" outranks the theme's own "body" rule. */
html body {
	font-weight: 350;
}

:root {
	--sl-navy: #172736;
	--sl-navy-hover: #2c4a63;
	--sl-blue: #4cc0f5;
	/* Filled buttons: a darker shade of the brand blue, dark enough for white text to read
	   clearly (4.8 to 1). They turn navy under the mouse. Outlined buttons stay navy. */
	--sl-btn: #0a7aae;
	--sl-btn-hover: var(--sl-navy);
	--sl-bg: #faf7f2;
	--sl-sand: #efe7dc;
	--sl-pale: #e9f4fa;
	--sl-white: #fff;
	--sl-text: #22303c;
	--sl-muted: #56626c;
	--sl-line: #e3dacb;
	--sl-radius: 16px;
	--sl-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--sl-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Page frame ---------- */

/* On the live page WordPress wraps each group's contents in one extra box.
   This makes that box invisible to layout, so the page matches the editor. */
.wp-block-group[class*="sl-"] > .wp-block-group__inner-container {
	display: contents;
}

.sl-section {
	padding: 52px 0;
}

/* When a link jumps to a section or a treatment, leave room above it
   (on desktop the header stays fixed at the top of the screen). */
.sl-section[id],
.sl-tile[id] {
	scroll-margin-top: 16px;
}

@media (min-width: 1025px) {
	.sl-section[id],
	.sl-tile[id] {
		scroll-margin-top: 100px;
	}
}

/* Outline the treatment a menu link has just jumped to. */
.sl-tile:target,
.sl-tile.sl-tile--found {
	border-color: var(--sl-navy);
	box-shadow: 0 0 0 2px var(--sl-navy);
}

/* Sections sit flush against each other. */
.wp-block-group.sl-section,
.wp-block-group.sl-hero {
	margin-top: 0;
	margin-bottom: 0;
}

.sl-head h2:last-child {
	margin-bottom: 26px;
}

.sl-wrap {
	max-width: 1208px;
	margin: 0 auto;
	padding: 0 24px;
}

.sl-wrap--narrow {
	max-width: 808px;
}

.sl-section .wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
}

.sl-section--white { background: var(--sl-white); }
.sl-section--sand { background: var(--sl-sand); }
.sl-section--pale { background: var(--sl-pale); }
.sl-section--navy { background: var(--sl-navy); color: #fff; }

.sl-section h2 {
	font-family: var(--sl-serif);
	font-weight: 300;
	font-size: clamp(1.7rem, 2.2vw + 1.1rem, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-top: 0;
	margin-bottom: 12px;
}

.sl-section h3 {
	font-family: var(--sl-serif);
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 6px;
}

.sl-section p {
	margin-top: 0;
	margin-bottom: 14px;
}

.sl-lead {
	font-size: 1.08rem;
	color: var(--sl-muted);
	max-width: 640px;
	margin-bottom: 28px !important;
}

.sl-from {
	font-weight: 600;
	color: var(--sl-navy);
	margin-bottom: 0 !important;
}

.sl-eyebrow {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sl-muted);
	margin-bottom: 12px !important;
}

.sl-small {
	font-size: 0.9rem;
	color: var(--sl-muted);
}

/* ---------- Buttons ---------- */

/* One size for every button on the site: 42px tall with 15px text, the same as the Book online button
   in the header (the clinic found the earlier 53px ones too big, October 2026). */
.wp-block-button .wp-block-button__link,
.sl-bookbar a {
	font-family: var(--sl-sans);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	border-radius: 999px;
	padding: 10px 22px;
	text-decoration: none;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:visited,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
	background: var(--sl-btn);
	color: #fff;
	border: 2px solid var(--sl-btn);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--sl-btn-hover);
	border-color: var(--sl-btn-hover);
	color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sl-navy);
	border: 2px solid var(--sl-navy);
	padding: 10px 22px;
}

/* The two :not() parts are there to outrank the theme's own hover rule for outlined buttons, which
   kept them see-through under the mouse. */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus-visible {
	background: var(--sl-navy);
	border-color: var(--sl-navy);
	color: #fff;
}

.wp-block-buttons {
	gap: 12px;
}

.sl-link {
	font-weight: 600;
	color: var(--sl-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Header ---------- */

.sl-topbar {
	display: block;
	font-size: 0.82rem;
	line-height: 1.3;
	text-align: center;
}

.sl-topbar .sl-star {
	color: #f5b324;
	margin-right: 4px;
}

.site-header .header-button {
	white-space: nowrap;
}

/* ---------- Hero ---------- */

.sl-hero {
	padding: 0 0 30px;
	background: var(--sl-bg);
}

.sl-hero__grid {
	display: flex;
	flex-direction: column;
	max-width: 1208px;
	margin: 0 auto;
}

.sl-hero__media {
	order: -1;
	margin: 0;
}

.sl-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 16%;
}

.sl-hero__text {
	padding: 26px 24px 0;
}

.sl-hero h1 {
	font-family: var(--sl-serif);
	font-weight: 300;
	font-size: clamp(2.15rem, 3.4vw + 1.3rem, 3.7rem);
	line-height: 1.07;
	letter-spacing: -0.015em;
	margin: 0 0 14px;
}

.sl-hero__text p:not(.sl-eyebrow) {
	font-size: 1.08rem;
	color: var(--sl-muted);
	margin: 0 0 22px;
	max-width: 520px;
}

@media (min-width: 900px) {
	.sl-hero {
		padding: 48px 0 64px;
	}

	.sl-hero__grid {
		display: grid;
		grid-template-columns: 1.08fr 0.92fr;
		align-items: center;
		gap: 64px;
		padding: 0 24px;
	}

	.sl-hero__media {
		order: 0;
	}

	.sl-hero__media img {
		aspect-ratio: 4 / 5;
		object-position: 50% 30%;
		border-radius: var(--sl-radius);
	}

	.sl-hero__text {
		padding: 0;
	}
}

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

.sl-cards {
	display: grid;
	gap: 14px;
}

.sl-card {
	background: var(--sl-white);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	padding: 22px 22px 20px;
	display: flex;
	flex-direction: column;
}

.sl-card .sl-tag,
.sl-room .sl-tag {
	align-self: flex-start;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--sl-pale);
	color: var(--sl-navy);
	border-radius: 999px;
	padding: 5px 12px;
	margin-bottom: 14px;
}

.sl-price {
	font-family: var(--sl-serif);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1;
	color: var(--sl-navy);
	margin: 8px 0 6px !important;
}

.sl-card .wp-block-buttons {
	margin-top: auto;
	padding-top: 14px;
}

.sl-card .wp-block-button,
.sl-card .wp-block-button__link {
	width: 100%;
	text-align: center;
}

@media (min-width: 800px) {
	.sl-cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

/* ---------- Treatment tiles ---------- */

.sl-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.sl-tile {
	background: var(--sl-white);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	padding: 20px;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 16px;
	align-content: start;
}

.sl-tile h3,
.sl-tile p {
	grid-column: 1;
}

.sl-tile h3 a {
	color: inherit;
	text-decoration: none;
}

.sl-tile h3 a:hover {
	text-decoration: underline;
}

.sl-tile p {
	font-size: 0.95rem;
	color: var(--sl-muted);
	margin-bottom: 6px;
}

.sl-tile .wp-block-buttons {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
}

.sl-tile .sl-from,
.sl-card .sl-from {
	color: var(--sl-navy);
}

.sl-tile .wp-block-button .wp-block-button__link {
	padding: 10px 20px;
}

@media (min-width: 700px) {
	.sl-tiles {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (min-width: 1000px) {
	.sl-tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- By concern ---------- */

.sl-concerns {
	border-top: 1px solid var(--sl-navy);
}

.sl-concern {
	display: grid;
	gap: 4px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(23, 39, 54, 0.18);
}

.sl-concern p {
	margin: 0;
}

.sl-concern p:first-child {
	font-family: var(--sl-serif);
	font-size: 1.2rem;
	color: var(--sl-navy);
}

@media (min-width: 700px) {
	.sl-concern {
		grid-template-columns: 320px 1fr;
		align-items: baseline;
		padding: 18px 0;
	}
}

/* ---------- Proof ---------- */

.sl-proof {
	display: grid;
	gap: 28px;
}

.sl-proof__photo {
	margin: 0;
}

.sl-proof__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: var(--sl-radius);
}

.sl-rating {
	font-family: var(--sl-serif);
	font-size: 1.5rem;
	color: var(--sl-navy);
	margin-bottom: 4px !important;
}

.sl-rating .sl-star {
	color: #f5b324;
}

.sl-reviews {
	display: grid;
	gap: 14px;
	margin-top: 32px;
}

.sl-review {
	background: var(--sl-bg);
	border-radius: var(--sl-radius);
	padding: 22px;
}

.sl-review p {
	margin-bottom: 10px;
}

.sl-review p:last-child {
	font-weight: 600;
	color: var(--sl-navy);
	margin-bottom: 0;
}

@media (min-width: 800px) {
	.sl-proof {
		grid-template-columns: 0.8fr 1.2fr;
		gap: 56px;
		align-items: center;
	}

	.sl-reviews {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

/* ---------- Visit ---------- */

.sl-visit {
	display: grid;
	gap: 26px;
}

.sl-visit a {
	color: inherit;
}

.sl-section--navy h2,
.sl-section--navy h3 {
	color: #fff;
}

.sl-section--navy .sl-eyebrow,
.sl-section--navy .sl-small,
.sl-section--navy .sl-lead {
	color: #b9c6d1;
}

.sl-section--navy .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: #fff;
	border-color: #fff;
	color: var(--sl-navy);
}

/* Under the mouse the white button turns pale blue. (The general rule would turn it navy, which
   disappears on a navy band, and this section's own colours were overriding it anyway.) */
.sl-section--navy .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.sl-section--navy .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background: var(--sl-pale);
	border-color: var(--sl-pale);
	color: var(--sl-navy);
}

/* The visited, focus and active states are listed because the theme has its own colour for
   each of them, which would otherwise turn the text navy on the navy background. */
.sl-section--navy .wp-block-button.is-style-outline .wp-block-button__link,
.sl-section--navy .wp-block-button.is-style-outline .wp-block-button__link:visited,
.sl-section--navy .wp-block-button.is-style-outline .wp-block-button__link:focus,
.sl-section--navy .wp-block-button.is-style-outline .wp-block-button__link:active {
	border-color: #fff;
	color: #fff;
}

.sl-section--navy .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.sl-section--navy .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus-visible {
	background: #fff;
	color: var(--sl-navy);
}

@media (min-width: 800px) {
	.sl-visit {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}
}

/* ---------- Treatment page ---------- */

.sl-page-head {
	padding: 34px 0 8px;
}

/* When the next section is white, the change of colour makes the join visible,
   so the heading area needs room under its last line or its buttons. */
.sl-page-head:has(+ .sl-section--white) {
	padding-bottom: 32px;
}

/* The photo at the top of a treatment page: a wide strip above the heading, shallower on wide
   screens so the heading and price stay on the first screen. */
.sl-page-head .sl-page-head__photo {
	margin: 0 0 22px;
}

.sl-page-head .sl-page-head__photo img {
	aspect-ratio: 16 / 9;
	border-radius: var(--sl-radius);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

@media (min-width: 800px) {
	.sl-page-head .sl-page-head__photo img {
		aspect-ratio: 21 / 9;
	}
}

.sl-page-head h1 {
	font-family: var(--sl-serif);
	font-weight: 300;
	font-size: clamp(2rem, 3vw + 1.2rem, 3.2rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	margin: 0 0 14px;
}

.sl-page-head .sl-lead {
	margin-bottom: 0 !important;
}

.sl-page-head .wp-block-buttons {
	margin-top: 22px;
}

.sl-from a {
	font-weight: 500;
	color: var(--sl-navy);
	text-underline-offset: 3px;
}

.sl-section.sl-glance-wrap {
	padding: 20px 0 44px;
}

.sl-glance {
	background: var(--sl-white);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	padding: 8px 22px 22px;
	margin-bottom: 16px !important;
}

.sl-glance__row {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--sl-line);
}

.sl-glance__row p {
	margin: 0;
}

.sl-glance__row p:first-child {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--sl-muted);
	padding-top: 3px;
}

.sl-glance .wp-block-buttons {
	margin-top: 18px;
}

.sl-glance .wp-block-button,
.sl-glance .wp-block-button__link {
	width: 100%;
	text-align: center;
}

@media (min-width: 760px) {
	.sl-glance .wp-block-button {
		width: auto;
		flex: 1;
	}
}

.sl-section ul,
.sl-section ol {
	margin-top: 0;
	margin-bottom: 18px;
	padding-left: 22px;
}

.sl-wrap--narrow p + h2,
.sl-wrap--narrow ul + h2 {
	margin-top: 40px;
}

.sl-wrap--narrow p + h3,
.sl-wrap--narrow ul + h3 {
	margin-top: 28px;
}

.sl-section li {
	margin-bottom: 6px;
}

.sl-two {
	display: grid;
	gap: 14px;
}

@media (min-width: 760px) {
	.sl-two {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 20px;
	}
}

.sl-steps {
	display: grid;
	gap: 14px;
	counter-reset: sl-step;
}

.sl-step {
	position: relative;
	padding-left: 58px;
	counter-increment: sl-step;
}

.sl-step::before {
	content: counter(sl-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sl-navy);
	color: #fff;
	font-weight: 600;
	display: grid;
	place-items: center;
}

@media (min-width: 800px) {
	.sl-steps {
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
		gap: 28px;
	}
}

.sl-prices {
	background: var(--sl-white);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	padding: 6px 22px;
	max-width: 720px;
	margin-bottom: 16px !important;
}

.sl-wrap--narrow .sl-prices + h3 {
	margin-top: 26px;
}

.sl-jump {
	margin-top: 18px !important;
	line-height: 2;
}

.sl-jump a {
	color: var(--sl-navy);
	font-weight: 600;
	text-underline-offset: 3px;
}

.sl-price-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--sl-line);
}

.sl-price-row:last-child {
	border-bottom: 0;
}

.sl-price-row p {
	margin: 0;
}

.sl-price-row p:last-child {
	font-weight: 600;
	color: var(--sl-navy);
	white-space: nowrap;
}

/* A Book link after a price opens the booking page on exactly that treatment. */
.sl-price-row p:last-child a {
	display: inline-block;
	margin-left: 12px;
	padding: 4px 0;
	font-size: 0.92em;
	color: var(--sl-btn);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sl-price-row p:last-child a:hover {
	color: var(--sl-navy);
}

.sl-faq details {
	border-bottom: 1px solid var(--sl-line);
	padding: 16px 0;
	margin: 0;
}

.sl-faq summary {
	font-family: var(--sl-serif);
	font-size: 1.2rem;
	color: var(--sl-navy);
	cursor: pointer;
}

.sl-faq details p {
	margin: 12px 0 0;
}

.sl-actions {
	margin-top: 22px !important;
}

/* ---------- About and contact ---------- */

.sl-quote {
	font-family: var(--sl-serif);
	font-size: clamp(1.3rem, 1.2vw + 1rem, 1.75rem);
	line-height: 1.35;
	color: var(--sl-navy);
	max-width: 820px;
}

.sl-contact {
	display: grid;
	gap: 36px;
}

.sl-contact a {
	color: var(--sl-navy);
	text-underline-offset: 3px;
}

@media (min-width: 860px) {
	.sl-contact {
		grid-template-columns: 0.85fr 1.15fr;
		gap: 64px;
	}
}

.sl-form p {
	margin: 0 0 16px;
}

.sl-form label {
	display: block;
	font-weight: 600;
	color: var(--sl-navy);
	margin-bottom: 6px;
}

.sl-form label span {
	font-weight: 400;
	color: var(--sl-muted);
}

.sl-form input[type="text"],
.sl-form input[type="email"],
.sl-form input[type="tel"],
.sl-form textarea {
	display: block;
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--sl-text);
	background: var(--sl-white);
	border: 1px solid #b9b0a2;
	border-radius: 10px;
	padding: 12px 14px;
}

.sl-form input:focus,
.sl-form textarea:focus {
	outline: 2px solid var(--sl-navy);
	outline-offset: 1px;
	border-color: var(--sl-navy);
}

.sl-form select {
	display: block;
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--sl-text);
	background: var(--sl-white);
	border: 1px solid #b9b0a2;
	border-radius: 10px;
	padding: 12px 14px;
}

.sl-form h3 {
	margin: 26px 0 10px;
}

/* The ZO form's own heading: second level, so headings on that page run in order, drawn like the
   form headings elsewhere and without the short rule other second-level headings carry. */
.sl-form h2.sl-form__title {
	margin: 28px 0 10px;
	font-size: 1.35rem;
	font-weight: 300;
	line-height: 1.2;
}

.sl-form h2.sl-form__title::after {
	content: none;
}

.sl-form h3 span {
	font-family: var(--sl-sans);
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--sl-muted);
}

.sl-form__question {
	border: 0;
	border-top: 1px solid var(--sl-line);
	margin: 0;
	padding: 14px 0;
}

.sl-form__question legend {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--sl-navy);
}

.sl-form__question label,
.sl-form__consent label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 22px 0 0;
	font-weight: 400;
	color: var(--sl-text);
}

.sl-form__question input[type="radio"],
.sl-form__consent input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: none;
	accent-color: var(--sl-navy);
}

.sl-form__question input[type="text"] {
	margin-top: 10px;
}

.sl-form__consent {
	border-top: 1px solid var(--sl-line);
	padding-top: 18px;
}

.sl-form__consent label {
	align-items: flex-start;
	margin-right: 0;
}

.sl-form__note {
	margin-top: 14px;
	font-size: 0.9rem;
	color: var(--sl-muted);
}

.sl-form__consent a,
.sl-form__note a {
	color: inherit;
	text-decoration: underline;
}

.sl-form__send {
	font-family: var(--sl-sans);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	color: #fff;
	background: var(--sl-btn);
	border: 2px solid var(--sl-btn);
	border-radius: 999px;
	padding: 10px 24px;
	cursor: pointer;
}

.sl-form__send:hover,
.sl-form__send:focus {
	background: var(--sl-btn-hover);
	border-color: var(--sl-btn-hover);
	color: #fff;
}

.sl-form__errors {
	background: #fdecea;
	border: 1px solid #e3a59d;
	border-radius: 10px;
	padding: 14px 16px 2px;
	margin-bottom: 18px;
	color: #7a1c12;
}

/* Hidden from people; only automated form-fillers complete it. */
.sl-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Gallery, videos and map ---------- */

.sl-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.sl-section .sl-gallery .wp-block-image {
	margin: 0;
}

.sl-gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #efe9e0;
	border-radius: 10px;
}

@media (min-width: 900px) {
	.sl-gallery {
		grid-template-columns: repeat(4, 1fr);
		gap: 14px;
	}
}

.sl-head .sl-small:last-child {
	margin-bottom: 22px;
}

/* auto-fill keeps a lone video at the size of one column instead of the full width. */
.sl-section .sl-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin-top: 18px;
}

.sl-section .sl-videos--portrait {
	grid-template-columns: repeat(auto-fill, minmax(150px, 250px));
}

.sl-section .sl-videos .wp-block-video {
	margin: 0;
}

.sl-videos video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--sl-radius);
}

.sl-videos--portrait video {
	aspect-ratio: 9 / 16;
}

.sl-map {
	aspect-ratio: 16 / 9;
	margin-top: 28px;
	background: var(--sl-pale);
	border-radius: var(--sl-radius);
	overflow: hidden;
}

.sl-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 600px) {
	.sl-map {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Blog ---------- */

.sl-card h3 a {
	color: inherit;
	text-decoration: none;
}

.sl-card h3 a:hover,
.sl-card h3 a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.single-post .entry-content h2 {
	font-size: 1.6rem;
	margin-top: 1.6em;
}

.single-post .entry-content a,
.blog .entry-title a:hover {
	text-underline-offset: 3px;
}

/* ---------- Booking page ---------- */

.sl-booking iframe {
	display: block;
	width: 100%;
	height: 1100px;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	background: var(--sl-white);
}

.sl-booking__alt {
	font-size: 0.9rem;
	text-align: center;
	margin-top: 12px;
}

/* ---------- Phone booking bar ---------- */

.sl-bookbar {
	display: none;
}

@media (max-width: 767px) {
	.sl-bookbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: grid;
		grid-template-columns: 1.5fr 1fr 1fr;
		gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: var(--sl-white);
		border-top: 1px solid var(--sl-line);
		box-shadow: 0 -6px 20px rgba(23, 39, 54, 0.08);
		transform: translateY(110%);
		transition: transform 0.2s ease;
	}

	.sl-bookbar.is-on {
		transform: none;
	}

	.sl-bookbar a {
		display: block;
		text-align: center;
		padding: 13px 8px;
		font-size: 0.95rem;
		color: var(--sl-navy);
		border: 2px solid var(--sl-navy);
	}

	.sl-bookbar a.sl-bookbar__book {
		background: var(--sl-btn);
		border-color: var(--sl-btn);
		color: #fff;
	}

	body {
		padding-bottom: 76px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-bookbar {
		transition: none;
	}
}

/* ---------- Header and footer (Kadence) ---------- */

.sl-note {
	margin-top: 22px !important;
}

.site-header .header-button,
.site-header .mobile-header-button,
.site-header .header-button:visited,
.site-header .mobile-header-button:visited,
.site-header .header-button:focus,
.site-header .mobile-header-button:focus {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	border-radius: 999px;
	background: var(--sl-btn);
	color: #fff;
	padding: 10px 20px;
}

.site-header .header-button:hover,
.site-header .mobile-header-button:hover {
	background: var(--sl-btn-hover);
	color: #fff;
}

.site-header .sl-topbar {
	color: #fff;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-weight: 400;
	color: var(--sl-navy);
}

.site-footer {
	background: var(--sl-navy);
	color: #b9c6d1;
	font-size: 0.9rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer a,
.site-footer strong {
	color: #fff;
}

/* Footer text in three groups: page links, contact details, then the small print.
   The rows are pulled closer so the icons and the text read as one block. */
.site-footer .site-middle-footer-inner-wrap {
	padding-bottom: 12px;
}

.site-footer .site-bottom-footer-inner-wrap {
	padding-top: 10px;
	padding-bottom: 34px;
}

.site-footer .footer-html-inner p {
	margin: 0;
}

.site-footer .footer-html-inner a {
	text-decoration: none;
}

.site-footer .footer-html-inner a[href^="tel:"] {
	white-space: nowrap;
}

.site-footer .footer-html-inner a:hover,
.site-footer .footer-html-inner a:focus-visible {
	text-decoration: underline;
}

.site-footer .footer-html-inner .sl-foot__links {
	margin-bottom: 8px;
	font-size: 0.95rem;
}

.site-footer .footer-html-inner .sl-foot__contact {
	margin-bottom: 22px;
}

.site-footer .footer-html-inner .sl-foot__legal {
	font-size: 0.8rem;
	line-height: 1.7;
	color: #93a3b1;
}

/* Rooms to rent: each room's details sit beside its photos. On a phone the photos
   become a strip that scrolls sideways. */
.sl-rooms {
	display: grid;
	gap: 44px;
}

.sl-room {
	display: grid;
	gap: 22px;
	padding-bottom: 44px;
	border-bottom: 1px solid var(--sl-line);
}

.sl-room:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.sl-room .sl-tag {
	display: inline-block;
	margin-bottom: 0;
}

.sl-room h3 {
	margin: 12px 0 8px;
	font-size: 1.7rem;
}

.sl-room .sl-prices {
	margin-top: 18px;
}

.sl-room__photos {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin: 0 -24px;
	padding: 0 24px 6px;
}

.sl-section .sl-room__photos .wp-block-image {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: center;
}

/* Upright photos are shown 3 by 4 and wide ones 3 by 2, so every photo in a row is the same height. */
.sl-room__photos img {
	display: block;
	width: auto;
	height: 250px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--sl-radius);
}

.sl-room__photos .sl-room__photo--wide img {
	aspect-ratio: 3 / 2;
}

@media (min-width: 800px) {
	.sl-room {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 44px;
		align-items: start;
	}

	/* Three columns with a 10px gap. Every photo is given the height of an upright 3 by 4 tile,
	   worked out from the width of the grid, so wide photos (two columns) line up with upright ones. */
	.sl-room__photos {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		container-type: inline-size;
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.sl-section .sl-room__photos .sl-room__photo--wide {
		grid-column: span 2;
	}

	.sl-room__photos img,
	.sl-room__photos .sl-room__photo--wide img {
		width: 100%;
		height: 300px;
		height: calc((100cqw - 20px) / 3 * 4 / 3);
		aspect-ratio: auto;
	}
}

/* Prices page: every treatment's price box, two to a row on wide screens. */
.sl-pricelist {
	display: grid;
	gap: 30px 44px;
	align-items: start;
	margin-top: 22px;
}

.sl-pricelist__item h3 {
	margin: 0 0 12px;
	font-size: 1.3rem;
}

.sl-pricelist__item h3 a {
	color: var(--sl-navy);
	text-decoration: none;
}

.sl-pricelist__item h3 a:hover,
.sl-pricelist__item h3 a:focus-visible {
	text-decoration: underline;
}

.sl-pricelist__item .sl-prices {
	max-width: none;
}

.sl-pricelist__sub {
	margin: 14px 0 8px !important;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sl-muted);
}

.sl-pricelist__jump {
	margin: 16px 0 0 !important;
	font-size: 0.95rem;
	line-height: 1.9;
}

@media (min-width: 900px) {
	.sl-pricelist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Privacy policy and terms: long text pages. */
.sl-legal h2 {
	margin-top: 2.2em;
	font-size: 1.5rem;
}

.sl-legal h2:first-child {
	margin-top: 0;
}

.sl-legal h3 {
	margin-top: 1.6em;
	font-size: 1.1rem;
}

.sl-legal li {
	margin-bottom: 0.45em;
}

/* Brand logos strip. The logos are different shapes, so each is fitted inside the same box.
   They are shown exactly as the brands supply them: no tinting or fading. "multiply" only
   lets the white background that some logo files carry disappear into the white strip. */
.sl-section.sl-section--brands {
	padding-top: 28px;
	/* Less than the top on purpose: the Dermalux and ZO files have blank space under the logo,
	   so this leaves about 32px below what you can actually see. */
	padding-bottom: 16px;
	text-align: center;
	border-top: 1px solid var(--sl-line);
}

.sl-brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 26px 52px;
	max-width: 940px;
	margin: 22px auto 0;
}

.sl-section .sl-brands .wp-block-image {
	margin: 0;
}

.sl-brands img {
	display: block;
	width: auto;
	height: auto;
	max-width: 170px;
	max-height: 58px;
	mix-blend-mode: multiply;
}

.sl-brands .sl-brand--tall img {
	max-width: 230px;
	max-height: 80px;
}

@media (max-width: 600px) {
	.sl-section.sl-section--brands {
		padding-bottom: 20px;
	}

	.sl-brands {
		gap: 20px 30px;
	}

	.sl-brands img {
		max-width: 134px;
		max-height: 46px;
	}

	.sl-brands .sl-brand--tall img {
		max-width: 180px;
		max-height: 62px;
	}
}

/* Social icons in the footer. The long selector matches the one Kadence writes into the page for
   these buttons, which otherwise removes the outline; its outline style also pins the background
   to transparent with !important, so the hover fill has to be !important too. */
.site-footer .footer-social-inner-wrap {
	gap: 10px;
	justify-content: center;
}

.site-footer .site-footer-wrap .site-footer-section .footer-social-wrap .footer-social-inner-wrap .social-button {
	width: 40px;
	height: 40px;
	font-size: 1.125rem;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
}

.site-footer .site-footer-wrap .site-footer-section .footer-social-wrap .footer-social-inner-wrap .social-button:hover,
.site-footer .site-footer-wrap .site-footer-section .footer-social-wrap .footer-social-inner-wrap .social-button:focus-visible {
	color: var(--sl-navy);
	background: #fff !important;
	border-color: #fff;
}

/* ---------- Treatments panel (desktop menu) ---------- */

/* The panel hangs from the whole header row, not from the menu item. */
.header-navigation .menu > li.sl-mega {
	position: static;
}

/* The word sits in the middle of the header row and the panel opens below the row.
   This invisible strip fills the space between them, so the panel stays open
   while the pointer travels down to it. */
.header-navigation .menu > li.sl-mega > a::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -32px;
	right: -32px;
	height: 16px;
}

.header-navigation .menu > li.sl-mega > ul.sub-menu {
	left: 0;
	right: 0;
	top: 100%;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 26px 30px;
	padding: 28px max(24px, calc((100% - 1160px) / 2)) 34px;
	background: var(--sl-white);
	border-top: 1px solid var(--sl-line);
	box-shadow: 0 18px 30px rgba(23, 39, 54, 0.1);
}

.header-navigation .menu > li.sl-mega:hover > ul.sub-menu,
.header-navigation .menu > li.sl-mega:focus-within > ul.sub-menu,
.header-navigation .menu > li.sl-mega.menu-item--toggled-on > ul.sub-menu {
	display: grid;
}

/* Set briefly by the site script when a link in the panel is clicked. */
.header-navigation .menu > li.sl-mega.sl-mega--closed > ul.sub-menu {
	display: none;
}

/* The list inside each group is always open. */
.header-navigation .menu > li.sl-mega > ul.sub-menu ul.sub-menu {
	display: block;
	position: static;
	min-height: 0;
	background: none;
	box-shadow: none;
}

.header-navigation .menu > li.sl-mega ul.sub-menu li.menu-item {
	border: 0;
}

.header-navigation .menu > li.sl-mega ul.sub-menu li.menu-item > a {
	width: auto;
	padding: 5px 0;
	background: none;
	color: var(--sl-text);
	font-size: 0.95rem;
	line-height: 1.35;
}

.header-navigation .menu > li.sl-mega ul.sub-menu li.menu-item > a:hover,
.header-navigation .menu > li.sl-mega ul.sub-menu li.menu-item > a:focus {
	background: none;
	color: var(--sl-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.header-navigation .menu > li.sl-mega > ul.sub-menu > li.menu-item > a {
	display: flex;
	align-items: flex-end;
	min-height: 3.1em;
	padding: 0 0 10px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--sl-line);
	font-family: var(--sl-serif);
	font-size: 1.12rem;
	font-weight: 300;
	line-height: 1.2;
	/* The group headings are in the site's brighter blue and the treatments under them in dark text,
	   so the columns are quick to scan (the clinic's choice, October 2026, after ZO's own menu). */
	color: var(--sl-btn);
}

.header-navigation .menu > li.sl-mega ul.sub-menu .dropdown-nav-toggle {
	display: none;
}

/* The link to the full list runs across the bottom of the panel. */
.header-navigation .menu > li.sl-mega > ul.sub-menu > li.sl-mega__all {
	grid-column: 1 / -1;
}

.header-navigation .menu > li.sl-mega > ul.sub-menu > li.sl-mega__all > a {
	display: inline-block;
	min-height: 0;
	margin: 0;
	padding: 16px 0 0;
	border: 0;
	border-top: 1px solid var(--sl-line);
	width: 100%;
	font-family: var(--sl-sans);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Phone menu ---------- */

#mobile-drawer .drawer-inner {
	background: var(--sl-bg);
	color: var(--sl-navy);
}

#mobile-drawer .drawer-header .drawer-toggle,
#mobile-drawer .mobile-navigation ul li a,
#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap .drawer-sub-toggle {
	color: var(--sl-navy);
}

#mobile-drawer .mobile-navigation ul li a {
	font-size: 1.05rem;
	padding-top: 0.85em;
	padding-bottom: 0.85em;
}

#mobile-drawer .mobile-navigation > .mobile-menu-container > ul > li > a,
#mobile-drawer .mobile-navigation > .mobile-menu-container > ul > li > .drawer-nav-drop-wrap > a {
	font-weight: 600;
}

#mobile-drawer .mobile-navigation ul ul li a {
	font-size: 1rem;
}

#mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
#mobile-drawer .mobile-navigation ul li:not(.menu-item-has-children) a {
	border-bottom-color: var(--sl-line);
}

/* The whole row opens its list (a theme setting). The arrow sits in a tinted
   circle so the row reads as something to tap. */
#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap .drawer-sub-toggle {
	border-left: 0;
	padding-right: 4px;
}

#mobile-drawer .mobile-navigation .drawer-sub-toggle .kadence-svg-iconset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sl-sand);
}

#mobile-drawer .mobile-navigation .drawer-sub-toggle .kadence-svg-iconset svg {
	width: 22px;
	height: 22px;
	top: 0;
}

#mobile-drawer .mobile-navigation .drawer-sub-toggle[aria-expanded="true"] .kadence-svg-iconset {
	background: var(--sl-navy);
	color: #fff;
}

/* ---------- Editor only ---------- */

/* The editor centres every block by default. Inside our sections, keep blocks
   where the live page puts them, so the editor matches what visitors see. */
.editor-styles-wrapper .wp-block-group[class*="sl-"] .wp-block {
	margin-left: 0;
	margin-right: 0;
}

.editor-styles-wrapper .wp-block-group[class*="sl-"] .wp-block.sl-wrap,
.editor-styles-wrapper .wp-block-group[class*="sl-"] .wp-block.sl-hero__grid {
	margin-left: auto;
	margin-right: auto;
}


/* Shop */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce a.button:visited,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce a.button.alt:visited,
.wc-block-components-button:not(.is-link),
.wc-block-components-button:not(.is-link):visited,
.wc-block-components-button:not(.is-link):focus {
	background: var(--sl-btn);
	border-color: var(--sl-btn);
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--sl-btn-hover);
	border-color: var(--sl-btn-hover);
	color: #fff;
}

/* Product cards: the Add to basket button is always shown under the price (it used to slide up on
   hover and collide with the price once "View basket" appeared), in the site's blue, lined up along
   the bottom of each row. It is a compact button at the left, as wide as its words, not a bar across
   the whole tile (the clinic found the full-width one too large, October 2026). */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .product-details {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.woocommerce ul.products li.product .product-action-wrap {
	margin-top: auto;
	padding-top: 14px;
}

.woocommerce ul.products.woo-archive-btn-button li.product .product-action-wrap .button,
.woocommerce ul.products.woo-archive-btn-button li.product .product-action-wrap .button:visited,
.woocommerce ul.products.woo-archive-btn-button li.product .product-action-wrap .button:focus {
	background: var(--sl-btn);
	border-radius: 999px;
	color: #fff;
	align-self: flex-start;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 10px 22px;
	text-align: center;
	white-space: nowrap;
	width: auto;
}

.woocommerce ul.products.woo-archive-btn-button li.product .product-action-wrap .button:hover {
	background: var(--sl-btn-hover);
	color: #fff;
}

/* Shop tiles: no button, and the name and price centred under the photo (the clinic's choice,
   October 2026). The button rules above and below are kept in case the buttons come back. */
.woocommerce ul.products li.product.loop-entry .product-action-wrap {
	display: none;
}

.woocommerce ul.products li.product.loop-entry .product-details {
	text-align: center;
}

/* The product's name is in the site's plain font, the one the price and the menu use, not the
   serif used for headings (the clinic's choice, October 2026). */
.woocommerce ul.products li.product.loop-entry .woocommerce-loop-product__title {
	font-family: var(--sl-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}

/* Once a product is in the basket, "View basket" takes the button's place as an outline button. */
.woocommerce ul.products li.product .product-action-wrap .button.added,
.woocommerce ul.products li.product .product-action-wrap .button.added:hover,
.woocommerce ul.products li.product .product-action-wrap .button.added:focus {
	display: none !important;
}

.woocommerce ul.products li.product .product-action-wrap .added_to_cart,
.woocommerce ul.products li.product .product-action-wrap .added_to_cart:visited {
	border: 2px solid var(--sl-navy);
	border-radius: 999px;
	color: var(--sl-navy);
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
	padding: 8px 20px;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
}

.woocommerce ul.products li.product .product-action-wrap .added_to_cart:hover {
	background: var(--sl-navy);
	color: #fff;
}

/* Basket and checkout: the theme stretches "wide" blocks to the full window width, which pushed the
   right-hand column off the screen on anything narrower than a desktop. Keep them inside the page. */
.woocommerce-cart .entry-content > .alignwide,
.woocommerce-checkout .entry-content > .alignwide,
.woocommerce-account .entry-content > .alignwide {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	width: 100%;
}

/* Quick-pay buttons: PayPal's own is hidden, because an ordinary PayPal payment costs the clinic
   more than a card. Pay Later (on trial), Apple Pay and Google Pay stay; PayPal stays as a choice
   in the payment list. */
#express-payment-method-ppcp-gateway-paypal {
	display: none !important;
}

/* Product page: show the photo straight away. WooCommerce keeps it invisible until its scripts
   have run, which made the main picture appear seconds late on phones. */
.woocommerce div.product .woocommerce-product-gallery {
	opacity: 1 !important;
}

/* The small "Brand" line was slightly too pale to read comfortably against the page. */
.woocommerce div.product .summary .product_meta,
.woocommerce div.product .summary .product_meta > span,
.woocommerce div.product .summary .product_meta a {
	color: var(--sl-muted) !important;
}

/* The brand is listed once; the category line repeats it. */
.single-product .product_meta .posted_in:has(a[href*="/product-category/"]) {
	display: none;
}

/* My account: the theme draws these buttons with 18px text. They take the site's standard size, and
   the "View" button in each row of the orders list is smaller still, so it sits quietly in the row. */
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button {
	font-size: 0.9375rem;
	line-height: 1.2;
	padding: 12px 22px; /* 42px tall; these have no border, unlike the site's other buttons */
}

.woocommerce-account .woocommerce table.shop_table a.button {
	font-size: 0.875rem;
	padding: 6px 16px;
}

/* My account: a notice with a button, such as "Confirm email address". WooCommerce floats the button
   over the words, which crowds them on a wide screen and breaks them up on a phone. Here the button
   sits beside the words on wide screens and under them on phones. */
.woocommerce-account .woocommerce-info:has(> .button) {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px 24px;
}

.woocommerce-account .woocommerce-info:has(> .button)::before,
.woocommerce-account .woocommerce-info:has(> .button)::after {
	display: none;
}

.woocommerce-account .woocommerce .woocommerce-info > a.button {
	float: none;
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

@media (max-width: 600px) {
	.woocommerce-account .woocommerce-info:has(> .button) {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .woocommerce .woocommerce-info > a.button {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
	}
}

/* My account on phones: WooCommerce hides the order number in the orders list, because it marks that
   cell as a row heading. It is shown here as a line like the others. */
@media (max-width: 768px) {
	.woocommerce-account table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number {
		display: block;
		padding: 4px 8px;
		text-align: right;
	}

	.woocommerce-account table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number::before {
		content: attr(data-title) ": ";
		float: left;
		font-weight: 700;
	}

	/* The theme tints every other order; the number takes the same tint as the lines under it. */
	.woocommerce-account table.shop_table_responsive tbody tr:nth-child(2n) th.woocommerce-orders-table__cell-order-number {
		background-color: rgba(0, 0, 0, 0.025);
	}
}

/* Cookie banner (tags.php): a quiet card in the bottom corner, shown only while an advertising or
   analytics code is set and the visitor has not answered yet. Reject and Accept look the same. */
.sl-cookies {
	position: fixed;
	z-index: 9999;
	left: 16px;
	bottom: 16px;
	width: calc(100% - 32px);
	max-width: 460px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 18px 20px 16px;
	background: #fff;
	border: 1px solid var(--sl-line);
	box-shadow: 0 10px 34px rgba(23, 39, 54, 0.16);
	font-family: var(--sl-sans);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sl-text);
}

.sl-cookies[hidden],
.sl-cookies [hidden] {
	display: none;
}

.sl-cookies p {
	margin: 0 0 10px;
}

.sl-cookies__title {
	font-weight: 600;
	color: var(--sl-navy);
}

.sl-cookies a {
	color: inherit;
	text-decoration: underline;
}

.sl-cookies__choices label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 10px;
}

.sl-cookies__choices input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
}

.sl-cookies p.sl-cookies__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 14px 0 0;
}

.sl-cookies__buttons button {
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	padding: 9px 18px;
	border: 2px solid var(--sl-btn);
	border-radius: 999px;
	background: var(--sl-btn);
	color: #fff;
	cursor: pointer;
}

.sl-cookies__buttons button:hover,
.sl-cookies__buttons button:focus-visible {
	background: var(--sl-navy);
	border-color: var(--sl-navy);
}

.sl-cookies__buttons button.sl-cookies__link {
	padding: 9px 6px;
	border-color: transparent;
	background: none;
	color: var(--sl-text);
	text-decoration: underline;
}

.sl-cookies__buttons button.sl-cookies__link:hover,
.sl-cookies__buttons button.sl-cookies__link:focus-visible {
	background: none;
	border-color: transparent;
	color: var(--sl-btn);
}

/* Header: the link to the customer's account, beside the basket. */
.site-header .sl-account {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-right: 10px;
	color: var(--sl-navy);
}

.site-header .sl-account svg {
	width: 20px;
	height: 20px;
}

.site-header .sl-account:hover,
.site-header .sl-account:focus-visible {
	color: var(--sl-btn);
}

.site-header .header-cart-wrap .header-cart-button,
.site-header .header-mobile-cart-wrap .header-cart-button {
	color: var(--sl-navy);
}

.site-header .header-cart-wrap .header-cart-button .header-cart-total,
.site-header .header-mobile-cart-wrap .header-cart-button .header-cart-total {
	background: var(--sl-btn);
	color: #fff;
}

/* Privacy policy: the button that stops a visitor being counted */
.sl-stats-choice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.sl-stats-choice__button {
	font: inherit;
	font-weight: 600;
	padding: 11px 22px;
	border: 2px solid var(--sl-navy);
	border-radius: 999px;
	background: transparent;
	color: var(--sl-navy);
	cursor: pointer;
}

.sl-stats-choice__button:hover {
	background: var(--sl-navy);
	color: #fff;
}

.sl-stats-choice__state {
	color: var(--sl-muted);
}

/* Product page: the tab that is not open was too faint to read (the theme fades it). */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	opacity: 1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a {
	color: var(--sl-muted);
}

/* Product page: the Add to basket button's words are the same size as every other button's. */
.woocommerce div.product form.cart .single_add_to_cart_button {
	font-size: 0.9375rem;
}

/* Shop: the row of brand links above the products. */
.sl-shop-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	margin: 0 0 22px;
}

.sl-shop-brands a {
	padding: 9px 18px;
	border: 1px solid var(--sl-line);
	border-radius: 999px;
	background: #fff;
	color: var(--sl-navy);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
}

.sl-shop-brands a:hover,
.sl-shop-brands a:focus-visible {
	border-color: var(--sl-btn);
	color: var(--sl-btn);
}

.sl-shop-brands a[aria-current="page"] {
	border-color: var(--sl-navy);
	background: var(--sl-navy);
	color: #fff;
}

/* Product page: the line that leads to the other strengths of the same product. */
.sl-strengths {
	margin: 16px 0 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Shop: the line about postage and collection, under a product's button and above the basket. */
/* A banner with a few lines under its title (a brand's page in the shop) keeps space above and below. */
.entry-hero .entry-header {
	padding-top: 22px;
	padding-bottom: 22px;
}

.sl-postage {
	margin: 14px 0 18px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--sl-muted);
}

/* ZO products: the note that stands where Add to basket would be, and the line naming the product
   at the top of the questionnaire. */
.sl-zo {
	margin: 18px 0 8px;
	padding: 18px 20px;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	background: var(--sl-pale);
}

.sl-zo p {
	margin: 0 0 12px;
}

.sl-zo p:last-child {
	margin-bottom: 0;
}

.woocommerce .sl-zo a.sl-zo__ask,
.woocommerce .sl-zo a.sl-zo__ask:visited {
	display: inline-block;
	padding: 10px 22px;
	border: 2px solid var(--sl-btn);
	border-radius: 999px;
	background: var(--sl-btn);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.woocommerce .sl-zo a.sl-zo__ask:hover,
.woocommerce .sl-zo a.sl-zo__ask:focus-visible {
	border-color: var(--sl-btn-hover);
	background: var(--sl-btn-hover);
	color: #fff;
}

.sl-zo .sl-zo__signin {
	font-size: 0.92rem;
	color: var(--sl-muted);
}

.sl-form .sl-zo__product {
	padding: 14px 18px;
	border: 1px solid var(--sl-line);
	border-radius: 12px;
	background: var(--sl-pale);
}