/*
Theme Name: GentsLook
Theme URI: https://schedopia.com/themes/gentslook
Author: ThinkMatic
Author URI: https://schedopia.com
Description: GentsLook is a sharp, modern block theme for men's barbers and grooming parlours. Graphite backgrounds, off-white bands, a burnt copper accent and tall condensed Big Shoulders Display headings give your shop a site with some edge. It ships with every page a barbershop needs: home, services, haircuts, beards and shaves, grooming, prices, barbers, your first visit with a clipper grade guide, gallery, about, journal, FAQ, contact, booking, shop policy and privacy policy. It works hand in hand with the free Schedopia booking plugin, so clients can choose a service, pick their barber, add extras like a nose wax or a scalp massage and book a time right on your site. One click installs Schedopia and sets up your services, barbers, opening hours and pages, so you are ready to take bookings in minutes. Two style variations are included: Daylight (off-white, graphite and darker copper) and Steel (cool gunmetal and steel blue).
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gentslook
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, one-column, style-variations, template-editing, threaded-comments, translation-ready, wide-blocks, blog
*/

/*
 * Almost all styling lives in theme.json. This file only holds what
 * theme.json cannot express: block style variations and small refinements.
 */

/* ---------- Shared values ---------- */

:root {
	/* Text on photographs, over the dark "shade" overlay in every variation. */
	--gentslook-on-photo: var(--wp--custom--on-photo--text);
	--gentslook-on-photo-accent: var(--wp--custom--on-photo--accent);
}

/* ---------- Accessibility ---------- */

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm);
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

/* One copper word in a heading. */
:is(h1, h2, h3, .wp-block-heading) em {
	color: var(--wp--preset--color--accent);
	font-style: normal;
}

/* A condensed display face: keep long words from breaking out on phones. */
:is(h1, h2, h3) {
	overflow-wrap: break-word;
	text-wrap: balance;
}

.wp-block-heading a {
	text-decoration: none;
}

.wp-block-heading a:hover {
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

/* ---------- Light bands ---------- */

/* "deep" is the contrasting band: off-white on the dark styles, graphite on
   Daylight. Remapping the palette here lets everything inside (buttons, cards,
   lists, Schedopia blocks) keep working without band-specific rules. */
.has-deep-background-color {
	--wp--preset--color--contrast: var(--wp--preset--color--on-deep);
	--wp--preset--color--contrast-2: var(--wp--custom--band--muted);
	--wp--preset--color--accent: var(--wp--custom--band--accent);
	--wp--preset--color--accent-2: var(--wp--custom--band--tint);
	--wp--preset--color--accent-3: var(--wp--custom--band--accent-hover);
	--wp--preset--color--on-accent: var(--wp--custom--band--on-accent);
	--wp--preset--color--line: var(--wp--custom--band--line);
	--wp--preset--color--surface: var(--wp--custom--band--surface);
	color: var(--wp--preset--color--on-deep);
}

/* ---------- Tag (eyebrow) ---------- */

.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.85em;
	width: fit-content;
	margin-bottom: 0;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
}

.is-style-eyebrow::before {
	content: "";
	flex: none;
	width: 2.25rem;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.is-style-eyebrow.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

.is-style-eyebrow.has-text-align-center::after {
	content: "";
	flex: none;
	width: 2.25rem;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.wp-block-cover .is-style-eyebrow {
	color: var(--gentslook-on-photo-accent);
}

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

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: color-mix(in srgb, var(--gentslook-on-photo) 55%, transparent);
	color: var(--gentslook-on-photo);
}

.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--gentslook-on-photo);
	border-color: var(--gentslook-on-photo);
	color: var(--wp--preset--color--shade);
}

.wp-block-button.is-style-text-link > .wp-block-button__link {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--accent);
	padding: 0 0 0.3em;
	border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}

.wp-block-button.is-style-text-link > .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.5em;
	transition: transform 0.2s ease;
}

.wp-block-button.is-style-text-link > .wp-block-button__link:hover {
	background: transparent;
	border-bottom-color: currentColor;
	color: var(--wp--preset--color--accent-3);
}

.wp-block-button.is-style-text-link > .wp-block-button__link:hover::after {
	transform: translateX(0.3em);
}

.wp-block-button__link.has-base-background-color:hover {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-accent) !important;
}

/* ---------- Images ---------- */

.wp-block-image.is-style-rounded img,
.wp-block-post-featured-image.is-style-rounded img {
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--preset--shadow--lift);
}

/* ---------- Groups ---------- */

.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
}

.wp-block-group.is-style-tint-card {
	background: var(--wp--preset--color--accent-2);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
}

.has-base-2-background-color .wp-block-group.is-style-tint-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}

/* ---------- Separators ---------- */

.wp-block-separator.is-style-short {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--accent);
	width: 3rem;
	margin-left: 0;
	opacity: 1;
}

/* ---------- Lists ---------- */

.wp-block-list.is-style-checks {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-checks li {
	position: relative;
	padding-left: 1.75em;
	margin-bottom: 0.65em;
}

.wp-block-list.is-style-checks li::before {
	content: "";
	position: absolute;
	left: 0.1em;
	top: 0.5em;
	width: 0.7em;
	height: 0.38em;
	border-left: 1.5px solid var(--wp--preset--color--accent);
	border-bottom: 1.5px solid var(--wp--preset--color--accent);
	transform: rotate(-45deg);
}

/* ---------- Announcement bar and header ---------- */

.gentslook-announce {
	letter-spacing: 0.04em;
}

.gentslook-announce a {
	text-decoration: none;
	font-weight: 500;
}

.gentslook-announce a:hover {
	text-decoration: underline;
}

.gentslook-announce p {
	margin: 0;
}

.gentslook-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: transparent !important;
}

/* The frosted backdrop lives on a pseudo-element: a backdrop-filter on the
   header itself would trap the mobile menu overlay inside the header. */
.gentslook-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

@media (max-width: 599px) {
	.gentslook-announce p + p {
		display: none;
	}
}

.admin-bar .gentslook-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .gentslook-header {
		top: 0;
	}
}

.gentslook-header .wp-block-site-title a {
	text-decoration: none;
}

.gentslook-header .wp-block-site-title,
.gentslook-header .wp-block-button__link,
.gentslook-header__phone {
	white-space: nowrap;
}

/* A small razor mark before the site name when there's no logo. */
.gentslook-header .wp-block-site-title a::before {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-right: 0.45em;
	vertical-align: -0.05em;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--gentslook-mark) center / contain no-repeat;
	mask: var(--gentslook-mark) center / contain no-repeat;
}

.gentslook-header .wp-block-site-logo + .wp-block-site-title a::before {
	display: none;
}

:root {
	--gentslook-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M2 15L15 2l7 7-5 2-1 3.500-7 1.500z'/%3E%3Cpath d='M9 15.500L6 22'/%3E%3C/svg%3E");
}

.gentslook-header__phone a {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.gentslook-header__phone a:hover {
	color: var(--wp--preset--color--accent);
}

/* Dropdown: a panel-coloured card under the parent item. */
.gentslook-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 15rem !important;
	padding: 0.5rem !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base-2) !important;
	box-shadow: var(--wp--preset--shadow--lift);
}

.gentslook-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.65rem 0.75rem !important;
	border-radius: var(--wp--custom--radius--sm);
}

.gentslook-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
}

.gentslook-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* Mobile overlay: big, calm list with the submenu always open. */
.gentslook-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.gentslook-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container, .wp-block-navigation__submenu-container) {
	align-items: flex-start !important;
	text-align: left;
}

.gentslook-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: 0.012em;
	text-transform: var(--wp--custom--heading-case);
}

.gentslook-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0 !important;
	padding: 0.25rem 0 0 1rem !important;
	border: 0 !important;
	box-shadow: none;
	background: transparent !important;
}

.gentslook-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

/* Collapse the menu into the overlay below 1100px, not WordPress's default 600px. */
@media (max-width: 1099px) {
	.gentslook-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.gentslook-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.gentslook-header__phone {
		display: none;
	}
}

@media (max-width: 599px) {
	.gentslook-header .gentslook-header__cta {
		display: none;
	}
}

/* The phone number is in the top bar too; drop it here before the menu wraps. */
@media (max-width: 1599px) {
	.gentslook-header__phone {
		display: none;
	}
}

.gentslook-header .wp-block-navigation__container {
	flex-wrap: nowrap;
}

/* ---------- Photo covers (hero, page heroes, booking band) ---------- */

body .wp-block-cover {
	color: var(--gentslook-on-photo);
}

/* Full-width photos keep the page's side padding, also inside post content,
   where WordPress drops it from nested containers. */
.wp-block-cover.alignfull {
	padding-left: 0;
	padding-right: 0;
}

/* Core sets positioned covers' content to width: auto with a doubled class. */
.wp-block-cover.alignfull > .wp-block-cover__inner-container.has-global-padding,
.wp-block-cover.alignfull.has-custom-content-position.has-custom-content-position > .wp-block-cover__inner-container.has-global-padding {
	width: 100%;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* Line the text up with the header and the sections below. */
.wp-block-cover.alignfull > .wp-block-cover__inner-container > .alignwide {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

.wp-block-cover :is(h1, h2, h3) em {
	color: var(--gentslook-on-photo-accent);
}

.wp-block-cover .has-contrast-2-color,
.wp-block-cover .gentslook-hero__lead {
	color: color-mix(in srgb, var(--gentslook-on-photo) 84%, transparent) !important;
}

/* A side veil in the overlay colour on inner-page heroes: strong behind the
   text on the left, clear on the right. Stronger on phones, where the text
   runs across the whole photo. */
.gentslook-page-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--wp--preset--color--shade) 88%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--shade) 70%, transparent) 38%,
		color-mix(in srgb, var(--wp--preset--color--shade) 0%, transparent) 72%);
}

@media (max-width: 781px) {
	.gentslook-page-hero--photo::before {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--wp--preset--color--shade) 35%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--shade) 82%, transparent) 55%,
			color-mix(in srgb, var(--wp--preset--color--shade) 90%, transparent) 100%);
	}
}

.gentslook-page-hero--photo .wp-block-cover__inner-container {
	z-index: 2;
}

.gentslook-hero__lead {
	max-width: 38rem;
}

/* ---------- Split hero ---------- */

.gentslook-split.wp-block-columns {
	gap: 0;
	align-items: stretch;
	margin-bottom: 0;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.gentslook-split__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) max(var(--wp--style--root--padding-left), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}

.gentslook-split__text > * {
	margin-block: 0;
}

/* Two lines on desktop, so the booking button stays above the fold. */
.gentslook-split__text h1.wp-block-heading {
	font-size: clamp(4.25rem, 7.4vw, 8rem) !important;
	line-height: 0.9;
}

.gentslook-split__photo {
	position: relative;
	min-height: 34rem;
	overflow: hidden;
}

.gentslook-split__photo .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.gentslook-split__photo .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The copper edge between the type and the photo. */
.gentslook-split__photo::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 1;
	width: 6px;
	background: var(--wp--preset--color--accent);
}

@media (max-width: 781px) {
	.gentslook-split__text {
		padding: var(--wp--preset--spacing--60) var(--wp--style--root--padding-right) var(--wp--preset--spacing--50) var(--wp--style--root--padding-left);
	}

	.gentslook-split__photo {
		min-height: 24rem;
	}

	.gentslook-split__photo::before {
		inset: 0 0 auto;
		width: auto;
		height: 6px;
	}
}

/* ---------- Ledger (oversized numbers under the hero) ---------- */

.gentslook-ledger {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.gentslook-ledger__cell {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-left: 1px solid var(--wp--preset--color--line);
}

.gentslook-ledger__cell:first-child {
	border-left: 0;
	padding-left: 0;
}

.gentslook-ledger p {
	margin: 0;
}

.gentslook-ledger__number {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1;
}

.gentslook-ledger__label {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (max-width: 781px) {
	.gentslook-ledger > .wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gentslook-ledger__cell:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}
}

/* ---------- Price board ---------- */

.gentslook-board {
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--40);
}

.gentslook-board__group .wp-block-heading {
	margin-bottom: 0.65rem;
}

.gentslook-board__row {
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.gentslook-board__row a {
	display: grid;
	grid-template-columns: 1fr auto 4.5rem;
	gap: 1rem;
	align-items: baseline;
	padding: 0.75rem 0;
	color: inherit;
	text-decoration: none;
	transition: padding-left 0.2s ease, color 0.2s ease;
}

.gentslook-board__row a:hover {
	padding-left: 0.5rem;
	color: var(--wp--preset--color--accent);
}

.gentslook-board__name {
	font-weight: 600;
}

.gentslook-board__time {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
}

.gentslook-board__price {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1;
	text-align: right;
}

/* ---------- Clipper grade guide ---------- */

.gentslook-grades {
	border: 1px solid var(--wp--preset--color--line);
}

/* Fades from the page colour to copper across the eight grades. */
.gentslook-grade {
	--gentslook-mix: 0%;
	padding: var(--wp--preset--spacing--30) 0.9rem;
	background: color-mix(in srgb, var(--wp--preset--color--accent) var(--gentslook-mix), var(--wp--preset--color--surface));
	color: var(--wp--preset--color--contrast);
}

.gentslook-grade:nth-child(2) { --gentslook-mix: 10%; }
.gentslook-grade:nth-child(3) { --gentslook-mix: 20%; }
.gentslook-grade:nth-child(4) { --gentslook-mix: 30%; }
.gentslook-grade:nth-child(5) { --gentslook-mix: 40%; }
.gentslook-grade:nth-child(6) { --gentslook-mix: 50%; }

/* The text colour flips here, so the fade jumps past the muddy middle. */
.gentslook-grade:nth-child(7) {
	--gentslook-mix: 80%;
	color: var(--wp--preset--color--shade);
}

.gentslook-grade:nth-child(8) {
	--gentslook-mix: 100%;
	color: var(--wp--preset--color--on-accent);
}

.gentslook-grade p {
	margin: 0;
}

.gentslook-grade__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 800;
	line-height: 0.9;
}

.gentslook-grade__length {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.gentslook-grade__note {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.35;
}

/* ---------- Icons (feature cards) ---------- */

.gentslook-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	border-radius: var(--wp--custom--radius--md);
	font-size: 0;
	line-height: 0;
}

.gentslook-icon::before {
	content: "";
	width: 1.35rem;
	height: 1.35rem;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--gentslook-icon) center / contain no-repeat;
	mask: var(--gentslook-icon) center / contain no-repeat;
}

.gentslook-icon--sm {
	width: 2.5rem;
	height: 2.5rem;
}

.gentslook-icon--sm::before {
	width: 1.15rem;
	height: 1.15rem;
}

/* Line icons drawn for GentsLook (GPL, see readme.txt). */
.gentslook-icon--scissors { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6.5' r='2.8'/%3E%3Ccircle cx='6' cy='17.5' r='2.8'/%3E%3Cpath d='M8.3 8.1L20.5 18.5M8.3 15.9L20.5 5.5'/%3E%3C/svg%3E"); }
.gentslook-icon--razor { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15.5L14.5 4 20 9.5 16 11 15 14 8.5 15.5z'/%3E%3Cpath d='M8.5 15.5L6 21l-3-1 2-4.5'/%3E%3C/svg%3E"); }
.gentslook-icon--clipper { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='8' width='10' height='13' rx='2.5'/%3E%3Cpath d='M6 8V4M9 8V4M12 8V4M15 8V4M18 8V4M6 4h12M10 13h4'/%3E%3C/svg%3E"); }
.gentslook-icon--comb { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v4H3zM5 11v7M8 11v7M11 11v7M14 11v7M17 11v7M20 11v5'/%3E%3C/svg%3E"); }
.gentslook-icon--towel { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v5a3 3 0 01-3 3H5zM5 12v8h11V12M8 16h5'/%3E%3Cpath d='M9 2c-.8 1 .8 1.200 0 2M13 2c-.8 1 .8 1.200 0 2'/%3E%3C/svg%3E"); }
.gentslook-icon--chat { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v10.5H10L5.5 19.5V15.5H4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E"); }
.gentslook-icon--shield { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.2-8 9-4.6-.8-8-4.5-8-9V6l8-3z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.gentslook-icon--users { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0113 0M16 4.7a3.5 3.5 0 010 6.6M18 14a6.5 6.5 0 013.5 6'/%3E%3C/svg%3E"); }
.gentslook-icon--star { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9L12 3z'/%3E%3C/svg%3E"); }
.gentslook-icon--heart { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.4-7.5-10A4.5 4.5 0 0112 7a4.5 4.5 0 017.5 3c0 5.6-7.5 10-7.5 10z'/%3E%3C/svg%3E"); }
.gentslook-icon--clock { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.gentslook-icon--calendar { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M8.5 15l2 2 4-4'/%3E%3C/svg%3E"); }
.gentslook-icon--card { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
.gentslook-icon--map { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6-6.5-11a6.5 6.5 0 0113 0c0 5-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); }
.gentslook-icon--phone { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.8 4.5-2.3 1.4a11 11 0 005.1 5.1l1.4-2.3L19 14.5V18a2 2 0 01-2 2A15 15 0 013 6a2 2 0 012-2z'/%3E%3C/svg%3E"); }
.gentslook-icon--droplet { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 01-12 0c0-4.5 6-11 6-11z'/%3E%3Cpath d='M9 14.5a3 3 0 003 3'/%3E%3C/svg%3E"); }
.gentslook-icon--sparkle { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z'/%3E%3C/svg%3E"); }
.gentslook-icon--image { --gentslook-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.8'/%3E%3Cpath d='M21 16l-5-5-8.5 9'/%3E%3C/svg%3E"); }

/* ---------- Feature cards ---------- */

.gentslook-feature {
	height: 100%;
}

.gentslook-feature .wp-block-heading {
	margin-top: 0.5rem;
}

/* ---------- Steps ---------- */

.gentslook-step__number {
	margin: 0;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1;
}

.gentslook-step__number::before {
	content: "0";
}

/* ---------- Team ---------- */

.gentslook-person {
	height: 100%;
}

.gentslook-person .wp-block-image {
	margin-bottom: 0.75rem;
}

.gentslook-person .wp-block-image img {
	box-shadow: none;
	filter: grayscale(0.85) contrast(1.05);
	transition: filter 0.4s ease;
}

.gentslook-person:hover .wp-block-image img {
	filter: none;
}

.gentslook-person .wp-block-heading {
	margin-top: 0.15rem;
}

.gentslook-person__role {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---------- Specialty tiles ---------- */

.gentslook-tile {
	position: relative;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	transition: border-color 0.3s ease;
}

.gentslook-tile .wp-block-image {
	margin: 0;
	overflow: hidden;
}

.gentslook-tile .wp-block-image img {
	border-radius: 0;
	transition: transform 0.6s ease;
}

.gentslook-tile__body {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.gentslook-tile .wp-block-heading a {
	color: inherit;
	text-decoration: none;
}

.gentslook-tile .wp-block-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gentslook-tile__more {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gentslook-tile__more::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.5em;
	transition: transform 0.2s ease;
}

.gentslook-tile:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}

.gentslook-tile:hover .gentslook-tile__more::after {
	transform: translateX(0.3em);
}

@media (prefers-reduced-motion: no-preference) {
	.gentslook-tile:hover .wp-block-image img {
		transform: scale(1.05);
	}
}

/* ---------- Anchor chips ---------- */

.gentslook-chipnav {
	gap: 0.5rem !important;
}

.gentslook-chipnav p {
	margin: 0;
}

.gentslook-chipnav a {
	display: inline-block;
	padding: 0.65em 1.2em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.gentslook-chipnav a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* ---------- Opening hours table ---------- */

.gentslook-hours {
	margin: 0;
}

.gentslook-hours p {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.6em 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

.gentslook-hours p span:first-child {
	font-weight: 500;
}

/* ---------- Reviews ---------- */

.gentslook-quote .wp-block-quote {
	border: 0;
	padding: 0;
	margin: 0;
}

.gentslook-quote .wp-block-quote p {
	font-size: var(--wp--preset--font-size--medium);
}

.gentslook-quote .wp-block-quote cite {
	display: block;
	margin-top: 1.25rem;
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gentslook-stars {
	margin: 0;
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.2em;
	font-size: 0.9em;
}

/* ---------- FAQ (details) ---------- */

.wp-block-details {
	margin: 0;
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-details + .wp-block-details {
	margin-top: 0 !important;
}

.wp-block-details summary {
	cursor: pointer;
	position: relative;
	padding-right: 2.75rem;
	list-style: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.1rem;
	font-weight: 400;
}

.wp-block-details[open] summary::after {
	content: "\2212";
	border-color: var(--wp--preset--color--accent);
}

.wp-block-details > :not(summary) {
	margin-top: 0.75em;
	color: var(--wp--preset--color--contrast-2);
}

/* ---------- Stats ---------- */

.gentslook-stat__number {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
}

/* ---------- Price lists (add-ons, extras) ---------- */

.gentslook-addon {
	gap: 1.5rem !important;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.gentslook-addon p {
	margin: 0;
}

.gentslook-addon__price {
	flex: none;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	white-space: nowrap;
}

/* ---------- Gallery grid ---------- */

.gentslook-gallery .wp-block-image {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm);
}

.gentslook-gallery .wp-block-image img {
	border-radius: 0;
}

.gentslook-gallery .wp-block-image figcaption {
	position: absolute;
	inset: auto 0 0;
	margin: 0;
	padding: 2.5rem 1rem 0.9rem;
	background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--wp--preset--color--shade) 80%, transparent));
	color: var(--gentslook-on-photo);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.gentslook-gallery .wp-block-image:hover figcaption,
.gentslook-gallery .wp-block-image:focus-within figcaption {
	opacity: 1;
}

@media (hover: none) {
	.gentslook-gallery .wp-block-image figcaption {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.gentslook-gallery .wp-block-image img {
		transition: transform 0.6s ease;
	}

	.gentslook-gallery .wp-block-image:hover img {
		transform: scale(1.04);
	}
}

/* ---------- Comparison cards ---------- */

.gentslook-compare .wp-block-heading {
	margin-top: 0;
}

.gentslook-compare__tag {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------- Footer ---------- */

.gentslook-footer {
	border-top: 1px solid var(--wp--preset--color--line);
}

.gentslook-footer .gentslook-brand {
	color: inherit;
	font-size: 2.25rem;
}

.gentslook-footer .wp-block-navigation {
	letter-spacing: 0;
	text-transform: none;
}

.gentslook-footer .wp-block-navigation-item {
	margin-bottom: 0.15rem;
}

.gentslook-footer .wp-block-navigation a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.gentslook-footer .gentslook-hours p {
	padding: 0.4em 0;
}

.gentslook-footer__heading {
	margin-bottom: 0.75rem;
	opacity: 0.7;
}

/* ---------- Booking placeholder (when Schedopia is not active) ---------- */

.gentslook-booking-placeholder {
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	text-align: center;
}

.gentslook-booking-placeholder__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	text-transform: var(--wp--custom--heading-case);
	margin: 0 0 0.4em;
}

.gentslook-booking-placeholder p {
	margin: 0.4em 0;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link,
	.wp-block-navigation-item__content {
		transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	}
}

/* ---------- Service preview (before Schedopia is set up) ---------- */

.gentslook-preview-note {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: var(--wp--preset--spacing--30);
}

.gentslook-services {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}

.gentslook-services--grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

@media (min-width: 960px) {
	.gentslook-services--grid {
		grid-template-columns: repeat(var(--gentslook-cols, 3), minmax(0, 1fr));
	}
}

.gentslook-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
}

.gentslook-card img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.gentslook-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--30);
}

.gentslook-card__body p,
.gentslook-card__body h3 {
	margin: 0;
}

.gentslook-card__cat {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gentslook-card__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: var(--wp--custom--heading-case);
}

.gentslook-card__desc {
	flex: 1;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

.gentslook-card__meta {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
}

.gentslook-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 0.5rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

.gentslook-card__price b {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3rem;
	font-weight: 800;
}

.gentslook-card__price span {
	margin-left: 0.35em;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
}

.gentslook-card__book {
	padding: 0.6em 1.1em;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.gentslook-card__book:hover {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--on-accent);
}

.gentslook-card--person img {
	aspect-ratio: 4 / 5;
}

.gentslook-menu__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 0.25rem 1.5rem;
	align-items: baseline;
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.gentslook-menu__row p {
	margin: 0;
}

.gentslook-menu__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.gentslook-menu__desc {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

.gentslook-menu__meta {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.gentslook-menu__price {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	white-space: nowrap;
}

/* ---------- Muted text and dividers on any background ---------- */

.gentslook-muted {
	opacity: 0.78;
}

.gentslook-divider {
	border-top-style: solid;
	border-top-color: color-mix(in srgb, currentColor 18%, transparent);
}

/* Anchored sections clear the sticky header. */
[id] {
	scroll-margin-top: 6rem;
}

/* Sections butt up against the header and footer; no gap between template parts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------- Page heroes ---------- */

.gentslook-page-hero:not(.wp-block-cover) {
	background-image: radial-gradient(60rem 30rem at 90% -20%, color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent), transparent 70%);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.gentslook-page-hero h1 {
	font-weight: 800;
}

/* Portraits and tiles two across on phones; tighter type to fit. */
@media (max-width: 599px) {
	.gentslook-team,
	.gentslook-tiles {
		gap: var(--wp--preset--spacing--30) !important;
	}

	.gentslook-team .wp-block-heading,
	.gentslook-tiles .wp-block-heading {
		font-size: 1.125rem !important;
	}

	.gentslook-team .gentslook-person__role {
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
	}

	.gentslook-menu__row {
		grid-template-columns: 1fr auto;
	}

	.gentslook-menu__meta {
		grid-row: 2;
	}
}