/* Salon Suite theme styles */

:root {
	--color-bg: #faf6f2;
	--color-surface: #ffffff;
	--color-ink: #2b2420;
	--color-ink-soft: #6b5f57;
	--color-accent: #b76e79;
	--color-accent-dark: #96525c;
	--color-accent-light: #f4e9eb;
	--color-line: #e8ddd4;
	--font-heading: Georgia, 'Times New Roman', serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--radius: 10px;
	/* Separate from --radius (cards/images/inputs) rather than reusing it
	   directly — a palette-wide 999px would turn cards into ovals, so
	   buttons need their own token to have their own shape language. */
	--radius-button: 999px;
	--container-width: 1160px;
	--font-accent: Georgia, 'Times New Roman', serif;
	--shape-radius-lg: 24px;
	--spacing-section: 96px;
	--shadow-soft: 0 12px 32px rgba(43, 36, 32, 0.08);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	line-height: 1.6;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

a {
	color: var(--color-accent-dark);
}

img {
	max-width: 100%;
	display: block;
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.btn {
	display: inline-block;
	padding: 14px 32px;
	/* accent-dark (not accent) so white button text clears WCAG AA (4.5:1) contrast */
	background: var(--color-accent-dark);
	color: #fff;
	/* var(--radius-button), not a hardcoded pill shape — otherwise every
	   layout's button looks identical regardless of that layout's own
	   shape language (e.g. hair-03's sharp square buttons vs the default
	   rounded pill). */
	border-radius: var(--radius-button);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.02em;
	border: none;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.15s ease;
}

.btn:hover {
	filter: brightness(0.88);
	color: #fff;
}

.btn-outline {
	background: transparent;
	color: var(--color-accent-dark);
	border: 2px solid var(--color-accent-dark);
}

.btn-outline:hover {
	background: var(--color-accent-dark);
	color: #fff;
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.8rem;
	color: var(--color-accent-dark);
	font-weight: 600;
}

.section {
	padding: 80px 0;
}

.section-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
}

/* Accessibility helpers */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--color-ink);
	color: #fff;
	border-radius: var(--radius);
	text-decoration: none;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-outline:focus-visible {
	outline: 3px solid var(--color-accent-dark);
	outline-offset: 2px;
}

/* Site notice: a dismissible announcement/promo bar above the header,
   toggled from Appearance → Customize → Site Notice. Plain block flow (not
   fixed/sticky) so it scrolls away with the page — only the header below it
   is sticky on mobile. */
.site-notice {
	background: var(--color-accent-dark);
	color: #fff;
}

.site-notice-inner {
	max-width: var(--container-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 10px 40px;
	position: relative;
	text-align: center;
}

.site-notice-message {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
}

.site-notice-link {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-left: 6px;
	white-space: nowrap;
}

.site-notice-dismiss {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: none;
	color: #fff;
	opacity: 0.8;
	cursor: pointer;
}

.site-notice-dismiss:hover,
.site-notice-dismiss:focus-visible {
	opacity: 1;
}

@media (max-width: 600px) {
	.site-notice-inner {
		padding: 10px 36px;
	}

	.site-notice-message {
		font-size: 0.8rem;
	}

	.site-notice-link {
		display: block;
		margin-left: 0;
	}
}

/* Site header */
#site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	max-width: var(--container-width);
	margin: 0 auto;
	position: relative;
}

.site-branding {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: bold;
}

.site-branding a {
	color: var(--color-ink);
	text-decoration: none;
}

#site-header nav ul {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#site-header nav a {
	text-decoration: none;
	color: var(--color-ink);
	font-weight: 500;
}

#site-header nav a:hover {
	color: var(--color-accent-dark);
}

/* Wraps the hamburger toggle, nav, and account link as one group so
   #site-header's own space-between still only sees two top-level items
   (branding | this group) — same reasoning the mobile nav-open dropdown
   already relies on: nav's position:absolute/top:100% targets the
   nearest *positioned* ancestor, and this wrapper deliberately has no
   position set, so #site-header (position:relative) stays that ancestor
   and nothing about the existing dropdown behavior changes. */
.header-actions {
	display: flex;
	align-items: center;
	gap: 28px;
}

.header-account-link {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--color-ink);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	white-space: nowrap;
}

.header-account-link:hover {
	color: var(--color-accent-dark);
}

/* Mobile menu toggle */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.menu-toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-ink);
	margin: 0 auto;
}

/* Hero */
.hero {
	padding: 100px 24px;
	text-align: center;
	background: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-bg) 100%);
}

.hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.5rem);
	max-width: 800px;
	margin: 0.3em auto 0.4em;
}

.hero p {
	max-width: 560px;
	margin: 0 auto 32px;
	color: var(--color-ink-soft);
	font-size: 1.15rem;
}

.hero-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Card grids */
.grid {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat( 3, 1fr );
}

.card {
	background: var(--color-surface);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.15s ease;
	border: 1px solid var(--color-line);
}

.card-media {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 2rem;
}

/* A real featured-image photo (as opposed to the gradient/icon placeholder,
   which is already sized correctly by its own SVG viewBox) needs to be
   forced to fill the aspect-ratio box — otherwise it renders at its natural
   size, ignoring .card-media's aspect-ratio and blowing that card's height
   out relative to its siblings in the same grid row. */
.card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-body {
	padding: 24px;
}

.card-body h3 {
	font-size: 1.2rem;
	margin-bottom: 6px;
}

.card-meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	color: var(--color-ink-soft);
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--color-line);
}

.card-price {
	font-weight: 700;
	color: var(--color-accent-dark);
}

/* .services-grid — a smaller-card, 4-per-row variant of .grid, used only
   by the homepage "Our most-loved services" section (kept separate from
   plain .grid so the Staff/testimonial grids elsewhere aren't affected). */
.services-grid {
	grid-template-columns: repeat( 4, 1fr );
	gap: 20px;
}

.services-grid .card-media {
	aspect-ratio: 3 / 2;
}

.services-grid .card-body {
	padding: 16px;
}

.services-grid .card-body h3 {
	font-size: 1.05rem;
}

/* .staff-grid — 4-per-row variant of .grid, used only by the homepage
   "Meet the team" section (matches .services-grid's column count so the
   two homepage sections line up, without affecting the Our Team page or
   other .grid usages elsewhere). */
.staff-grid {
	grid-template-columns: repeat( 4, 1fr );
	gap: 20px;
}

/* Service card description: clamped to ~2 lines by default with a "Show
   more" toggle (assets/js/read-more.js) — only added when the description
   is long enough that the clamp would actually cut it off. */
.card-desc-wrap.has-more .desc {
	max-height: 2.9em;
	overflow: hidden;
}

.card-desc-wrap.has-more.is-expanded .desc {
	max-height: none;
}

.desc-toggle {
	display: inline-block;
	margin: 4px 0 0;
	padding: 0;
	background: none;
	border: none;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-accent-dark);
	text-decoration: underline;
	cursor: pointer;
}

/* Staff */
.staff-card {
	text-align: center;
}

.staff-avatar {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	margin: 24px auto 16px;
	background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 2rem;
	overflow: hidden;
}

.staff-avatar-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.staff-role {
	color: var(--color-accent-dark);
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Testimonials */
.testimonial {
	background: var(--color-surface);
	border-radius: var(--radius);
	padding: 32px;
	border: 1px solid var(--color-line);
}

.testimonial p {
	font-style: italic;
	color: var(--color-ink-soft);
}

.testimonial cite {
	display: block;
	margin-top: 16px;
	font-weight: 600;
	font-style: normal;
}

/* CTA banner */
.cta-banner {
	background: var(--color-ink);
	color: #fff;
	text-align: center;
	padding: 64px 24px;
	border-radius: var(--radius);
}

.cta-banner h2 {
	color: #fff;
}

.cta-banner p {
	color: #d8cfc8;
	max-width: 480px;
	margin: 0 auto 24px;
}

/* Services page groupings */
.service-category {
	margin-bottom: 64px;
}

.service-category h2 {
	border-bottom: 2px solid var(--color-accent);
	display: inline-block;
	padding-bottom: 8px;
	margin-bottom: 32px;
}

.service-list-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 18px 0;
	border-bottom: 1px solid var(--color-line);
	gap: 16px;
}

.service-list-item h4 {
	margin: 0 0 4px;
}

.service-list-item .desc {
	color: var(--color-ink-soft);
	font-size: 0.95rem;
	margin: 0;
}

.service-list-item .price {
	white-space: nowrap;
	font-weight: 700;
	color: var(--color-accent-dark);
}

/* Elementor Hero widget: full-bleed variant with an optional background
   image + dark overlay for text legibility (distinct from .hero-has-slides,
   which is reserved for the slideshow variant that already pairs it with
   .hero-slider). */
.ss-hero-full {
	position: relative;
	background-size: cover;
	background-position: center;
}

.ss-hero-full.has-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba( 43, 36, 32, 0.5 );
}

.ss-hero-full .hero-content {
	position: relative;
	z-index: 2;
}

.ss-hero-full.has-overlay h1,
.ss-hero-full.has-overlay p,
.ss-hero-full.has-overlay .eyebrow {
	color: #fff;
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.45 );
}

/* Elementor Hero widget: slideshow variant text needs the same white/
   text-shadow treatment as the full-bleed overlay, regardless of which
   heading tag is used (widgets aren't tied to .hero-bold-heading/-sub). */
.hero-slider .hero-content h1,
.hero-slider .hero-content p,
.hero-slider .hero-content .eyebrow {
	color: #fff;
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.45 );
}

/* Elementor Hero widget: split variant reuses .hero-elegant's grid but
   needs its own reversible modifier (the "Reverse layout" widget control) —
   direction:rtl/ltr swaps which grid column each child lands in without
   reordering markup, matching the .ss-split trick below. */
.hero-elegant.is-reversed {
	direction: rtl;
}

.hero-elegant.is-reversed > * {
	direction: ltr;
}

/* Elementor widget library: shared two-column media+text split, used by any
   widget with a "Reverse layout" control (see
   Salon_Suite_Reverse_Layout_Control in inc/elementor/class-widget-base.php).
   row-reverse (rather than reordering markup) keeps DOM/reading order
   intact while visually swapping which side the media sits on. */
.ss-split {
	display: flex;
	align-items: center;
	gap: 48px;
}

.ss-split > * {
	flex: 1 1 0;
	min-width: 0;
}

.ss-split.is-reversed {
	flex-direction: row-reverse;
}

@media (max-width: 780px) {
	.ss-split,
	.ss-split.is-reversed {
		flex-direction: column;
	}
}

/* Contact page */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}

/* Elementor Location & Hours widget's "Reverse layout" control — same
   direction:rtl/ltr swap trick as .hero-elegant.is-reversed. */
.contact-grid.is-reversed {
	direction: rtl;
}

.contact-grid.is-reversed > * {
	direction: ltr;
}

.contact-info dt {
	font-weight: 700;
	margin-top: 20px;
}

.contact-info dd {
	margin: 4px 0 0;
	color: var(--color-ink-soft);
}

.map-placeholder {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-ink-soft);
}

/* Contact form */
.form-row {
	margin-bottom: 20px;
}

.form-row label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

/* :not(...)-excluded rather than an enumerated list of input[type="..."]
   selectors — the previous version only listed type="text"/"email" and
   silently left every other field (password, tel, url, number, ...)
   unstyled at the browser's tiny default width. Excluding the few types
   that must NOT get this treatment is more robust against a future field
   using a type nobody thought to add to an allow-list. */
.contact-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(:disabled),
.contact-form textarea,
.review-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.review-form select,
.review-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 1rem;
	background: var(--color-bg);
}

/* Disabled fields (e.g. the account page's read-only email field) keep the
   same sizing/shape as everything else, just visually muted instead of
   fully unstyled. */
.contact-form input:disabled {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 1rem;
	background: var(--color-line);
	color: var(--color-ink-soft);
}

.contact-form input:focus,
.contact-form textarea:focus,
.review-form input:focus,
.review-form select:focus,
.review-form textarea:focus {
	outline: 3px solid var(--color-accent-dark);
	outline-offset: 1px;
}

.form-notice {
	padding: 16px 20px;
	border-radius: var(--radius);
	margin-bottom: 24px;
}

.form-notice-success {
	background: #e4f3e6;
	color: #205a2b;
}

.form-notice-error {
	background: #fbe6e6;
	color: #7a2323;
}

/* Blog: archive/search entries and single post content */
.archive-entry {
	padding: 32px 0;
	border-bottom: 1px solid var(--color-line);
}

.archive-entry h2 {
	margin-bottom: 4px;
}

.archive-entry h2 a {
	color: var(--color-ink);
	text-decoration: none;
}

.archive-entry h2 a:hover {
	color: var(--color-accent-dark);
}

.entry-meta {
	color: var(--color-ink-soft);
	font-size: 0.9rem;
	margin: 0 0 12px;
}

.entry-content,
.entry-excerpt {
	color: var(--color-ink-soft);
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	margin-bottom: 1.2em;
}

.entry-thumbnail {
	margin: 24px 0;
	border-radius: var(--radius);
	overflow: hidden;
}

.archive-pagination {
	margin-top: 32px;
	display: flex;
	gap: 12px;
	justify-content: center;
}

.search-form {
	display: flex;
	gap: 12px;
	max-width: 480px;
	margin: 24px auto 0;
}

.search-form input[type="search"] {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid var(--color-line);
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
}

.search-form input[type="submit"] {
	padding: 12px 24px;
	background: var(--color-accent-dark);
	color: #fff;
	border: none;
	border-radius: var(--radius-button);
	font-weight: 600;
	cursor: pointer;
}

.not-found-search {
	max-width: 480px;
	margin: 0 auto;
}

/* Comments */
.comments-area {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--color-line);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list li {
	padding: 20px 0;
	border-bottom: 1px solid var(--color-line);
}

.comment-form label {
	display: block;
	font-weight: 600;
	margin: 16px 0 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-line);
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
}

/* Homepage variant: Bold */
.hero-bold {
	background: var(--color-ink);
	color: #fff;
	padding: 120px 24px;
}

.eyebrow-on-dark {
	color: var(--color-accent-light);
}

.hero-bold-heading {
	font-size: clamp(2.5rem, 6vw, 4rem);
	max-width: 760px;
	margin: 0.3em auto 0.4em;
	color: #fff;
}

.hero-bold-sub {
	max-width: 520px;
	margin: 0 auto 32px;
	color: #d8cfc8;
	font-size: 1.15rem;
}

.hero-bold .hero-actions {
	justify-content: center;
}

.stats-bar {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-line);
	padding: 40px 24px;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	text-align: center;
	gap: 24px;
}

.stat {
	display: flex;
	flex-direction: column;
}

.stat-number {
	font-family: var(--font-heading);
	font-size: 2.2rem;
	color: var(--color-accent-dark);
}

.stat-label {
	color: var(--color-ink-soft);
	font-size: 0.9rem;
}

.spotlight {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.spotlight-media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
}

.pull-quote {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-style: italic;
	color: var(--color-ink);
}

.pull-quote cite {
	display: block;
	margin-top: 16px;
	font-family: var(--font-body);
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	color: var(--color-ink-soft);
}

@media (max-width: 782px) {
	.hero-bold {
		padding: 72px 24px;
	}

	.stats-grid,
	.spotlight {
		grid-template-columns: 1fr;
	}
}

/* Hero slideshow (Bold homepage, when hero slide images are configured).
   min-height scales with viewport height (clamped) rather than a fixed
   pixel value, so the slideshow stays proportional on short/mobile
   screens instead of dominating the first viewport. */
.hero-slider {
	position: relative;
	overflow: hidden;
	min-height: clamp( 380px, 65vh, 560px );
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 72px;
}

.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: opacity 0.6s ease;
}

.hero-has-slides::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba( 43, 36, 32, 0.6 );
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
}

.hero-has-slides .hero-bold-heading,
.hero-has-slides .hero-bold-sub,
.hero-has-slides .eyebrow-on-dark {
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.45 );
}

.hero-slider .carousel-controls {
	position: absolute;
	bottom: 28px;
	left: 0;
	right: 0;
	z-index: 2;
	margin-top: 0;
}

.hero-slider .carousel-prev,
.hero-slider .carousel-next {
	background: rgba( 255, 255, 255, 0.15 );
	border-color: rgba( 255, 255, 255, 0.4 );
	color: #fff;
}

.hero-slider .carousel-dot {
	background: rgba( 255, 255, 255, 0.4 );
}

.hero-slider .carousel-dot[aria-current="true"] {
	background: #fff;
}

/* Generic carousel controls (staff, testimonials, and the hero slideshow) */
.carousel {
	position: relative;
}

.carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

/* Staff carousel: box the single visible slide like the other card
   components on the page, instead of a lone avatar floating in a wide,
   mostly-empty row. */
.carousel-staff .carousel-item {
	max-width: 420px;
	margin: 0 auto;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: 40px 32px;
}

.carousel-staff .staff-avatar {
	margin-top: 0;
}

.carousel-prev,
.carousel-next {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 1.1rem;
	color: var(--color-ink);
	cursor: pointer;
}

.carousel-prev:hover,
.carousel-next:hover {
	background: var(--color-accent-dark);
	color: #fff;
	border-color: var(--color-accent-dark);
}

.carousel-dots {
	display: flex;
	gap: 8px;
}

.carousel-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--color-line);
	cursor: pointer;
}

.carousel-dot[aria-current="true"] {
	background: var(--color-accent-dark);
}

.section-footer-cta {
	text-align: center;
	margin-top: 40px;
}

/* Photo gallery grid + lightbox (Bold homepage, when gallery images are configured) */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 16px;
}

/* Scoped to .gallery-grid (not a bare .gallery-item selector) — WordPress's
   core gallery shortcode, which Elementor's Basic Gallery widget wraps,
   also outputs elements with the class "gallery-item". An unscoped rule
   here would leak onto that unrelated markup (e.g. on the Showcase
   homepage) and force it into a square aspect ratio it was never designed
   for, leaving a gap under any non-square photo. */
.gallery-grid .gallery-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba( 43, 36, 32, 0.08 );
	transition: box-shadow 0.3s ease, transform 0.15s ease;
}

.gallery-grid .gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.gallery-grid .gallery-item:hover {
	box-shadow: 0 12px 24px rgba( 43, 36, 32, 0.18 );
}

.gallery-grid .gallery-item:hover img {
	transform: scale(1.05);
}

.lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.9 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.lightbox-overlay[hidden] {
	display: none;
}

.lightbox-image {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
	position: absolute;
	width: 44px;
	height: 44px;
	background: rgba( 255, 255, 255, 0.15 );
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 1.3rem;
	cursor: pointer;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
	background: rgba( 255, 255, 255, 0.35 );
}

.lightbox-close {
	top: 24px;
	right: 24px;
}

.lightbox-prev {
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.lightbox-next {
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
}

/* Homepage variant: Minimal — flat background (no gradient wash), lighter
   weight heading, and no imagery in the hero at all, so it reads as
   genuinely sparser than Classic rather than a copy with less copy text. */
.hero-minimal {
	padding: 140px 24px 80px;
	background: var(--color-bg);
}

.hero-minimal h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 400;
}

.minimal-service-list {
	border-top: 1px solid var(--color-line);
}

.minimal-service-row {
	display: flex;
	justify-content: space-between;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-line);
}

.minimal-service-row .price {
	color: var(--color-ink-soft);
}

.minimal-staff-row {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 32px;
}

.minimal-staff-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
}

.staff-avatar-small {
	width: 72px;
	height: 72px;
	font-size: 1.2rem;
	margin: 0;
}

/* Footer */
#site-footer {
	text-align: center;
	padding: 48px 24px;
	border-top: 1px solid var(--color-line);
	color: var(--color-ink-soft);
	font-size: 0.9rem;
}

#site-footer nav ul {
	display: flex;
	justify-content: center;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}

#site-footer nav a {
	color: var(--color-ink-soft);
	text-decoration: none;
}

.social-links {
	display: flex;
	justify-content: center;
	gap: 16px;
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}

.social-links a {
	color: var(--color-ink-soft);
	display: inline-flex;
}

.social-links a:hover {
	color: var(--color-accent-dark);
}

@media (max-width: 782px) {
	.menu-toggle {
		display: flex;
	}

	/* The mobile bottom tab bar (inc/mobile-nav.php) has its own Account
	   entry — showing this too would be redundant in the already-tight
	   sticky mobile header. */
	.header-account-link {
		display: none;
	}

	#site-header nav.primary-menu-container {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-surface);
		border-bottom: 1px solid var(--color-line);
		padding: 16px 24px;
		z-index: 10;
	}

	#site-header.nav-open nav.primary-menu-container {
		display: block;
	}

	#site-header nav ul {
		flex-direction: column;
		gap: 16px;
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}

	.section {
		padding: 56px 0;
	}

	.hero-slider {
		min-height: clamp( 320px, 56vh, 420px );
		padding-bottom: 56px;
	}

	.gallery-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.carousel-staff .carousel-item {
		padding: 32px 24px;
	}
}

/* Homepage variant: Elegant (split-screen hero, modern boutique styling) */
.hero-elegant {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: clamp( 460px, 68vh, 620px );
}

.hero-elegant-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 64px;
}

.hero-elegant-text h1 {
	font-size: clamp( 2rem, 4vw, 3.2rem );
	text-align: left;
	margin: 0.3em 0 0.4em;
	max-width: 480px;
}

.hero-elegant-text p {
	text-align: left;
	max-width: 460px;
	margin: 0 0 32px;
	color: var(--color-ink-soft);
	font-size: 1.1rem;
}

.hero-elegant-text .hero-actions {
	justify-content: flex-start;
}

.hero-elegant-media {
	position: relative;
	overflow: hidden;
	background: linear-gradient( 135deg, var(--color-accent) 0%, var(--color-accent-light) 100% );
}

.hero-elegant-media .hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: opacity 0.6s ease;
}

.hero-elegant-media .carousel-controls {
	position: absolute;
	bottom: 24px;
	left: 24px;
	right: 24px;
	margin-top: 0;
	z-index: 2;
}

.elegant-service-item {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--color-line);
	transition: transform 0.15s ease;
}

.elegant-service-thumb {
	width: 88px;
	height: 88px;
	border-radius: var(--radius);
	overflow: hidden;
	flex-shrink: 0;
	background: linear-gradient( 135deg, var(--color-accent) 0%, var(--color-accent-light) 100% );
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.elegant-service-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elegant-service-body {
	flex: 1;
}

.elegant-service-body h3 {
	margin: 0 0 4px;
	font-size: 1.15rem;
}

.elegant-service-body .desc {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 0.95rem;
}

.elegant-service-meta {
	text-align: right;
	white-space: nowrap;
}

.elegant-service-meta .price {
	display: block;
	font-weight: 700;
	color: var(--color-accent-dark);
}

.elegant-service-meta .duration {
	display: block;
	font-size: 0.85rem;
	color: var(--color-ink-soft);
}

.pull-quote-left {
	text-align: left;
	margin: 0;
}

.pull-quote-left cite {
	text-align: left;
}

.pull-quote-right {
	text-align: right;
	margin: 0 0 0 auto;
}

.pull-quote-right cite {
	text-align: right;
}

.cta-banner-outline {
	background: transparent;
	color: var(--color-ink);
	border: 2px solid var(--color-line);
}

.cta-banner-outline h2,
.cta-banner-outline p {
	color: var(--color-ink);
}

.cta-banner-outline p {
	color: var(--color-ink-soft);
}

/* Homepage variant: Editorial (asymmetric, bottom-right anchored hero) */
.hero-editorial {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 48px;
	min-height: clamp( 420px, 60vh, 560px );
	background: linear-gradient( 135deg, var(--color-ink) 0%, #4a3d36 100% );
	overflow: hidden;
}

.hero-editorial .carousel-controls {
	position: absolute;
	bottom: 24px;
	left: 48px;
	right: auto;
	margin-top: 0;
}

.hero-editorial-content {
	position: relative;
	z-index: 2;
	max-width: 520px;
	text-align: right;
}

.hero-editorial-content .eyebrow {
	text-align: right;
}

.hero-editorial-content h1 {
	color: #fff;
	text-align: right;
	font-size: clamp( 2.2rem, 5vw, 3.4rem );
	margin: 0.3em 0 0.3em;
}

.hero-editorial-content p {
	color: #d8cfc8;
	text-align: right;
	max-width: 460px;
	margin: 0 0 28px auto;
}

.hero-editorial-content .hero-actions {
	justify-content: flex-end;
}

.hero-editorial-content h1,
.hero-editorial-content p,
.hero-editorial-content .eyebrow {
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.45 );
}

.editorial-service-list {
	counter-reset: editorial-service;
	border-top: 1px solid var(--color-line);
}

.editorial-service-list .service-list-item {
	position: relative;
	padding-left: 44px;
}

.editorial-service-list .service-list-item::before {
	counter-increment: editorial-service;
	content: counter( editorial-service, decimal-leading-zero );
	position: absolute;
	left: 0;
	top: 18px;
	color: var(--color-accent-dark);
	font-family: var(--font-heading);
	font-size: 0.9rem;
}

.gallery-grid-offset {
	grid-template-columns: repeat( 4, 1fr );
	grid-auto-rows: 140px;
}

/* The uniform grid's aspect-ratio:1 sizes each item from its own width,
   which fights the collage's row-track sizing here (a 2-column-wide item
   would render 2x taller than its assigned 2 row-tracks, overlapping
   whatever follows) — let the grid tracks be the sole height authority
   instead, with .gallery-item img's existing width/height:100% + object-fit
   filling whatever box it's stretched into. */
.gallery-grid-offset .gallery-item {
	aspect-ratio: auto;
}

.gallery-grid-offset .gallery-item:nth-child( 1 ) {
	grid-column: span 2;
	grid-row: span 2;
}

.gallery-grid-offset .gallery-item:nth-child( 4 ) {
	grid-column: span 2;
}

/* Classic homepage: configured hero slides render as a small framed image
   card below the text instead of a full-bleed background — keeps Classic's
   light, calm identity distinct from Bold's full-bleed drama. */
.classic-hero-media {
	position: relative;
	max-width: 900px;
	margin: 40px auto 0;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 16 / 7;
	box-shadow: 0 12px 32px rgba( 43, 36, 32, 0.14 );
}

.classic-hero-media .hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: opacity 0.6s ease;
}

.classic-hero-media .carousel-controls {
	position: absolute;
	bottom: 16px;
	left: 16px;
	right: 16px;
	margin-top: 0;
	z-index: 2;
}

@media (max-width: 900px) {
	.hero-elegant {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.hero-elegant-media {
		min-height: 320px;
		order: -1;
	}

	.hero-elegant-text {
		padding: 56px 24px;
		align-items: center;
		text-align: center;
	}

	.hero-elegant-text h1,
	.hero-elegant-text p {
		text-align: center;
		max-width: none;
	}

	.hero-elegant-text .hero-actions {
		justify-content: center;
	}
}

@media (max-width: 782px) {
	.hero-editorial {
		align-items: center;
		justify-content: center;
		padding: 56px 24px;
	}

	.hero-editorial-content {
		text-align: center;
		max-width: none;
	}

	.hero-editorial-content .eyebrow,
	.hero-editorial-content h1,
	.hero-editorial-content p {
		text-align: center;
	}

	.hero-editorial-content p {
		margin: 0 auto 28px;
	}

	.hero-editorial-content .hero-actions {
		justify-content: center;
	}

	.hero-editorial .carousel-controls {
		left: 0;
		right: 0;
		bottom: 20px;
	}

	.elegant-service-item {
		flex-wrap: wrap;
	}

	.elegant-service-meta {
		text-align: left;
		width: 100%;
	}

	.gallery-grid-offset {
		grid-template-columns: repeat( 2, 1fr );
		grid-auto-rows: auto;
	}

	.gallery-grid-offset .gallery-item {
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 1;
	}
}

/* Mobile app shell: fixed bottom tab bar + sticky compact header, replacing
   the desktop chrome with something closer to a native app's navigation.
   Hidden entirely above the tablet breakpoint. */
.mobile-tab-bar {
	display: none;
}

@media (max-width: 782px) {
	.classic-hero-media {
		aspect-ratio: 4 / 3;
		margin-top: 32px;
	}

	body {
		padding-bottom: calc( 64px + env( safe-area-inset-bottom ) );
	}

	#site-header {
		position: sticky;
		top: 0;
		z-index: 55;
		background: var(--color-bg);
		padding: 14px 20px;
		box-shadow: 0 1px 0 var(--color-line);
	}

	.mobile-tab-bar {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		background: var(--color-surface);
		border-top: 1px solid var(--color-line);
		padding: 6px 0 calc( 6px + env( safe-area-inset-bottom ) );
	}

	.mobile-tab {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-height: 44px;
		padding: 4px 1px 0;
		color: var(--color-ink-soft);
		text-decoration: none;
		font-size: 0.625rem;
		font-weight: 600;
		letter-spacing: -0.01em;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.mobile-tab:active {
		transform: scale( 0.92 );
	}

	.mobile-tab.is-active {
		color: var(--color-accent-dark);
	}

	.mobile-tab-icon {
		display: flex;
	}

	.mobile-tab-icon svg {
		width: 20px;
		height: 20px;
	}

	.mobile-tab-label {
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.mobile-tab-fab {
		margin-top: -22px;
	}

	.mobile-tab-fab .mobile-tab-icon {
		width: 46px;
		height: 46px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--color-accent-dark);
		color: #fff;
		border: 3px solid var(--color-surface);
		box-shadow: 0 4px 12px rgba( 43, 36, 32, 0.22 );
	}

	.mobile-tab-fab .mobile-tab-icon svg {
		width: 20px;
		height: 20px;
	}

	.mobile-tab-fab.is-active .mobile-tab-icon {
		background: var(--color-ink);
	}

	.mobile-tab-fab .mobile-tab-label {
		color: var(--color-accent-dark);
		font-weight: 700;
	}

	/* Touch tap feedback for primary interactive elements. */
	.btn:active,
	.btn-outline:active {
		transform: scale( 0.96 );
	}

	.card:active,
	.gallery-grid .gallery-item:active,
	.elegant-service-item:active {
		transform: scale( 0.98 );
	}
}

/* Rating badge — shown on service/staff cards wherever a service or staff
   member has at least one published review (Salon Booking Suite plugin). */
.rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-ink-soft);
	margin-top: 6px;
}

.rating-badge-star {
	color: var(--color-accent-dark);
}

.rating-badge-count {
	font-weight: 400;
}

/* Review cards + grid — the Reviews page template and the [salon_reviews]
   shortcode both render this same markup (via sbs_render_review_card()),
   so the two stay visually identical wherever reviews are shown. */
.reviews-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
}

.review-card {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: 24px;
}

.star-rating {
	margin-bottom: 12px;
}

.star-rating .star {
	font-size: 1.1rem;
	color: var(--color-line);
}

.star-rating .star.is-filled {
	color: var(--color-accent-dark);
}

.review-comment {
	font-style: italic;
	color: var(--color-ink-soft);
	margin: 0 0 16px;
}

.review-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 12px;
	font-size: 0.9rem;
}

.review-name {
	font-weight: 700;
}

.review-context {
	color: var(--color-accent-dark);
}

.review-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
}

.review-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: 50%;
	border: 1px solid var(--color-line);
	color: var(--color-ink);
	text-decoration: none;
}

.review-pagination .page-numbers.current {
	background: var(--color-accent-dark);
	color: #fff;
	border-color: var(--color-accent-dark);
}

.review-pagination .page-numbers.dots {
	border-color: transparent;
}

/* Pure-CSS 5-star picker for the review submission form — reversed radio
   order + row-reverse display lets :hover/:checked on a later-in-DOM input
   highlight itself and every earlier (visually, further-left) star via the
   general sibling combinator, with no JS needed for the interaction. */
.star-picker {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
}

.star-picker input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.star-picker label {
	font-size: 1.8rem;
	line-height: 1;
	color: var(--color-line);
	cursor: pointer;
	transition: color 0.15s ease;
}

.star-picker label:hover,
.star-picker label:hover ~ label,
.star-picker input:checked ~ label {
	color: var(--color-accent-dark);
}

.review-form-status:empty {
	display: none;
}

/* Elementor Before/After Slider widget. */
.before-after {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 4 / 3;
	user-select: none;
	touch-action: none;
}

.before-after img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ba-after,
.ba-before {
	position: absolute;
	inset: 0;
}

.ba-before {
	width: 50%;
	overflow: hidden;
	border-right: 2px solid #fff;
}

.ba-before img {
	/* Width is locked to the full container's pixel width by
	   before-after.js (not 100%, which would shrink along with this
	   already-clipping, percentage-width parent) so the image is cropped
	   by .ba-before's width rather than scaled by it. */
	max-width: none;
	height: 100%;
}

.ba-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 50%;
	background: #fff;
	border: none;
	box-shadow: var(--shadow-soft);
	cursor: ew-resize;
}

.ba-handle::before {
	content: '\2194';
	display: block;
	line-height: 40px;
	text-align: center;
	color: var(--color-ink);
}

.ba-label {
	position: absolute;
	bottom: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ba-label-before {
	left: 12px;
}

.ba-label-after {
	right: 12px;
}

/* Elementor FAQ Accordion widget — plain <details>/<summary>, no JS. */
.faq-list {
	border-top: 1px solid var(--color-line);
}

.faq-item {
	border-bottom: 1px solid var(--color-line);
	padding: 20px 0;
}

.faq-item summary {
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: '+';
	float: right;
	color: var(--color-accent-dark);
}

.faq-item[open] summary::after {
	content: '\2212';
}

.faq-item p {
	margin: 12px 0 0;
	color: var(--color-ink-soft);
}

/* Elementor Amenities/Features widget. */
.amenities-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 32px;
	text-align: center;
}

.amenity-icon {
	font-size: 2rem;
	margin-bottom: 12px;
}

.amenity-item h3 {
	font-size: 1.1rem;
	margin-bottom: 6px;
}

.amenity-item p {
	color: var(--color-ink-soft);
	font-size: 0.95rem;
}

/* Elementor Pricing/Packages widget. */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 32px;
}

.pricing-card {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: 32px;
	text-align: center;
}

.pricing-card.is-featured {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-soft);
	transform: translateY( -8px );
}

.pricing-card-price {
	font-family: var(--font-heading);
	font-size: 2rem;
	color: var(--color-accent-dark);
	margin: 12px 0;
}

.pricing-card-features {
	list-style: none;
	padding: 0;
	margin: 20px 0;
	text-align: left;
}

.pricing-card-features li {
	padding: 6px 0;
	border-top: 1px solid var(--color-line);
	color: var(--color-ink-soft);
}

.pricing-card-features li:first-child {
	border-top: none;
}

/* Elementor Social Grid widget — deliberately not .gallery-grid/.gallery-item
   (those auto-open lightbox.js; social tiles should link out instead). */
.social-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 12px;
}

.social-item {
	display: block;
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
}

.social-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.social-item:hover img {
	transform: scale( 1.05 );
}

/* Elementor Social Link widget — a single independent platform icon
   (distinct from .social-grid/.social-item above, which is one bundled
   photo grid). Several of these sit side by side when placed next to each
   other in Elementor, e.g. inside a flex/columns section. */
.social-link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	color: var(--color-ink);
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.social-link-icon svg {
	width: 55%;
	height: 55%;
}

.social-link-icon:hover {
	background: var(--color-accent-dark);
	color: #fff;
	transform: translateY( -2px );
}

/* Elementor Promo Modal widget. Hidden by default; .is-open (added by
   assets/js/promo-modal.js) reveals it. display:none rather than only
   opacity/visibility so it can never intercept clicks while dismissed. */
.promo-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
	align-items: center;
	justify-content: center;
}

.promo-modal.is-open {
	display: flex;
}

.promo-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 43, 36, 32, 0.6 );
}

.promo-modal-dialog {
	position: relative;
	z-index: 1;
	background: var(--color-surface);
	border-radius: var(--radius);
	max-width: 480px;
	width: calc( 100% - 48px );
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	box-shadow: var(--shadow-soft, 0 20px 60px rgba( 0, 0, 0, 0.3 ) );
}

.promo-modal-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	border-radius: var(--radius) var(--radius) 0 0;
}

.promo-modal-content {
	padding: 32px;
	text-align: center;
}

.promo-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: rgba( 255, 255, 255, 0.9 );
	color: var(--color-ink);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 480px) {
	.promo-modal-dialog {
		width: calc( 100% - 24px );
	}
	.promo-modal-content {
		padding: 24px;
	}
}

/* Account page: sidebar (Profile / Bookings) + content layout. */
.account-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 48px;
	align-items: start;
}

.account-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 24px;
}

.account-sidebar nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.account-sidebar-link {
	display: block;
	padding: 10px 14px;
	border-radius: var(--radius);
	color: var(--color-ink);
	text-decoration: none;
	font-weight: 500;
}

.account-sidebar-link:hover {
	background: var(--color-surface);
}

.account-sidebar-link.is-active {
	background: var(--color-accent-dark);
	color: #fff;
}

.account-sidebar-logout {
	padding: 0 14px;
	color: var(--color-ink-soft);
	text-decoration: none;
	font-size: 0.9rem;
}

.account-sidebar-logout:hover {
	color: var(--color-accent-dark);
}

/* Account page: Bookings section's own History/New Appointment sub-tabs
   (one level down from the Profile/Bookings sidebar — same ?query-param,
   no-JS pattern, just nested). */
.account-tabs {
	display: flex;
	gap: 8px;
	border-bottom: 1px solid var(--color-line);
	margin-bottom: 28px;
}

.account-tab {
	padding: 12px 4px;
	margin-right: 24px;
	color: var(--color-ink-soft);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.account-tab:hover {
	color: var(--color-ink);
}

.account-tab.is-active {
	color: var(--color-accent-dark);
	border-bottom-color: var(--color-accent-dark);
}

.account-info {
	margin: 0 0 28px;
}

.account-info dt {
	font-weight: 700;
	margin-top: 12px;
}

.account-info dd {
	margin: 4px 0 0;
	color: var(--color-ink-soft);
}

@media (max-width: 782px) {
	.account-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.account-sidebar {
		position: static;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--color-line);
		padding-bottom: 16px;
	}

	.account-sidebar nav {
		flex-direction: row;
	}
}

/* Account page: booking history list. */
.booking-history-list {
	border-top: 1px solid var(--color-line);
}

.booking-history-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-line);
}

.booking-history-item h4 {
	margin: 0 0 4px;
}

.booking-status-badge {
	flex-shrink: 0;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	background: var(--color-bg);
	color: var(--color-ink-soft);
}

.booking-status-confirmed {
	background: #e3f3e6;
	color: #2a7a3b;
}

.booking-status-completed {
	background: #e3ecf9;
	color: #2a5a9b;
}

.booking-status-cancelled,
.booking-status-no_show {
	background: #fbe4e4;
	color: #a3352f;
}

@media (max-width: 782px) {
	.amenities-grid,
	.pricing-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (max-width: 480px) {
	.amenities-grid,
	.pricing-grid {
		grid-template-columns: 1fr;
	}
	.pricing-card.is-featured {
		transform: none;
	}
}

/* Per-entry "before/after" photo gallery (Services page list items, Our
   Team page staff cards) — a smaller-tile variant of the homepage's
   .gallery-grid, which it still carries as a base class so the existing
   lightbox (assets/js/lightbox.js) picks it up with no extra JS. */
.entry-gallery {
	grid-template-columns: repeat( auto-fit, minmax( 64px, 64px ) );
	gap: 8px;
	margin-top: 12px;
}

/* .grid (service/staff/testimonial cards, wherever it's used) — explicit
   column counts per breakpoint rather than auto-fit's implicit reflow, so
   the number of items per row is deliberate: 3 on larger screens, 2 on
   small/tablet, 1 on extra-small phones. Placed at the very end of the
   file so both breakpoints reliably win regardless of what else in this
   stylesheet also touches .grid at those widths. */
@media (max-width: 782px) {
	.grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: 24px;
	}
}

@media (max-width: 480px) {
	.grid {
		grid-template-columns: 1fr;
	}
}

/* Mobile "app" treatment, part 2: card rows (services, staff, testimonials,
   reviews, gallery, pricing) become horizontally swipeable, edge-to-edge
   carousels instead of stacking into one column — closer to how a native
   app presents these sections, and a much shorter scroll to the next
   section than 6+ stacked cards would be. Deliberately placed after the
   .grid stacking rule above (same "equal-specificity CSS is decided by
   source order" reasoning that rule's own comment already documents) so
   this wins at the same 480px breakpoint. scroll-snap + a peeking next
   card (flex-basis < 100%) signals "swipe for more" the way an app would. */
@media (max-width: 480px) {
	.grid,
	.gallery-grid,
	.reviews-grid,
	.pricing-grid {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 14px;
		/* Breaks out of .container's 24px side padding so the row runs
		   flush to the screen edge, peeking the next card at the far side. */
		margin-left: -24px;
		margin-right: -24px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.grid::-webkit-scrollbar,
	.gallery-grid::-webkit-scrollbar,
	.reviews-grid::-webkit-scrollbar,
	.pricing-grid::-webkit-scrollbar {
		display: none;
	}

	.grid > *,
	.reviews-grid > *,
	.pricing-grid > * {
		flex: 0 0 80%;
		scroll-snap-align: start;
	}

	.gallery-grid > * {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}

	/* Single interactive elements (not card rows) still bleed edge-to-edge,
	   just without the scroll-snap row treatment above. */
	.before-after {
		margin-left: -24px;
		margin-right: -24px;
		border-radius: 0;
	}
}

/* Amenities widget on mobile: icon-left list rows (like a native app's
   settings list) rather than centered stacked blocks — reads faster as a
   single column than three centered mini-posters would. */
@media (max-width: 480px) {
	.amenity-item {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		text-align: left;
		background: var(--color-surface);
		border: 1px solid var(--color-line);
		border-radius: var(--radius);
		padding: 16px;
	}

	.amenity-icon {
		margin-bottom: 0;
		flex-shrink: 0;
	}
}