/*
 * The site's standard look since October 2026: the colours of the clinic's printed treatment menu
 * and business card, laid over site.css. Adding ?look=original to an address leaves this file out,
 * to compare with the earlier look.
 *
 * Where a printed colour is too faint for small text on a screen, a slightly deeper version is used:
 * the bright blue of the printed prices (#2e86c4) becomes #1c68a6 for buttons and links, and the
 * terracotta (#c8775a) becomes #9f4f35 for small labels.
 */
html:root {
	--sl-navy: #0e395b;
	--sl-navy-hover: #164972;
	--sl-btn: #1c68a6;
	--sl-btn-hover: #0e395b;
	--sl-bg: #fbf9f6;
	--sl-sand: #eef3f8;
	--sl-pale: #e3edf6;
	--sl-text: #24303b;
	--sl-muted: #586472;
	--sl-line: #dbe4ec;
	--sl-accent: #9f4f35;
	--global-palette1: #0e395b;
	--global-palette2: #164972;
	--global-palette3: #0e395b;
	--global-palette4: #24303b;
	--global-palette5: #4a5663;
	--global-palette6: #586472;
	--global-palette7: #eef3f8;
	--global-palette8: #fbf9f6;
}

/* The homepage's Course prices band keeps the warm sand it had before 2026: the white course cards
   stand out more on it than on the pale blue used for the other bands (the clinic's choice). */
#offers.sl-section--sand {
	background: #efe7dc;
}

/* Small labels above headings in terracotta, as on the printed menu ("SIGNATURE"). */
.sl-eyebrow {
	color: var(--sl-accent);
}

.sl-section--navy .sl-eyebrow {
	color: #f2c8b5;
}

/* The two circles from the business card, at the right-hand end of every navy band and banner: a
   large one cut by the top edge and a smaller, lighter one cut by the bottom edge, as on the card.
   Both are sized from the band's own height, so they keep their distance from each other however
   tall or short the band is. They are drawn behind the band's contents, so they cannot cover words
   or buttons. On phones only the corner of the large circle shows. */
.sl-section--navy,
html:root .sl-page-head,
.entry-hero .entry-hero-container-inner {
	position: relative;
	isolation: isolate;
	background-color: var(--sl-navy);
}

.sl-section--navy::before,
html:root .sl-page-head::before,
.entry-hero .entry-hero-container-inner::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	aspect-ratio: 1;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(circle closest-side, #164972 99.5%, rgba(22, 73, 114, 0) 100%),
		radial-gradient(circle closest-side, #1e5b8b 99.5%, rgba(30, 91, 139, 0) 100%);
	background-repeat: no-repeat;
	/* In units of the band's height: the large circle is 0.9 across with its centre just inside the
	   top right corner; the small one is 0.46 across, centred near the bottom right corner. The gap
	   between them is a fifth of the band's height. */
	background-size: 90% 90%, 46% 46%;
	background-position: 450% -400%, 114.8% 129.6%;
}

@media (max-width: 767px) {
	.sl-section--navy::before,
	html:root .sl-page-head::before,
	.entry-hero .entry-hero-container-inner::before {
		bottom: auto;
		width: 110px;
		height: 110px;
		aspect-ratio: auto;
		background-image: radial-gradient(circle closest-side, #164972 99.5%, rgba(22, 73, 114, 0) 100%);
		background-size: 220px 220px;
		background-position: 0 -110px;
	}
}

/* Price lists with the dotted rules of the printed menu. */
.sl-price-row {
	border-bottom-style: dotted;
	border-bottom-color: #b9c9d8;
}

/* ---------- Navy banner at the top of every inner page, as at the top of the printed menu ---------- */

html:root .sl-page-head,
.entry-hero .entry-hero-container-inner {
	color: #fff;
}

html:root .sl-page-head {
	padding: 44px 0 46px;
}

.sl-page-head h1,
.entry-hero .entry-header h1 {
	color: #fff;
}

html:root .sl-page-head .sl-eyebrow {
	color: #f2c8b5;
}

html:root .sl-page-head .sl-lead {
	color: #dbe7f2;
}

html:root .sl-page-head .sl-small {
	color: #b6cbde;
}

html:root .sl-page-head p a {
	color: #fff;
}

/* Buttons on the banner are white, as they already are on navy bands. */
html:root .sl-page-head .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: #fff;
	border-color: #fff;
	color: var(--sl-navy);
}

html:root .sl-page-head .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--sl-pale);
	border-color: var(--sl-pale);
	color: var(--sl-navy);
}

html:root .sl-page-head .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

html:root .sl-page-head .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
	background: #fff;
	color: var(--sl-navy);
}

/* On treatment pages the title comes first and the photo hangs below the banner, over the next section. */
.sl-page-head .sl-wrap > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
}

html:root .sl-page-head:has(.sl-page-head__photo) {
	padding-bottom: 0;
}

html:root .sl-page-head .sl-page-head__photo {
	order: 9;
	margin: 30px 0 -120px;
	position: relative;
	z-index: 2;
}

html:root .sl-page-head .sl-page-head__photo img {
	box-shadow: 0 18px 40px rgba(14, 57, 91, 0.2);
}

html:root .sl-page-head:has(.sl-page-head__photo) + .sl-section {
	padding-top: 156px;
}

@media (max-width: 767px) {
	html:root .sl-page-head {
		padding: 32px 0 34px;
	}

	html:root .sl-page-head .sl-page-head__photo {
		margin: 22px 0 -64px;
	}

	html:root .sl-page-head:has(.sl-page-head__photo) + .sl-section {
		padding-top: 92px;
	}
}

/* ---------- The blog ---------- */

/* An article's title sits in the navy banner (the theme puts it there; see post_title_layout in
   setup.php), lined up with the article's text and with a small label above it. */
.single-post .entry-hero .hero-container {
	max-width: var(--global-content-narrow-width, 842px);
}

.single-post .entry-hero .entry-header {
	align-items: flex-start;
	padding: 44px 0 46px;
	text-align: left;
}

.single-post .entry-hero .entry-header::before {
	content: "From the blog";
	margin-bottom: 12px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #f2c8b5;
}

.single-post .entry-hero h1.entry-title {
	margin: 0 0 12px;
	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;
}

.single-post .entry-hero .entry-meta,
.single-post .entry-hero .entry-meta a {
	color: #dbe7f2;
}

/* The blog page lists its articles as white cards, as the homepage does. */
.blog .loop-entry {
	overflow: hidden;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	background: var(--sl-white);
	box-shadow: none;
}

.blog .loop-entry .entry-content-wrap {
	padding: 24px 26px 22px;
}

.blog .loop-entry .entry-title {
	font-size: 1.5rem;
	line-height: 1.22;
}

.blog .loop-entry .entry-meta {
	color: var(--sl-muted);
}

.blog .loop-entry .post-more-link {
	color: var(--sl-btn);
}

/* The shop frames each product's photo, a white square with a fine outline, and lets the name,
   price and button sit on the page beneath it: in the shop itself, on a brand's page and under
   "Related products". This is how other skincare shops draw theirs (checked October 2026: none of
   thirteen used a shadow or a card round the whole tile, and most had square corners). On hover the
   outline darkens a little. */
.woocommerce ul.products li.product.loop-entry {
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.woocommerce ul.products li.product.loop-entry .woocommerce-loop-image-link {
	display: block;
	border: 1px solid var(--sl-line);
	background: var(--sl-white);
	transition: border-color 0.2s ease;
}

.woocommerce ul.products li.product.loop-entry:hover .woocommerce-loop-image-link {
	border-color: #a9bccd;
}

/* The words line up with the photo's left edge. */
.woocommerce ul.products li.product.loop-entry .product-details.entry-content-wrap {
	margin: 0;
	padding: 14px 0 0;
	border-radius: 0;
	background: transparent;
}

/* On phones the rows sit close together, so each button keeps some air before the next photo. */
@media (max-width: 767px) {
	.woocommerce ul.products li.product.loop-entry .product-details.entry-content-wrap {
		padding-bottom: 18px;
	}
}

/* ---------- Navy title bars on price lists, as on the printed menu ---------- */

.sl-section h3:has(+ .sl-prices),
html:root .sl-pricelist__item h3 {
	box-sizing: border-box;
	max-width: 720px;
	margin: 26px 0 0;
	padding: 11px 22px;
	border-radius: 12px;
	background: var(--sl-navy);
	color: #fff;
	font-family: var(--sl-sans);
	font-size: 0.82rem;
	/* Regular, in keeping with the lighter headings; it was bold before October 2026. */
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

html:root .sl-pricelist__item h3 {
	max-width: none;
	margin-top: 0;
}

html:root .sl-pricelist__item h3 a,
html:root .sl-pricelist__item h3 a:hover {
	color: #fff;
}

.sl-section h3:has(+ .sl-prices),
html:root .sl-pricelist__item h3:has(+ .sl-prices) {
	border-radius: 12px 12px 0 0;
}

.sl-section h3:has(+ .sl-prices) + .sl-prices {
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* A smaller label inside a list (for example "Intimate" under Waxing on the all-prices page). */
html:root .sl-pricelist__sub:has(+ .sl-prices) {
	margin: 10px 0 0 !important;
	padding: 8px 22px;
	border: 1px solid var(--sl-line);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background: var(--sl-pale);
	color: var(--sl-navy);
}

html:root .sl-pricelist__sub:has(+ .sl-prices) + .sl-prices {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* ---------- A short blue rule under section headings, as under the name on the business card ---------- */

.sl-section h2::after {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	margin-top: 14px;
	border-radius: 2px;
	background: #2e86c4;
}

.sl-section--navy h2::after {
	background: #9fd0f0;
}

.sl-legal h2::after {
	content: none;
}