/**
 * Naples redesign — Inner page styles (Phase 4+)
 *
 * Scoped to .naples-redesign. Houses styles for each inner page
 * built in Phase 4 onwards. Modules from the home page (banner, split,
 * forms) live in naples-modules.css and are reused here.
 *
 * Sections:
 *   1. Our Team — page header / intro
 *   2. Our Team — featured video
 *   3. Our Team — team member cards (12 alternating bg)
 *   4. Our Team — surgery center cross-link
 */


/* ====================================================================
   ====================================================================
   OUR TEAM — page header / intro
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-team-header {
	background: var(--naples-white);
	font-family: var(--naples-font-body);
}

/* Breadcrumb strip — teal background matching nav row */
.naples-redesign .naples-team-breadcrumb {
	background: var(--naples-primary);
	color: var(--naples-white);
	padding: 12px 0;
	font-size: 13px;
	letter-spacing: 0.3px;
}

.naples-redesign .naples-team-breadcrumb a,
.naples-redesign .naples-team-breadcrumb .breadcrumb_last,
.naples-redesign .naples-team-breadcrumb span {
	color: var(--naples-white);
	text-decoration: none;
	opacity: 0.9;
}

.naples-redesign .naples-team-breadcrumb a:hover,
.naples-redesign .naples-team-breadcrumb a:focus {
	opacity: 1;
	text-decoration: underline;
	color: var(--naples-white);
}

.naples-redesign .naples-team-breadcrumb .breadcrumb_last {
	font-weight: 500;
	opacity: 1;
}

/* Intro block: heading + 3 paragraphs + group photo */
.naples-redesign .naples-team-intro {
	max-width: 980px;
	margin: 0 auto;
	padding: var(--naples-space-6) 0 var(--naples-space-6);
}

@media (max-width: 768px) {
	.naples-redesign .naples-team-intro {
		padding: var(--naples-space-5) 0;
	}
}

.naples-redesign .naples-team-page-heading {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h1);
	line-height: var(--naples-lh-tight);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
	letter-spacing: -0.5px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-team-page-heading {
		font-size: var(--naples-h2);
	}
}

.naples-redesign .naples-team-intro-copy p {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-medium);
	line-height: var(--naples-lh-loose);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 var(--naples-space-2);
}

.naples-redesign .naples-team-intro-copy p:last-child {
	margin-bottom: 0;
}

.naples-redesign .naples-team-group-photo {
	margin-top: var(--naples-space-5);
}

.naples-redesign .naples-team-group-photo picture,
.naples-redesign .naples-team-group-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}


/* ====================================================================
   ====================================================================
   OUR TEAM — featured video
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-team-video {
	background: var(--naples-white);
	padding: var(--naples-space-3) 0;
	font-family: var(--naples-font-body);
}

.naples-redesign .naples-team-video-inner {
	max-width: 720px;
	margin: 0 auto;
}

.naples-redesign .naples-team-video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	background: #1a1a1a;
	overflow: hidden;
}

.naples-redesign .naples-team-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ====================================================================
   ====================================================================
   OUR TEAM — member cards (alternating bg)
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-team-member {
	font-family: var(--naples-font-body);
	width: 100%;
}

.naples-redesign .naples-team-member.is-bg-white {
	background: var(--naples-white);
}

.naples-redesign .naples-team-member.is-bg-warm {
	background: #f8f5f2;
}

.naples-redesign .naples-team-member-inner {
	max-width: var(--naples-content-max);
	margin: 0 auto;
	padding: var(--naples-space-5) var(--naples-content-pad);
	display: grid;
	grid-template-columns: 460px 1fr;
	gap: var(--naples-space-5);
	align-items: center;
}

@media (max-width: 1280px) {
	.naples-redesign .naples-team-member-inner {
		padding: var(--naples-space-5) var(--naples-space-5);
	}
}

@media (max-width: 1023px) {
	.naples-redesign .naples-team-member-inner {
		grid-template-columns: 320px 1fr;
		gap: var(--naples-space-4);
		padding: var(--naples-space-4) var(--naples-space-3);
	}
}

@media (max-width: 768px) {
	.naples-redesign .naples-team-member-inner {
		grid-template-columns: 1fr;
		gap: var(--naples-space-3);
	}
}

.naples-redesign .naples-team-member-image {
	width: 100%;
	overflow: hidden;
}

.naples-redesign .naples-team-member-image picture,
.naples-redesign .naples-team-member-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.naples-redesign .naples-team-member-content {
	color: var(--naples-primary);
}

.naples-redesign .naples-team-member-name {
	font-family: var(--naples-font-heading);
	font-size: 36px;
	line-height: var(--naples-lh-tight);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 4px;
	letter-spacing: -0.5px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-team-member-name {
		font-size: 30px;
	}
}

.naples-redesign .naples-team-member-role {
	font-family: var(--naples-font-body);
	font-size: 15px;
	color: var(--naples-primary);
	margin: 0 0 var(--naples-space-2);
	font-weight: 400;
}

.naples-redesign .naples-team-member-bio {
	font-family: var(--naples-font-body);
	font-size: 14px;
	line-height: var(--naples-lh-loose);
	color: var(--naples-primary);
}

.naples-redesign .naples-team-member-bio p {
	font-family: var(--naples-font-body);
	font-size: 14px;
	line-height: var(--naples-lh-loose);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 1em;
}

.naples-redesign .naples-team-member-bio p:last-child {
	margin-bottom: 0;
}


/* ====================================================================
   ====================================================================
   OUR TEAM — Surgery Center cross-link
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-team-surgery {
	width: 100%;
	font-family: var(--naples-font-body);
}

.naples-redesign .naples-team-surgery-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 460px;
}

@media (max-width: 1023px) {
	.naples-redesign .naples-team-surgery-inner {
		grid-template-columns: 1fr;
	}
}

.naples-redesign .naples-team-surgery-content {
	background: var(--naples-primary);
	color: var(--naples-white);
	display: flex;
	align-items: center;
	padding: var(--naples-space-6) var(--naples-content-pad);
}

@media (max-width: 1280px) {
	.naples-redesign .naples-team-surgery-content {
		padding: var(--naples-space-6) var(--naples-space-5);
	}
}

@media (max-width: 1023px) {
	.naples-redesign .naples-team-surgery-content {
		padding: var(--naples-space-5) var(--naples-space-3);
	}
}

.naples-redesign .naples-team-surgery-content-pad {
	max-width: 480px;
}

.naples-redesign .naples-team-surgery-heading {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h2);
	line-height: var(--naples-lh-tight);
	color: var(--naples-white);
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
	letter-spacing: -0.5px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-team-surgery-heading {
		font-size: var(--naples-h3);
	}
}

.naples-redesign p.naples-team-surgery-body {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-medium);
	line-height: var(--naples-lh-loose);
	color: var(--naples-white);
	font-weight: 400;
	margin: 0 0 var(--naples-space-4);
}

.naples-redesign .naples-team-surgery-cta {
	display: inline-flex;
}

.naples-redesign .naples-team-surgery-image {
	position: relative;
	min-height: 360px;
	overflow: hidden;
}

.naples-redesign .naples-team-surgery-image picture,
.naples-redesign .naples-team-surgery-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 1023px) {
	.naples-redesign .naples-team-surgery-image {
		aspect-ratio: 4 / 3;
	}
}


/* ====================================================================
   ====================================================================
   INNER PAGE BANNER — used at top of every inner page
   --------------------------------------------------------------------
   Modifier on .naples-banner that makes it shorter (3.5:1 vs the home
   hero's 1440/666 ~= 2.16:1) and makes the overlay smaller.
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-banner.is-inner-page-banner {
	aspect-ratio: 1440 / 408;
	min-height: 240px;
	max-height: 60vh;
}

.naples-redesign .naples-banner.is-inner-page-banner .naples-banner-overlay {
	max-width: 200px;
}

@media (max-width: 1023px) {
	.naples-redesign .naples-banner.is-inner-page-banner .naples-banner-overlay {
		max-width: 160px;
	}
}

@media (max-width: 600px) {
	.naples-redesign .naples-banner.is-inner-page-banner {
		aspect-ratio: 16 / 9;
		min-height: 200px;
	}
	.naples-redesign .naples-banner.is-inner-page-banner .naples-banner-overlay {
		max-width: 130px;
	}
}


/* ====================================================================
   ====================================================================
   LEGACY THEME OVERRIDES — applied to all Naples inner pages
   --------------------------------------------------------------------
   The Etna parent theme injects a default <div id="banner" class="banner">
   between the header and the page content on inner pages. It also wraps
   page content in a <main> with padding. Naples pages render their own
   hero banner so the legacy must be hidden, and the <main> padding zeroed
   so our full-width sections butt against each other cleanly.
   ====================================================================
   ==================================================================== */

/* Kill the legacy default banner only on Naples pages */
.naples-redesign #banner.banner {
	display: none !important;
}

/* Zero out main padding/margin so naples sections render edge-to-edge */
.naples-redesign main {
	padding: 0 !important;
	margin: 0 !important;
}

/* Hide any default hero/title row the theme might inject before our content */
.naples-redesign .page-title-bar,
.naples-redesign .breadcrumb-row,
.naples-redesign .entry-header {
	display: none !important;
}


/* ====================================================================
   ====================================================================
   BCN BREADCRUMB FIX — kill bullets, render inline
   --------------------------------------------------------------------
   Breadcrumb NavXT outputs <li> tags without a <ul> wrapper. The legacy
   theme styles all <li> globally with bullets and indentation. Reset
   here scoped to .naples-team-breadcrumb only.
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-team-breadcrumb li {
	list-style: none !important;
	display: inline !important;
	padding-left: 0 !important;
	margin: 0 !important;
	background: none !important;
	font-size: 13px !important;
}

.naples-redesign .naples-team-breadcrumb li::before,
.naples-redesign .naples-team-breadcrumb li::marker {
	content: none !important;
	display: none !important;
}

.naples-redesign .naples-team-breadcrumb meta {
	display: none;
}


/* ====================================================================
   ====================================================================
   OUR TEAM — video title bar + expandable description
   --------------------------------------------------------------------
   The teal bar that sits directly below the YouTube embed with the title
   on the left, and the "Read Description" toggle on the right that opens
   a panel with the video transcript / summary.
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-team-video-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--naples-space-3);
	background: var(--naples-primary);
	color: var(--naples-white);
	padding: 16px 22px;
	font-family: var(--naples-font-body);
}

@media (max-width: 600px) {
	.naples-redesign .naples-team-video-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--naples-space-2);
	}
}

.naples-redesign .naples-team-video-bar-titles {
	min-width: 0;
}

.naples-redesign .naples-team-video-title {
	font-family: var(--naples-font-body);
	font-size: 17px;
	font-weight: 600;
	color: var(--naples-white);
	margin: 0 0 2px;
	line-height: 1.3;
}

.naples-redesign .naples-team-video-date {
	font-family: var(--naples-font-body);
	font-size: 13px;
	color: var(--naples-white);
	opacity: 0.85;
	margin: 0;
	line-height: 1.3;
}

.naples-redesign .naples-team-video-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--naples-white);
	font-family: var(--naples-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.2s ease;
	flex: 0 0 auto;
}

.naples-redesign .naples-team-video-toggle:hover,
.naples-redesign .naples-team-video-toggle:focus {
	opacity: 0.85;
	outline: 0;
}

.naples-redesign .naples-team-video-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1px solid var(--naples-white);
	border-radius: 50%;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}

.naples-redesign .naples-team-video-description {
	background: var(--naples-bg-light);
	color: var(--naples-primary);
	padding: var(--naples-space-3) var(--naples-space-3);
	font-family: var(--naples-font-body);
	font-size: 15px;
	line-height: var(--naples-lh-loose);
}

.naples-redesign .naples-team-video-description p {
	font-family: var(--naples-font-body);
	font-size: 15px;
	line-height: var(--naples-lh-loose);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 1em;
}

.naples-redesign .naples-team-video-description p:last-child {
	margin-bottom: 0;
}


/* ====================================================================
   ====================================================================
   PAGE HEADER VARIANT — centered (used by Our Surgical Staff)
   --------------------------------------------------------------------
   The Our Team page has a left-aligned heading + intro block. Other
   inner pages (Our Surgical Staff, Surgery Center, etc.) center the
   heading and intro. This modifier applies that centered treatment
   without forking the whole .naples-team-header block.
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-team-header.is-centered .naples-team-intro,
.naples-redesign .naples-team-intro.is-centered {
	text-align: center;
	max-width: 880px;
}

.naples-redesign .naples-team-intro.is-centered .naples-team-page-heading {
	text-align: center;
}

.naples-redesign .naples-team-intro.is-centered .naples-team-intro-copy p {
	text-align: center;
}


/* ====================================================================
   ====================================================================
   OUR SURGERY CENTER — content sections
   --------------------------------------------------------------------
   Reusable content section pattern: max-width container, section
   spacing, heading + body block, optional list, optional grid of
   feature cards. Used by Surgery Center (4 sections) and likely by
   future pages too.
   ====================================================================
   ==================================================================== */

.naples-redesign .naples-sc-section {
	background: var(--naples-white);
	font-family: var(--naples-font-body);
	padding: var(--naples-space-5) 0;
}

.naples-redesign .naples-sc-section + .naples-sc-section {
	padding-top: 0;
}

.naples-redesign .naples-sc-block {
	max-width: 980px;
	margin: 0 auto;
	color: var(--naples-primary);
}

.naples-redesign .naples-sc-heading {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h3);
	line-height: var(--naples-lh-tight);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
	letter-spacing: -0.5px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-sc-heading {
		font-size: 32px;
	}
}

.naples-redesign .naples-sc-body p {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-medium);
	line-height: var(--naples-lh-loose);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 var(--naples-space-2);
}

.naples-redesign .naples-sc-body p:last-child {
	margin-bottom: 0;
}

/* Bulleted list inside content sections */
.naples-redesign .naples-sc-list {
	list-style: disc;
	margin: var(--naples-space-2) 0 0;
	padding-left: 24px;
}

.naples-redesign .naples-sc-list li {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-medium);
	line-height: var(--naples-lh-loose);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 12px;
	padding-left: 4px;
	display: list-item;
	background: none;
}

.naples-redesign .naples-sc-list li::marker {
	color: var(--naples-primary);
}

.naples-redesign .naples-sc-list li:last-child {
	margin-bottom: 0;
}

/* 4x2 feature grid for At-a-Glance */
.naples-redesign .naples-sc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: var(--naples-space-3);
}

@media (max-width: 600px) {
	.naples-redesign .naples-sc-grid {
		grid-template-columns: 1fr;
	}
}

.naples-redesign .naples-sc-feature {
	background: var(--naples-bg-light);
	color: var(--naples-primary);
	padding: 18px 24px;
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-regular);
	line-height: 1.4;
	font-weight: 400;
}


/* ====================================================================
   ====================================================================
   PHASE 7 — /about/dr-hasen/
   --------------------------------------------------------------------
   Most complex inner page in the redesign. New patterns introduced here
   are scoped under .naples-dh-* prefix and may be reused by future pages
   (CTA button pattern, photo+box stacked unit, full-bleed teal reviews).
   ====================================================================
   ==================================================================== */


/* ====================================================================
   DR. HASEN — Section 1: Intro extras (subhead, CTA, video)
   The header / breadcrumb / heading / intro paragraph reuse the
   .naples-team-* pattern from Our Team. Below adds Dr. Hasen specifics.
   ==================================================================== */

/* Subhead "Board-Certified Plastic Surgeon" beneath H1 name */
.naples-redesign .naples-dh-subhead {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h3);
	line-height: var(--naples-lh-tight);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
	letter-spacing: -0.3px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-dh-subhead {
		font-size: 30px;
	}
}

/*
 * Vertical spacing wrapper around the canonical .naples-rac-button used
 * in the Intro section. The button itself is styled site-wide in
 * naples-master.css (Phase 2) — we only own the layout/margin here.
 */
.naples-redesign .naples-dh-cta-row {
	margin: var(--naples-space-3) 0 var(--naples-space-5);
}

/* Featured YouTube video — 16:9 responsive, no title bar */
.naples-redesign .naples-dh-video {
	margin-top: var(--naples-space-3);
}

.naples-redesign .naples-dh-video-frame {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
	background: #000;
}

.naples-redesign .naples-dh-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ====================================================================
   DR. HASEN — Section 2: Credentials at a Glance
   Adds sub-headings, custom list spacing, and the centered logos strip.
   The base section/heading/list classes come from .naples-sc-*.
   ==================================================================== */

.naples-redesign .naples-dh-credentials {
	background: var(--naples-bg-light);
}

.naples-redesign .naples-dh-creds-subhead {
	font-family: var(--naples-font-heading);
	font-size: 28px;
	line-height: var(--naples-lh-tight);
	color: var(--naples-primary);
	font-weight: 400;
	letter-spacing: -0.2px;
	margin: var(--naples-space-3) 0 var(--naples-space-2);
}

.naples-redesign .naples-dh-creds-subhead:first-child {
	margin-top: 0;
}

@media (max-width: 768px) {
	.naples-redesign .naples-dh-creds-subhead {
		font-size: 24px;
	}
}

.naples-redesign .naples-dh-creds-list {
	margin-top: 0;
}

.naples-redesign .naples-dh-creds-list li {
	font-size: var(--naples-text-regular);
	margin-bottom: 10px;
}

/* Memberships logos strip — centered, transparent PNG */
.naples-redesign .naples-dh-logos-strip {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: var(--naples-space-4) auto;
	max-width: 720px;
}

.naples-redesign .naples-dh-logos-strip picture,
.naples-redesign .naples-dh-logos-strip img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

@media (max-width: 600px) {
	.naples-redesign .naples-dh-logos-strip {
		max-width: 100%;
		margin: var(--naples-space-3) auto;
	}
}


/* ====================================================================
   DR. HASEN — Section 3: Surgical Specialties (stacked photo + teal box)
   ==================================================================== */

.naples-redesign .naples-dh-specialties-section {
	background: var(--naples-white);
	padding: var(--naples-space-5) 0;
}

/* Wrapper for the stacked unit. The photo and teal box must touch
   (no gap), so we collapse vertical margin/padding between them. */
.naples-redesign .naples-dh-specialties {
	max-width: 980px;
	margin: 0 auto;
}

.naples-redesign .naples-dh-specialties-image {
	display: block;
	margin: 0;
}

.naples-redesign .naples-dh-specialties-image picture,
.naples-redesign .naples-dh-specialties-image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* Teal box glued directly below the photo */
.naples-redesign .naples-dh-specialties-box {
	background: var(--naples-primary);
	color: var(--naples-white);
	padding: var(--naples-space-4) var(--naples-space-4);
	margin: 0;
}

@media (max-width: 768px) {
	.naples-redesign .naples-dh-specialties-box {
		padding: var(--naples-space-3);
	}
}

.naples-redesign .naples-dh-specialties-heading {
	font-family: var(--naples-font-heading);
	font-size: 32px;
	line-height: var(--naples-lh-tight);
	color: var(--naples-white);
	font-weight: 400;
	margin: 0 0 12px;
	letter-spacing: -0.2px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-dh-specialties-heading {
		font-size: 26px;
	}
}

.naples-redesign .naples-dh-specialties-intro {
	font-family: var(--naples-font-body);
	font-size: 15px;
	line-height: var(--naples-lh-loose);
	color: var(--naples-white);
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
	opacity: 0.95;
}

/* Two-column grid of procedure links with chevron */
.naples-redesign .naples-dh-specialties-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--naples-space-4);
	row-gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 600px) {
	.naples-redesign .naples-dh-specialties-grid {
		grid-template-columns: 1fr;
	}
}

.naples-redesign .naples-dh-specialties-grid li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

.naples-redesign .naples-dh-specialties-grid li::marker {
	content: '';
}

.naples-redesign .naples-dh-specialties-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--naples-white);
	text-decoration: none;
	font-family: var(--naples-font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.2px;
	transition: opacity 0.2s ease;
}

.naples-redesign .naples-dh-specialties-link::before {
	content: '\203A'; /* › single right-pointing angle */
	font-size: 18px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	color: var(--naples-white);
	flex: 0 0 auto;
}

.naples-redesign .naples-dh-specialties-link:hover,
.naples-redesign .naples-dh-specialties-link:focus {
	color: var(--naples-white);
	text-decoration: underline;
	opacity: 0.85;
	outline: 0;
}


/* ====================================================================
   DR. HASEN — Section 5: Pull quote (cream bg)
   ==================================================================== */

.naples-redesign .naples-dh-quote-section {
	background: var(--naples-bg-light);
	padding: var(--naples-space-5) 0;
}

.naples-redesign .naples-dh-quote {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--naples-space-3);
	text-align: center;
	border: 0;
}

.naples-redesign .naples-dh-quote-text {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-large);
	line-height: var(--naples-lh-loose);
	color: var(--naples-primary);
	font-style: italic;
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
}

@media (max-width: 768px) {
	.naples-redesign .naples-dh-quote-text {
		font-size: var(--naples-text-medium);
	}
}

.naples-redesign .naples-dh-quote-attribution {
	font-family: var(--naples-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--naples-primary);
	font-style: normal;
	letter-spacing: 0.3px;
}


/* ====================================================================
   DR. HASEN — Section 6: Interview With Dr. Hasen (personal, 2 photos)
   The section/heading/body classes come from .naples-sc-*; below adds
   the 2-photo stacked treatment.
   ==================================================================== */

.naples-redesign .naples-dh-interview-photos {
	margin-top: var(--naples-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--naples-space-3);
}

.naples-redesign .naples-dh-interview-photo picture,
.naples-redesign .naples-dh-interview-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}


/* ====================================================================
   DR. HASEN — Section 7: In His Own Words (cream bg, Q&As, photo)
   ==================================================================== */

.naples-redesign .naples-dh-words-section {
	background: var(--naples-bg-light);
	padding: var(--naples-space-5) 0;
	font-family: var(--naples-font-body);
}

/* The "Interview With Dr. Hasen" sub-heading sits between H2 and intro */
.naples-redesign .naples-dh-words-subhead {
	font-family: var(--naples-font-heading);
	font-size: 28px;
	line-height: var(--naples-lh-tight);
	color: var(--naples-primary);
	font-weight: 400;
	letter-spacing: -0.2px;
	margin: -8px 0 var(--naples-space-3);
}

@media (max-width: 768px) {
	.naples-redesign .naples-dh-words-subhead {
		font-size: 24px;
	}
}

/* Q&A blocks — used in both In His Own Words and the FAQ */
.naples-redesign .naples-dh-qa-block {
	margin-top: var(--naples-space-3);
}

.naples-redesign .naples-dh-qa-block:first-of-type {
	margin-top: var(--naples-space-3);
}

.naples-redesign .naples-dh-qa-question {
	font-family: var(--naples-font-body);
	font-size: 17px;
	font-weight: 700;
	color: var(--naples-primary);
	line-height: 1.4;
	margin: 0 0 12px;
}

.naples-redesign .naples-dh-qa-answer {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-medium);
	line-height: var(--naples-lh-loose);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 12px;
}

.naples-redesign .naples-dh-qa-answer:last-child {
	margin-bottom: 0;
}

/* Bottom photo of Dr. Hasen at the med spa interior */
.naples-redesign .naples-dh-words-photo {
	margin-top: var(--naples-space-4);
}

.naples-redesign .naples-dh-words-photo picture,
.naples-redesign .naples-dh-words-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}


/* ====================================================================
   DR. HASEN — Section 8: Reviews (full-bleed teal)
   ==================================================================== */

.naples-redesign .naples-dh-reviews {
	background: var(--naples-primary);
	color: var(--naples-white);
	padding: var(--naples-space-6) 0;
	font-family: var(--naples-font-body);
	text-align: center;
}

@media (max-width: 768px) {
	.naples-redesign .naples-dh-reviews {
		padding: var(--naples-space-5) 0;
	}
}

.naples-redesign .naples-dh-reviews-eyebrow {
	font-family: var(--naples-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--naples-white);
	letter-spacing: 1.5px;
	text-transform: none;
	margin: 0 0 12px;
	opacity: 0.95;
}

.naples-redesign .naples-dh-reviews-heading {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h2);
	line-height: var(--naples-lh-tight);
	color: var(--naples-white);
	font-weight: 400;
	margin: 0 auto var(--naples-space-3);
	letter-spacing: -0.5px;
	max-width: 760px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-dh-reviews-heading {
		font-size: 36px;
	}
}

.naples-redesign .naples-dh-reviews-intro {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-medium);
	line-height: var(--naples-lh-loose);
	color: var(--naples-white);
	font-weight: 400;
	margin: 0 auto var(--naples-space-5);
	max-width: 760px;
	opacity: 0.95;
}

/* 4-card grid */
.naples-redesign .naples-dh-reviews-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: var(--naples-space-5);
	text-align: left;
}

@media (max-width: 1024px) {
	.naples-redesign .naples-dh-reviews-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.naples-redesign .naples-dh-reviews-grid {
		grid-template-columns: 1fr;
	}
}

.naples-redesign .naples-dh-review-card {
	background: var(--naples-white);
	color: var(--naples-primary);
	padding: 18px 18px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.naples-redesign .naples-dh-review-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.naples-redesign .naples-dh-review-stars {
	color: var(--naples-primary);
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1;
}

.naples-redesign .naples-dh-review-date {
	font-family: var(--naples-font-body);
	font-size: 12px;
	color: var(--naples-primary);
	opacity: 0.7;
	letter-spacing: 0.3px;
}

.naples-redesign .naples-dh-review-text {
	font-family: var(--naples-font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0;
}

.naples-redesign .naples-dh-reviews-cta-row {
	display: flex;
	justify-content: center;
}


/* ====================================================================
   DR. HASEN — Section 9: Plastic Surgery FAQ (white bg)
   Reuses the .naples-sc-section + .naples-dh-qa-block patterns.
   ==================================================================== */

.naples-redesign .naples-dh-faq {
	background: var(--naples-white);
}

.naples-redesign .naples-dh-faq .naples-dh-qa-block {
	margin-top: var(--naples-space-4);
}


/* ====================================================================
   DR. HASEN — Section 10: Start Your Journey (white bg)
   Plain section; .naples-sc-* classes do the work.
   ==================================================================== */

.naples-redesign .naples-dh-start {
	background: var(--naples-white);
}


/* ====================================================================
   ====================================================================
   PHASE 8 — /testimonials/
   --------------------------------------------------------------------
   Tabs, featured video swap, scroll-snap carousel, modular testimonial
   blocks, thank-you-card wall. JS lives in dist/js/naples-testimonials.js.
   New patterns prefixed .naples-tt-*. Reuses .naples-team-video* from
   Phase 4 for the title-bar + READ DESCRIPTION + expandable behavior.
   ====================================================================
   ==================================================================== */


/* ====================================================================
   TESTIMONIALS — tabs nav
   ==================================================================== */

.naples-redesign .naples-tt-tabs-section {
	background: var(--naples-white);
	padding: var(--naples-space-3) 0;
}

.naples-redesign .naples-tt-tabs {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.naples-redesign .naples-tt-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	background: var(--naples-white);
	color: var(--naples-primary);
	border: 1px solid var(--naples-primary);
	font-family: var(--naples-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.naples-redesign .naples-tt-tab:hover,
.naples-redesign .naples-tt-tab:focus {
	background: var(--naples-bg-light);
	color: var(--naples-primary);
	text-decoration: none;
	outline: 0;
}

.naples-redesign .naples-tt-tab.is-active {
	background: var(--naples-primary);
	color: var(--naples-white);
}

.naples-redesign .naples-tt-tab.is-active:hover,
.naples-redesign .naples-tt-tab.is-active:focus {
	background: var(--naples-primary);
	color: var(--naples-white);
	opacity: 0.92;
}

/* External "realself." tab — pink wordmark, no border highlight on active */
.naples-redesign .naples-tt-tab.is-external {
	border-color: transparent;
	background: var(--naples-white);
}

.naples-redesign .naples-tt-tab.is-external:hover,
.naples-redesign .naples-tt-tab.is-external:focus {
	background: var(--naples-bg-light);
}

.naples-redesign .naples-tt-tab-realself {
	font-family: var(--naples-font-body);
	font-size: 18px;
	font-weight: 700;
	color: #fe1f5c; /* RealSelf brand pink */
	letter-spacing: -0.3px;
}

.naples-redesign .naples-tt-tab-realself-dot {
	color: #fe1f5c;
}

@media (max-width: 600px) {
	.naples-redesign .naples-tt-tabs {
		gap: 8px;
	}

	.naples-redesign .naples-tt-tab {
		padding: 12px 18px;
		font-size: 14px;
	}
}


/* ====================================================================
   TESTIMONIALS — tab panels
   ==================================================================== */

.naples-redesign .naples-tt-panel {
	max-width: 980px;
	margin: 0 auto;
}

.naples-redesign .naples-tt-panel[hidden] {
	display: none;
}

/* "Coming soon" placeholder for the Current Reviews tab */
.naples-redesign .naples-tt-coming-soon {
	background: var(--naples-bg-light);
	color: var(--naples-primary);
	padding: var(--naples-space-6) var(--naples-space-4);
	text-align: center;
	font-family: var(--naples-font-body);
}

.naples-redesign .naples-tt-coming-soon p {
	margin: 0;
	font-size: var(--naples-text-medium);
	font-weight: 500;
	color: var(--naples-primary);
	font-family: var(--naples-font-body);
}


/* ====================================================================
   TESTIMONIALS — featured video
   Reuses .naples-team-video classes for chrome (title bar, toggle,
   description). Adds spacing modifier for the gap to the carousel.
   ==================================================================== */

.naples-redesign .naples-tt-featured {
	margin-bottom: var(--naples-space-3);
}


/* ====================================================================
   TESTIMONIALS — carousel of 9 video thumbnails
   Horizontal scroll-snap container. Arrows + click-to-jump bar.
   ==================================================================== */

.naples-redesign .naples-tt-carousel {
	margin-bottom: var(--naples-space-6);
}

/*
 * Carousel row — arrow + track + arrow flanking layout.
 * On mobile the arrows shrink and rely on swipe-to-scroll.
 */
.naples-redesign .naples-tt-carousel-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.naples-redesign .naples-tt-carousel-track {
	flex: 1 1 auto;
	min-width: 0; /* allow flex item to shrink below content size */
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;

	/* Hide scrollbar (visual indicator is the bar below) */
	scrollbar-width: none; /* Firefox */
}

.naples-redesign .naples-tt-carousel-track::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

/* Each thumbnail card */
.naples-redesign .naples-tt-thumb {
	flex: 0 0 calc((100% - 32px) / 3); /* 3 visible desktop */
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--naples-font-body);
	transition: opacity 0.2s ease;
}

@media (max-width: 900px) {
	.naples-redesign .naples-tt-thumb {
		flex-basis: calc((100% - 16px) / 2); /* 2 visible tablet */
	}
}

@media (max-width: 600px) {
	.naples-redesign .naples-tt-thumb {
		flex-basis: 75%; /* 1.25 visible mobile so user sees there's more */
	}
}

.naples-redesign .naples-tt-thumb:hover,
.naples-redesign .naples-tt-thumb:focus {
	opacity: 0.92;
	outline: 0;
}

.naples-redesign .naples-tt-thumb.is-active .naples-tt-thumb-image {
	box-shadow: 0 0 0 3px var(--naples-primary);
}

.naples-redesign .naples-tt-thumb-image {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--naples-bg-light);
}

.naples-redesign .naples-tt-thumb-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Play button overlay — semi-transparent circle with a Unicode ▶
 * (Black Right-Pointing Triangle U+25B6) sized via font-size for
 * crisp rendering at any pixel density. No SVG dependency.
 */
.naples-redesign .naples-tt-thumb-image .naples-tt-thumb-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.55);
	border-radius: 50%;
	color: var(--naples-white);
	font-size: 24px;
	line-height: 56px;
	text-align: center;
	pointer-events: none;
	display: block;
}

.naples-redesign .naples-tt-thumb-label {
	font-family: var(--naples-font-body);
	font-size: 14px;
	color: var(--naples-primary);
	font-weight: 500;
	letter-spacing: 0.2px;
}

/*
 * Carousel arrows — flank the track on each side. Defensive selectors
 * (button.naples-tt-carousel-arrow + descendant span) defeat any parent
 * theme reset that might collapse generic <button> sizing or hide
 * inline children. Unicode chevrons (‹ ›) are guaranteed to render.
 */
.naples-redesign button.naples-tt-carousel-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	padding: 0;
	margin: 0;
	background: var(--naples-white);
	border: 1px solid var(--naples-primary);
	color: var(--naples-primary);
	cursor: pointer;
	font-family: var(--naples-font-body);
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.naples-redesign button.naples-tt-carousel-arrow:hover,
.naples-redesign button.naples-tt-carousel-arrow:focus {
	background: var(--naples-primary);
	color: var(--naples-white);
	outline: 0;
}

.naples-redesign button.naples-tt-carousel-arrow > span {
	display: inline-block;
	line-height: 1;
	transform: translateY(-2px); /* nudge ‹/› to optical center */
}

@media (max-width: 600px) {
	.naples-redesign button.naples-tt-carousel-arrow {
		width: 32px;
		height: 32px;
		flex-basis: 32px;
		font-size: 22px;
	}
}

/*
 * Progress bar — full-width row below the track. Click anywhere to jump.
 */
.naples-redesign .naples-tt-carousel-bar {
	width: 100%;
	height: 4px;
	margin-top: 18px;
	background: rgba(37, 89, 111, 0.2); /* primary at 20% */
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.naples-redesign .naples-tt-carousel-bar-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 33%;
	background: var(--naples-primary);
	transition: transform 0.15s ease, width 0.15s ease;
	will-change: transform, width;
}


/* ====================================================================
   TESTIMONIALS — modular blocks (cream cards, plain headlines, videos)
   Each block can have a video on top, a card below, or both.
   ==================================================================== */

.naples-redesign .naples-tt-blocks {
	display: flex;
	flex-direction: column;
	gap: var(--naples-space-5);
	margin-top: var(--naples-space-5);
}

.naples-redesign .naples-tt-block {
	display: flex;
	flex-direction: column;
	gap: 0; /* video and card sit flush together when both present */
}

/* Card variants */
.naples-redesign .naples-tt-card {
	font-family: var(--naples-font-body);
	color: var(--naples-primary);
}

.naples-redesign .naples-tt-card.is-cream {
	background: var(--naples-bg-light);
	padding: var(--naples-space-4) var(--naples-space-4);
}

.naples-redesign .naples-tt-card.is-plain {
	background: var(--naples-white);
	padding: var(--naples-space-3) 0 0;
}

@media (max-width: 768px) {
	.naples-redesign .naples-tt-card.is-cream {
		padding: var(--naples-space-3);
	}
}

/* Card title — 'cream' uses h3 (bold body), 'plain' uses h2 (serif) */
.naples-redesign .naples-tt-card-title {
	font-family: var(--naples-font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--naples-primary);
	margin: 0 0 var(--naples-space-2);
	line-height: 1.3;
}

.naples-redesign .naples-tt-card.is-plain .naples-tt-card-title {
	font-family: var(--naples-font-heading);
	font-size: 32px;
	font-weight: 400;
	letter-spacing: -0.3px;
	line-height: var(--naples-lh-tight);
}

@media (max-width: 768px) {
	.naples-redesign .naples-tt-card.is-plain .naples-tt-card-title {
		font-size: 26px;
	}
}

/* Card body — multi-paragraph */
.naples-redesign .naples-tt-card-body p {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-medium);
	line-height: var(--naples-lh-loose);
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 var(--naples-space-2);
}

.naples-redesign .naples-tt-card-body p:last-child {
	margin-bottom: 0;
}

/* Plain card body sits a bit closer to title, lighter text */
.naples-redesign .naples-tt-card.is-plain .naples-tt-card-body {
	margin-top: 12px;
}

.naples-redesign .naples-tt-card.is-plain .naples-tt-card-body p {
	font-size: var(--naples-text-regular);
	color: var(--naples-primary);
	opacity: 0.85;
}

/* Author attribution (cream cards only) */
.naples-redesign .naples-tt-card-author {
	font-family: var(--naples-font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--naples-primary);
	margin: var(--naples-space-3) 0 0;
	letter-spacing: 0.2px;
}


/* ====================================================================
   TESTIMONIALS — Thank-you cards wall (2x12 grid)
   ==================================================================== */

.naples-redesign .naples-tt-thanks-section {
	background: var(--naples-white);
	padding: var(--naples-space-6) 0;
	font-family: var(--naples-font-body);
}

.naples-redesign .naples-tt-thanks-heading {
	font-family: var(--naples-font-heading);
	font-size: var(--naples-h2);
	line-height: var(--naples-lh-tight);
	color: var(--naples-primary);
	font-weight: 400;
	letter-spacing: -0.5px;
	text-align: center;
	margin: 0 0 12px;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px) {
	.naples-redesign .naples-tt-thanks-heading {
		font-size: 36px;
	}
}

.naples-redesign .naples-tt-thanks-intro {
	font-family: var(--naples-font-body);
	font-size: var(--naples-text-medium);
	line-height: var(--naples-lh-loose);
	color: var(--naples-primary);
	font-weight: 400;
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--naples-space-5);
}

.naples-redesign .naples-tt-thanks-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 980px;
	margin: 0 auto;
}

@media (max-width: 600px) {
	.naples-redesign .naples-tt-thanks-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

.naples-redesign .naples-tt-thanks-card {
	margin: 0;
	background: var(--naples-bg-light);
	overflow: hidden;
}

.naples-redesign .naples-tt-thanks-card picture,
.naples-redesign .naples-tt-thanks-card img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}


/* ====================================================================
   ====================================================================
   PHASE 9 — /contact/
   --------------------------------------------------------------------
   Map + info-panel split, full-bleed contact form on teal, and 3 simple
   text sections (Information Packet / Naples Visitors / Fort Myers
   Visitors) which reuse .naples-sc-* from Phase 6.
   New patterns prefixed .naples-contact-*. Reuses .naples-form-* from
   the newsletter module for the form layout primitives.
   ====================================================================
   ==================================================================== */


/* ====================================================================
   CONTACT — Map + Info panel split
   ==================================================================== */

.naples-redesign .naples-contact-split-section {
	background: var(--naples-white);
	padding: 0 0 var(--naples-space-5);
}

.naples-redesign .naples-contact-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	max-width: 980px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.naples-redesign .naples-contact-split {
		grid-template-columns: 1fr;
	}
}

/* Left side — map image + Get Directions button stacked */
.naples-redesign .naples-contact-map {
	display: flex;
	flex-direction: column;
}

.naples-redesign .naples-contact-map picture,
.naples-redesign .naples-contact-map img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.naples-redesign .naples-contact-directions {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--naples-primary);
	color: var(--naples-white);
	padding: 16px 24px;
	font-family: var(--naples-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-decoration: none;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.naples-redesign .naples-contact-directions:hover,
.naples-redesign .naples-contact-directions:focus {
	background: #1d4658; /* primary darker, matches RAC button hover */
	color: var(--naples-white);
	text-decoration: none;
	outline: 0;
}

.naples-redesign .naples-contact-directions-label {
	display: inline-block;
}

/* Right side — teal info panel */
.naples-redesign .naples-contact-info {
	background: var(--naples-primary);
	color: var(--naples-white);
	padding: var(--naples-space-4);
	font-family: var(--naples-font-body);
}

@media (max-width: 768px) {
	.naples-redesign .naples-contact-info {
		padding: var(--naples-space-3);
	}
}

.naples-redesign .naples-contact-info-name {
	font-family: var(--naples-font-body);
	font-size: 22px;
	font-weight: 700;
	color: var(--naples-white);
	margin: 0 0 8px;
	line-height: 1.3;
	letter-spacing: 0.2px;
}

.naples-redesign .naples-contact-info-tagline {
	font-family: var(--naples-font-body);
	font-size: 14px;
	color: var(--naples-white);
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
	opacity: 0.95;
	line-height: 1.5;
}

.naples-redesign .naples-contact-info-block {
	margin-bottom: 18px;
}

.naples-redesign .naples-contact-info-block:last-of-type {
	margin-bottom: var(--naples-space-3);
}

.naples-redesign .naples-contact-info-label {
	font-family: var(--naples-font-body);
	font-size: 11px;
	font-weight: 700;
	color: var(--naples-white);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0 0 6px;
	opacity: 0.85;
}

.naples-redesign .naples-contact-info-value {
	font-family: var(--naples-font-body);
	font-size: 14px;
	color: var(--naples-white);
	font-weight: 400;
	margin: 0;
	line-height: 1.65;
}

.naples-redesign .naples-contact-info-value strong {
	font-weight: 600;
}

.naples-redesign .naples-contact-info-footer {
	font-family: var(--naples-font-body);
	font-size: 13px;
	color: var(--naples-white);
	font-weight: 400;
	margin: var(--naples-space-3) 0 0;
	line-height: 1.55;
	opacity: 0.85;
	font-style: italic;
}


/* ====================================================================
   CONTACT — Intro paragraph spacing tweak
   ==================================================================== */

.naples-redesign .naples-contact-intro {
	padding: var(--naples-space-4) 0 var(--naples-space-5);
}


/* ====================================================================
   CONTACT — Form section (full-bleed teal)
   Reuses .naples-form-grid / .naples-form-row / .naples-form-field /
   .naples-form-submit / .naples-form-consent from the newsletter
   module. Adds textarea styling (newsletter only has inputs) and a
   wrapper section bg.
   ==================================================================== */

.naples-redesign .naples-contact-form-section {
	background: var(--naples-primary);
	padding: var(--naples-space-6) 0;
	font-family: var(--naples-font-body);
}

@media (max-width: 768px) {
	.naples-redesign .naples-contact-form-section {
		padding: var(--naples-space-5) 0;
	}
}

.naples-redesign .naples-contact-form {
	max-width: 980px;
	margin: 0 auto;
}

/* Textarea — same styling as input but allows growth */
.naples-redesign .naples-form-field.is-textarea {
	display: block;
	width: 100%;
}

.naples-redesign .naples-form-field textarea {
	display: block;
	width: 100%;
	padding: 14px 18px;
	font-family: var(--naples-font-body);
	font-size: 15px;
	line-height: 1.5;
	border-radius: 0;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--naples-white);
	min-height: 120px;
	resize: vertical;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.naples-redesign .naples-form-field textarea::placeholder {
	color: rgba(255, 255, 255, 0.85);
}

.naples-redesign .naples-form-field textarea:focus {
	outline: 0;
	background: rgba(255, 255, 255, 0.28);
	border-color: var(--naples-white);
}

/* Consent text — Terms link inherits underline emphasis */
.naples-redesign .naples-form-consent-text a {
	color: var(--naples-white);
	text-decoration: underline;
}

.naples-redesign .naples-form-consent-text a:hover,
.naples-redesign .naples-form-consent-text a:focus {
	color: var(--naples-white);
	opacity: 0.85;
}

.naples-redesign .naples-form-consent-text strong {
	font-weight: 700;
	color: var(--naples-white);
}


/* ====================================================================
   ====================================================================
   PHASE 10 — /gallery/ landing
   --------------------------------------------------------------------
   2x3 grid: 5 procedure cards (image + teal box w/ 2-col link list)
   plus 1 disclaimer card (teal-only quote + Request a Consultation).
   New patterns prefixed .naples-gallery-*. Header reuses
   .naples-team-* base, adds subtitle + action button row.
   ====================================================================
   ==================================================================== */


/* ====================================================================
   GALLERY — Header subtitle + action button row
   ==================================================================== */

.naples-redesign .naples-gallery-subtitle {
	font-family: var(--naples-font-body);
	font-size: 20px;
	color: var(--naples-primary);
	font-weight: 400;
	margin: 0 0 var(--naples-space-3);
	line-height: 1.4;
}

@media (max-width: 768px) {
	.naples-redesign .naples-gallery-subtitle {
		font-size: 17px;
	}
}

.naples-redesign .naples-gallery-actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-top: 8px;
}

.naples-redesign .naples-gallery-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	background: var(--naples-primary);
	color: var(--naples-white);
	font-family: var(--naples-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.naples-redesign .naples-gallery-search-btn:hover,
.naples-redesign .naples-gallery-search-btn:focus {
	background: #1d4658; /* primary darker */
	color: var(--naples-white);
	text-decoration: none;
	outline: 0;
}

.naples-redesign .naples-gallery-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	background: var(--naples-primary);
	color: var(--naples-white);
	text-decoration: none;
	transition: background-color 0.2s ease;
	flex: 0 0 auto;
}

.naples-redesign .naples-gallery-icon-btn:hover,
.naples-redesign .naples-gallery-icon-btn:focus {
	background: #1d4658;
	color: var(--naples-white);
	outline: 0;
}

.naples-redesign .naples-gallery-icon-btn svg {
	display: block;
}


/* ====================================================================
   GALLERY — Grid of 6 cells (2 cols x 3 rows)
   ==================================================================== */

.naples-redesign .naples-gallery-grid-section {
	background: var(--naples-white);
	padding: var(--naples-space-3) 0;
}

.naples-redesign .naples-gallery-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 1216px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.naples-redesign .naples-gallery-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}


/* ====================================================================
   GALLERY — Procedure card (image on top + teal box on bottom)
   ==================================================================== */

.naples-redesign .naples-gallery-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--naples-primary); /* fallback so any gap renders teal */
}

.naples-redesign .naples-gallery-card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 601 / 272;
	overflow: hidden;
	background: var(--naples-bg-light);
}

.naples-redesign .naples-gallery-card-image picture,
.naples-redesign .naples-gallery-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.naples-redesign .naples-gallery-card-box {
	background: var(--naples-primary);
	color: var(--naples-white);
	padding: var(--naples-space-3) var(--naples-space-3) var(--naples-space-3);
	flex: 1 1 auto;
}

@media (max-width: 768px) {
	.naples-redesign .naples-gallery-card-box {
		padding: 20px;
	}
}

.naples-redesign .naples-gallery-card-heading {
	font-family: var(--naples-font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--naples-white);
	margin: 0 0 16px;
	letter-spacing: 0.3px;
	line-height: 1.3;
}

/* 2-column list of procedure links — CSS columns for natural balance */
.naples-redesign .naples-gallery-card-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 16px;
}

@media (max-width: 480px) {
	.naples-redesign .naples-gallery-card-list {
		columns: 1;
	}
}

.naples-redesign .naples-gallery-card-list li {
	break-inside: avoid;
	margin: 0 0 8px;
	list-style: none;
}

.naples-redesign .naples-gallery-card-list li:last-child {
	margin-bottom: 0;
}

.naples-redesign .naples-gallery-card-link {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: var(--naples-white);
	font-family: var(--naples-font-body);
	font-size: 13px;
	font-weight: 400;
	text-decoration: none;
	letter-spacing: 0.2px;
	transition: opacity 0.2s ease;
}

.naples-redesign .naples-gallery-card-link:hover,
.naples-redesign .naples-gallery-card-link:focus {
	color: var(--naples-white);
	text-decoration: underline;
	outline: 0;
}

.naples-redesign .naples-gallery-card-link-arrow {
	display: inline-block;
	color: var(--naples-white);
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
}

.naples-redesign .naples-gallery-card-link-label {
	display: inline-block;
}


/* ====================================================================
   GALLERY — Disclaimer card (6th cell — teal-only, no image)
   ==================================================================== */

.naples-redesign .naples-gallery-disclaimer-card {
	background: var(--naples-primary);
	color: var(--naples-white);
	padding: var(--naples-space-4) var(--naples-space-4);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--naples-space-3);
	min-height: 100%;
}

@media (max-width: 768px) {
	.naples-redesign .naples-gallery-disclaimer-card {
		padding: var(--naples-space-3);
	}
}

.naples-redesign .naples-gallery-disclaimer-quote {
	font-family: var(--naples-font-heading);
	font-size: 32px;
	font-weight: 400;
	line-height: var(--naples-lh-tight);
	color: var(--naples-white);
	letter-spacing: -0.3px;
	margin: 0;
}

@media (max-width: 768px) {
	.naples-redesign .naples-gallery-disclaimer-quote {
		font-size: 26px;
	}
}

.naples-redesign .naples-gallery-disclaimer-cta {
	display: flex;
	justify-content: flex-end;
	margin-top: auto;
}

@media (max-width: 480px) {
	.naples-redesign .naples-gallery-disclaimer-cta {
		justify-content: flex-start;
	}
}


/* ====================================================================
   PHASE 11.1 — Naples breadcrumb full-bleed escape from eii-container
   --------------------------------------------------------------------
   When breadcrumbs.php renders the naples breadcrumb on legacy pages,
   it lands inside the parent theme's <div class="eii-container">
   wrapper (max-width ~1216px). The breadcrumb's teal background needs
   to span the full viewport width, so we break it out using the
   classic 100vw + negative margin trick. The inner .naples-container
   keeps the text constrained to the layout width as expected.
   ==================================================================== */
.naples-redesign .eii-content-before .naples-team-breadcrumb {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}


/* ====================================================================
   PHASE 11.1.x — Fix: breadcrumb text must always be white
   --------------------------------------------------------------------
   The global body-text rule (.naples-redesign li → teal) was making
   the breadcrumb "current page" item invisible (teal text on teal bar).
   This catch-all selector forces ALL elements inside the breadcrumb
   to render in white, regardless of what tags Breadcrumb NavXT outputs.
   ==================================================================== */
.naples-redesign .naples-team-breadcrumb,
.naples-redesign .naples-team-breadcrumb *,
.naples-redesign .naples-team-breadcrumb a,
.naples-redesign .naples-team-breadcrumb li,
.naples-redesign .naples-team-breadcrumb span,
.naples-redesign .naples-team-breadcrumb .breadcrumb_last {
	color: var(--naples-white) !important;
}


/* ====================================================================
   PHASE 12.x — Testimonials tabs restyle
   --------------------------------------------------------------------
   Old look: outlined teal tabs on white, with realself in pink (#fe1f5c).
   New look: filled cream tabs (warm-white) for inactive states, teal
   filled for active, realself in teal too (no more pink).
   ==================================================================== */

/* Inactive tab — cream fill, no outline */
.naples-redesign .naples-tt-tab {
	background: var(--naples-bg-light);
	border: 1px solid transparent;
	border-radius: 0;
}

/* Hover state of inactive — slightly darker cream */
.naples-redesign .naples-tt-tab:hover,
.naples-redesign .naples-tt-tab:focus {
	background: #ebe8df;  /* one shade darker than --naples-bg-light */
}

/* Active stays teal (already correct), just inherit the radius */
.naples-redesign .naples-tt-tab.is-active {
	border-color: var(--naples-primary);
}

/* External (realself) — cream fill, no outline, same as inactive */
.naples-redesign .naples-tt-tab.is-external {
	background: var(--naples-bg-light);
	border-color: transparent;
}

.naples-redesign .naples-tt-tab.is-external:hover,
.naples-redesign .naples-tt-tab.is-external:focus {
	background: #ebe8df;
}

/* Realself wordmark — change from pink to teal */
.naples-redesign .naples-tt-tab-realself {
	color: var(--naples-primary);
}

.naples-redesign .naples-tt-tab-realself-dot {
	color: var(--naples-primary);
}


/* ====================================================================
   PHASE 12.x — Testimonials carousel restyle
   --------------------------------------------------------------------
   Three changes to match the Figma master:
     1. Arrows lose their box (no border, no background, no fill on hover).
        They sit at the sides of the track, icon-only.
     2. The track / first thumb aligns flush with the left edge of the
        featured video above (no padding-left reserving arrow space).
     3. The progress bar gets thicker (6px) and gray-light, only as wide
        as the actual slider content (track row), no longer hugged by
        the full container.
   ==================================================================== */

/* 1. Arrows: ghost buttons, no box */
.naples-redesign button.naples-tt-carousel-arrow {
	background: transparent !important;
	border: 0 !important;
	color: var(--naples-primary);
	width: 28px;
	flex: 0 0 28px;
}

.naples-redesign button.naples-tt-carousel-arrow:hover,
.naples-redesign button.naples-tt-carousel-arrow:focus {
	background: transparent !important;
	color: var(--naples-primary);
	opacity: 0.6;
}

@media (max-width: 600px) {
	.naples-redesign button.naples-tt-carousel-arrow {
		width: 24px;
		flex-basis: 24px;
	}
}

/* 2. Track flush left — reduce row gap so cards align with featured video.
   The row has gap: 12px; we keep that but the arrows are now narrower so
   the first card sits ~28+12=40px from the edge. To bring it FLUSH with
   the featured video above, we make the arrows sit OUTSIDE the row using
   negative margin. */
.naples-redesign .naples-tt-carousel-row {
	gap: 8px;
	position: relative;
}

.naples-redesign button.naples-tt-carousel-arrow.is-prev {
	margin-left: -36px;
}

.naples-redesign button.naples-tt-carousel-arrow.is-next {
	margin-right: -36px;
}

@media (max-width: 768px) {
	.naples-redesign button.naples-tt-carousel-arrow.is-prev,
	.naples-redesign button.naples-tt-carousel-arrow.is-next {
		margin-left: 0;
		margin-right: 0;
	}
}

/* 3. Progress bar — thicker, gray light bg, only spans the track width */
.naples-redesign .naples-tt-carousel-bar {
	height: 6px;
	background: #e5e2db;  /* warm gray, slightly tinted toward the cream palette */
	margin-top: 14px;
	/* If you want it the EXACT width of the track (excluding arrow areas
	   on either side), uncomment the following two lines: */
	margin-left: 0;
	margin-right: 0;
}

.naples-redesign .naples-tt-carousel-bar-thumb {
	background: var(--naples-primary);
}


/* ====================================================================
   ====================================================================
   PHASE 12.3 — RepAlly Reviews Widget restyle (global)
   --------------------------------------------------------------------
   Visually overrides the legacy Etna Reputation plugin widget
   (#reviews-feature.repAllyFeature) that renders on /about/ and
   /medical-spa/. Match target: the naples-dh-reviews look from
   dr-hasen-naples.php Section 8.

   Strategy: CSS-only. No PHP, no JS edits.
     • Teal full-bleed wrapper, cream cards, no radius
     • Glide carousel forced into a static 4-card grid via
       display:grid !important + transform:none !important.
       Arrows + bullets hidden. JS still runs, CSS neutralizes it.
     • Stars: override --repAlly-star-color to teal so the
       orange-gradient legacy stars become teal solid.
     • Google source logos hidden (Figma doesn't show them).
     • Footer reordered above body via flex order: stars+date in
       the card header, review text below.
     • CTA <a class="button secondary"> restyled to mimic
       .naples-banner-cta (white bg + teal 38x38 icon-box + SVG arrow).
   ==================================================================== */


/* Section wrapper ---------------------------------------------------- */
.naples-redesign #reviews-feature.repAllyFeature {
    background: var(--naples-primary) !important;
    color: var(--naples-white);
    padding: var(--naples-space-6) 0 !important;
    font-family: var(--naples-font-body);
    text-align: center;
    --repAlly-star-color: var(--naples-primary);
    --repAlly-star-color-template: rgba(37, 89, 111, 0.2);
}
@media (max-width: 768px) {
    .naples-redesign #reviews-feature.repAllyFeature {
        padding: var(--naples-space-5) 0 !important;
    }
}
.naples-redesign #reviews-feature .repAllyFeature-container {
    padding-bottom: 0 !important;
}

/* Nameplate -> small eyebrow ---------------------------------------- */
.naples-redesign #reviews-feature .repAllyFeature-nameplate {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.naples-redesign #reviews-feature .repAllyFeature-nameplate-title {
    font-family: var(--naples-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--naples-white) !important;
    letter-spacing: 1.5px !important;
    text-transform: none !important;
    margin: 0 0 12px !important;
    opacity: 0.95;
    line-height: 1.4 !important;
}

/* Main heading + intro ---------------------------------------------- */
.naples-redesign #reviews-feature h3 {
    font-family: var(--naples-font-heading) !important;
    font-size: var(--naples-h2) !important;
    line-height: var(--naples-lh-tight) !important;
    color: var(--naples-white) !important;
    font-weight: 400 !important;
    margin: 0 auto var(--naples-space-3) !important;
    letter-spacing: -0.5px !important;
    max-width: 760px !important;
}
@media (max-width: 768px) {
    .naples-redesign #reviews-feature h3 {
        font-size: 36px !important;
    }
}
.naples-redesign #reviews-feature .repAllyFeature-gutter > p {
    font-family: var(--naples-font-body) !important;
    font-size: var(--naples-text-medium) !important;
    line-height: var(--naples-lh-loose) !important;
    color: var(--naples-white) !important;
    font-weight: 400 !important;
    margin: 0 auto var(--naples-space-5) !important;
    max-width: 760px !important;
    opacity: 0.95;
}

/* Glide -> static 4-col grid ---------------------------------------- */
.naples-redesign #reviews-feature .glide__track {
    overflow: visible !important;
}
.naples-redesign #reviews-feature .glide__slides {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 0 var(--naples-space-5) !important;
    padding: 0 !important;
    list-style: none;
    text-align: left;
}
.naples-redesign #reviews-feature .glide__slide {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
}
.naples-redesign #reviews-feature .glide__slide:nth-child(n+5) {
    display: none !important;
}
@media (max-width: 1024px) {
    .naples-redesign #reviews-feature .glide__slides {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .naples-redesign #reviews-feature .glide__slides {
        grid-template-columns: 1fr !important;
    }
    .naples-redesign #reviews-feature .glide__slide:nth-child(n+3) {
        display: none !important;
    }
}

/* Review card -------------------------------------------------------- */
.naples-redesign #reviews-feature .repAllyFeature-review {
    background-color: var(--naples-bg-light) !important;
    color: var(--naples-primary) !important;
    padding: 18px !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
}
.naples-redesign #reviews-feature .repAllyFeature-review-body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--naples-font-body) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--naples-primary) !important;
    font-weight: 400;
    order: 2;
}
.naples-redesign #reviews-feature .repAllyFeature-review-footer {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    order: 1;
}

/* Stars -> teal solid (override plugin CSS var) --------------------- */
.naples-redesign #reviews-feature .repAllyStars {
    --repAlly-star-height: 14px !important;
}
.naples-redesign #reviews-feature .repAllyStars svg path {
    fill: var(--naples-primary) !important;
}
.naples-redesign #reviews-feature .repAllyStars-template svg path {
    fill: rgba(37, 89, 111, 0.2) !important;
}

/* Date --------------------------------------------------------------- */
.naples-redesign #reviews-feature .repAllyFeature-footerDate {
    font-family: var(--naples-font-body) !important;
    font-size: 12px !important;
    color: var(--naples-primary) !important;
    opacity: 0.7;
    letter-spacing: 0.3px;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide Google source logos ------------------------------------------ */
.naples-redesign #reviews-feature .repAllyFeature-footerSource {
    display: none !important;
}

/* Hide Glide arrows + bullets --------------------------------------- */
.naples-redesign #reviews-feature .repAllyFeature-slideArrows,
.naples-redesign #reviews-feature .glide__arrows,
.naples-redesign #reviews-feature .repAllyFeature-slideBullets,
.naples-redesign #reviews-feature .glide__bullets {
    display: none !important;
}

/* CTA "Read More Featured Reviews" -> naples-banner-cta look -------- */
.naples-redesign #reviews-feature .repAllyFeature-link {
    display: flex !important;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
}
.naples-redesign #reviews-feature a.button.secondary {
    background: var(--naples-white) !important;
    color: var(--naples-primary) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 24px 6px 6px !important;
    font-family: var(--naples-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    line-height: 1.2 !important;
}
.naples-redesign #reviews-feature a.button.secondary::before {
    content: '';
    display: inline-block;
    width: 38px;
    height: 38px;
    background-color: var(--naples-primary);
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%2F%3E%3Cpolyline%20points%3D%2212%205%2019%2012%2012%2019%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
.naples-redesign #reviews-feature a.button.secondary:hover {
    background: var(--naples-bg-light) !important;
}


/* ====================================================================
   PHASE 12.3.1 — RepAlly hotfixes
   --------------------------------------------------------------------
   Fixes after 12.3 deploy:
   1. SVG stars not rendering filled (inline style="fill:..." on each
      path resists CSS overrides). Replace with Unicode ★★★★★ via
      ::before, hide all legacy SVG layers. Matches dr-hasen pattern.
   2. Cards rendering body first, footer last. Force flex-direction:
      column + order with !important. Stars/date go ABOVE body.
   3. CTA legacy (.button.secondary in main-critical.css) had
      width:100%, border, lavender hover. Aggressive reset.
   4. flex:1 on body equalizes card heights regardless of text length.
   ==================================================================== */

/* 1. Stars: hide SVG, inject Unicode (match dr-hasen-naples) -------- */
.naples-redesign #reviews-feature .repAllyFeature-footerStars > * {
    display: none !important;
}
.naples-redesign #reviews-feature .repAllyFeature-footerStars {
    line-height: 1 !important;
    display: inline-block !important;
}
.naples-redesign #reviews-feature .repAllyFeature-footerStars::before {
    content: '\2605\2605\2605\2605\2605';
    color: var(--naples-primary);
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1;
    display: inline-block;
}

/* 2. Card flex order + structure (stronger specificity) ------------- */
.naples-redesign #reviews-feature .glide__slide.repAllyFeature-review {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.naples-redesign #reviews-feature .glide__slide.repAllyFeature-review > .reviewer,
.naples-redesign #reviews-feature .glide__slide.repAllyFeature-review > span[itemprop="itemReviewed"] {
    display: none !important;
}
.naples-redesign #reviews-feature .glide__slide.repAllyFeature-review > .repAllyFeature-review-footer {
    order: 1 !important;
}
.naples-redesign #reviews-feature .glide__slide.repAllyFeature-review > .repAllyFeature-review-body {
    order: 2 !important;
    flex: 1 1 auto !important;
}

/* 3. CTA: aggressive reset of legacy .button.secondary -------------- */
.naples-redesign #reviews-feature a.button.secondary,
.naples-redesign #reviews-feature a.button.secondary:link,
.naples-redesign #reviews-feature a.button.secondary:visited {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: var(--naples-primary) !important;
    background: var(--naples-white) !important;
    padding: 6px 24px 6px 6px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
}
.naples-redesign #reviews-feature a.button.secondary:hover,
.naples-redesign #reviews-feature a.button.secondary:focus,
.naples-redesign #reviews-feature a.button.secondary:active {
    background: var(--naples-bg-light) !important;
    border-color: transparent !important;
    color: var(--naples-primary) !important;
}

/* CTA icon-box: stronger override */
.naples-redesign #reviews-feature a.button.secondary::before {
    content: '' !important;
    display: inline-block !important;
    width: 38px !important;
    height: 38px !important;
    background-color: var(--naples-primary) !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%2F%3E%3Cpolyline%20points%3D%2212%205%2019%2012%2012%2019%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ====================================================================
   PHASE 12.3.2 — RepAlly: the REAL bug
   --------------------------------------------------------------------
   Found via DevTools inspection:
   • .repAllyFeature-review-footer is position: ABSOLUTE in legacy
     plugin CSS (bottom-anchored via --repAllyFeature-footer-height:60px).
     position:absolute removes it from flex flow, so `order` is a no-op.
     Fix: force position:static on footer so flex order works.
   • Card has padding-bottom: 60px legacy (footer height reserve).
     Fix: reset padding entirely.
   • Glide JS applies inline style="width:262.5px; margin-left:20px"
     on each slide. Need stronger override.
   • Eyebrow: bumped to serif + bigger; CTA text-transform: none.
   ==================================================================== */

/* THE FIX: kill absolute positioning on footer + reset card padding */
.naples-redesign #reviews-feature .repAllyFeature-review,
.naples-redesign #reviews-feature div.repAllyFeature-review {
    position: static !important;
    padding: 20px !important;
}
.naples-redesign #reviews-feature .repAllyFeature-review-footer,
.naples-redesign #reviews-feature div.repAllyFeature-review-footer {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

/* Defeat Glide's inline width/margin on slides */
.naples-redesign #reviews-feature .glide__slides > .glide__slide {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hide ALL non-content children of the card, keep only body + footer */
.naples-redesign #reviews-feature .glide__slide.repAllyFeature-review > .reviewer,
.naples-redesign #reviews-feature .glide__slide.repAllyFeature-review > span[itemprop="itemReviewed"],
.naples-redesign #reviews-feature .glide__slide.repAllyFeature-review > meta {
    display: none !important;
}

/* Eyebrow: serif font, larger */
.naples-redesign #reviews-feature .repAllyFeature-nameplate-title,
.naples-redesign #reviews-feature .repAllyFeature-nameplate h2 {
    font-family: var(--naples-font-heading) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--naples-white) !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    margin: 0 0 var(--naples-space-2) !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    opacity: 0.95;
}

/* CTA: kill uppercase from legacy .button.secondary */
.naples-redesign #reviews-feature a.button.secondary,
.naples-redesign #reviews-feature a.button.secondary:link,
.naples-redesign #reviews-feature a.button.secondary:visited,
.naples-redesign #reviews-feature a.button.secondary:hover,
.naples-redesign #reviews-feature a.button.secondary:focus {
    text-transform: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.3 !important;
}


/* ====================================================================
   ====================================================================
   PHASE 12.4 — Etna YouTube Player restyle (global)
   --------------------------------------------------------------------
   Restyles the legacy etna-youtube-player plugin's video chrome to
   match the naples-team-video pattern (Phase 4/8).

   Plugin behavior preserved: video embed, dynamic title/date/desc
   from YouTube API, Read/Hide Description toggle (handled by plugin
   JS). Our CSS repaints the bar (was periwinkle #516ac2, now teal),
   and naples-youtube-player.js reshapes the .read-more <a> into
   icon + uppercase label.

   Pages affected: /about/, /plastic-surgery/ (confirmed).
   ==================================================================== */

/* Outer container: reset legacy spacing + radius ------------------- */
.naples-redesign .etna-youtube-playlist-container {
    margin: var(--naples-space-5) auto !important;
}
.naples-redesign .etna-youtube-player-container {
    border-radius: 0 !important;
    overflow: hidden;
}

/* Details bar: was periwinkle, now teal ----------------------------- */
.naples-redesign .etna-youtube-playlist-container .youtube-player-details {
    background: var(--naples-primary) !important;
    color: var(--naples-white) !important;
    padding: var(--naples-space-3) var(--naples-space-4) !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "title  toggle"
        "date   toggle"
        "desc   desc";
    gap: 4px 24px !important;
    align-items: start !important;
}

/* Title */
.naples-redesign .etna-youtube-playlist-container .youtube-player-details h2 {
    grid-area: title;
    font-family: var(--naples-font-heading) !important;
    font-size: 28px !important;
    line-height: var(--naples-lh-tight) !important;
    color: var(--naples-white) !important;
    font-weight: 400 !important;
    margin: 0 !important;
    letter-spacing: -0.3px !important;
}
@media (max-width: 768px) {
    .naples-redesign .etna-youtube-playlist-container .youtube-player-details h2 {
        font-size: 22px !important;
    }
}

/* Date */
.naples-redesign .etna-youtube-playlist-container .youtube-player-details p.date {
    grid-area: date;
    font-family: var(--naples-font-body) !important;
    font-size: 14px !important;
    color: var(--naples-white) !important;
    opacity: 0.85 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Toggle link "READ DESCRIPTION +" --------------------------------- */
.naples-redesign .etna-youtube-playlist-container .youtube-player-details a.read-more {
    grid-area: toggle;
    align-self: center;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--naples-white) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--naples-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.naples-redesign .etna-youtube-playlist-container .youtube-player-details a.read-more:hover,
.naples-redesign .etna-youtube-playlist-container .youtube-player-details a.read-more:focus {
    color: var(--naples-white) !important;
    opacity: 0.85;
    text-decoration: none !important;
}
.naples-redesign .etna-youtube-playlist-container .youtube-player-details a.read-more .naples-yt-toggle-label {
    line-height: 1;
}
.naples-redesign .etna-youtube-playlist-container .youtube-player-details a.read-more .naples-yt-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    color: var(--naples-white);
}

/* Description (expanded) ------------------------------------------- */
.naples-redesign .etna-youtube-playlist-container .youtube-player-details p.description {
    grid-area: desc;
    font-family: var(--naples-font-body) !important;
    font-size: 15px !important;
    line-height: var(--naples-lh-body) !important;
    color: var(--naples-white) !important;
    margin: var(--naples-space-2) 0 0 !important;
    opacity: 0.95;
    font-weight: 400 !important;
}

/* Mobile: stack toggle below date ---------------------------------- */
@media (max-width: 600px) {
    .naples-redesign .etna-youtube-playlist-container .youtube-player-details {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "title"
            "date"
            "toggle"
            "desc" !important;
        padding: var(--naples-space-3) !important;
    }
    .naples-redesign .etna-youtube-playlist-container .youtube-player-details a.read-more {
        justify-self: start;
        margin-top: var(--naples-space-2) !important;
    }
}


/* ====================================================================
   PHASE 12.10 — etna-photo-gallery category/subcategory pages
   --------------------------------------------------------------------
   Scope: pages rendered by the etna-photo-gallery plugin (URL pattern
   /gallery/<cat>/<subcat>/) when running with naples chrome. The plugin
   emits a naked <h1> right after the breadcrumb without spacing, so it
   visually crashes into the navbar. Add top spacing.

   Body has both .naples-redesign and .eii-gallery-category classes;
   .eii-gallery-category alone could theoretically match a non-naples
   page, so we require both for the chained class scope.
   ==================================================================== */

.naples-redesign.eii-gallery-category h1 {
	margin-top: var(--naples-space-6);
	padding-top: var(--naples-space-4);
}

@media (max-width: 767px) {
	.naples-redesign.eii-gallery-category h1 {
		margin-top: var(--naples-space-4);
		padding-top: var(--naples-space-3);
	}
}


/* ====================================================================
   PHASE 12.X — Gallery card link arrow: replace chevron with SVG icon
   The SVG sits inside .naples-gallery-card-link-arrow span. The old
   chevron used CSS content; the new SVG is an <img>, so override.
   ==================================================================== */
.naples-redesign .naples-gallery-card-link-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        margin-right: 6px;
        flex-shrink: 0;
}

.naples-redesign .naples-gallery-card-link-arrow::before {
        /* Hide the old chevron pseudo-content if any rule still tries to inject it */
        content: none;
}

.naples-redesign .naples-gallery-card-link-arrow img {
        display: block;
        width: 16px;
        height: 16px;
        /* Inherit color from parent so currentColor in SVG works */
        color: inherit;
}


/* ====================================================================
   PHASE 12.X — Gallery card lists: remove default bullet markers
   The <ul>/<li> structure was rendering native dots/bullets before the
   custom arrow-up-right SVG icon. Force list-style:none + reset padding.
   ==================================================================== */
.naples-redesign .naples-gallery-card ul,
.naples-redesign .naples-gallery-card-list,
.naples-redesign .naples-gallery-card-links {
        list-style: none;
        list-style-type: none;
        padding-left: 0;
        margin-left: 0;
}

.naples-redesign .naples-gallery-card li,
.naples-redesign .naples-gallery-card-list li,
.naples-redesign .naples-gallery-card-links li {
        list-style: none;
        list-style-type: none;
}

.naples-redesign .naples-gallery-card li::marker,
.naples-redesign .naples-gallery-card-list li::marker,
.naples-redesign .naples-gallery-card-links li::marker {
        content: '';
        display: none;
}

/* Force-remove inherited bullet from main-critical.css "main ul li::before" rule */
.naples-redesign .naples-gallery-card-list li::before {
        content: none !important;
        display: none !important;
}

/* ====================================================================
   PHASE 12.X — Gallery header: align to left edge of grid (not centered)
   The .naples-team-intro inside .naples-container by default has padding
   or max-width that visually insets the H1 + subtitle + buttons. Override
   to make them start at the left edge, aligned with the card grid below.
   ==================================================================== */
.naples-redesign .naples-gallery-header .naples-team-intro {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        text-align: left;
}

.naples-redesign .naples-gallery-header .naples-team-page-heading,
.naples-redesign .naples-gallery-header .naples-gallery-subtitle,
.naples-redesign .naples-gallery-header .naples-gallery-actions {
        text-align: left;
        margin-left: 0;
}

/* ====================================================================
   PHASE 12.X — Hero overlay logo: 50% larger
   The new SVG logo (LOGOTYPE_WHITE.svg) replaced the legacy PNG and
   came out smaller in the hero banner. Bump it 50% via scale on
   the inner <img>, anchored center, so positioning stays intact.
   ==================================================================== */
.naples-redesign .naples-banner-overlay img {
        transform: scale(1.5);
        transform-origin: center center;
}

/* ====================================================================
   PHASE 12.35 — Dr. Hasen Surgical Specialties refinement (final)
   1. Hide legacy dots and chevrons on procedure items
   2. View Photo Gallery uses naples-rac-button (the navbar component)
      Component CSS lives in naples-master.css; this block only positions
      and centers it.
   ==================================================================== */

/* 1. Strip dots and chevrons from procedure items */
.naples-redesign .naples-dh-specialties-grid li::before,
.naples-redesign .naples-dh-specialties-grid li::marker {
        content: none !important;
        display: none !important;
}
.naples-redesign .naples-dh-specialties-link::before {
        content: none;
        display: none;
}

/* 2. Center the CTA horizontally below the teal box */
.naples-redesign .naples-dh-specialties {
        text-align: center;
}

/* Preserve left alignment for content inside the teal box and image */
.naples-redesign .naples-dh-specialties-box,
.naples-redesign .naples-dh-specialties-image {
        text-align: left;
}

/* Spacing above the standalone CTA — applied to the wrapper div */
.naples-redesign .naples-dh-specialties-cta-wrap {
        margin-top: 48px;
        text-align: center;
}
@media (max-width: 600px) {
        .naples-redesign .naples-dh-specialties-cta-wrap {
                margin-top: 32px;
        }
}

/* ====================================================================
   PHASE 12.37 — Placeholder for missing staff portraits
   ==================================================================== */
.naples-redesign .naples-team-member-image.is-placeholder {
        background: var(--naples-bg-light);
        color: var(--naples-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 4 / 3;
        min-height: 280px;
}
.naples-redesign .naples-team-member-image.is-placeholder svg {
        width: 60%;
        max-width: 200px;
        height: auto;
        display: block;
}
@media (max-width: 768px) {
        .naples-redesign .naples-team-member-image.is-placeholder {
                min-height: 240px;
        }
}

/* ====================================================================
   PHASE 12.41 — FAQ → Newsletter spacing on procedure pages
   Applies to all /plastic-surgery/* and /medical-spa/* pages where
   Gutenberg wp-block-columns (used for FAQs) precedes the newsletter.

   Two complementary rules to handle the irregular DOM:
   1. Margin-bottom on EVERY wp-block-columns inside .eii-content
      — gives consistent FAQ row spacing
   2. Extra margin-top on .naples-newsletter when it follows .eii-content
      — guarantees breathing room before newsletter regardless of last
        element type
   ==================================================================== */

.naples-redesign .eii-content > .wp-block-columns {
        margin-bottom: var(--naples-space-3);
}

.naples-redesign .eii-content > .wp-block-columns:last-of-type {
        margin-bottom: calc(var(--naples-space-5) * 2);
}

.naples-redesign .eii-content + .naples-newsletter,
.naples-redesign .naples-newsletter {
        margin-top: calc(var(--naples-space-5) * 2);
}

@media (max-width: 768px) {
        .naples-redesign .eii-content > .wp-block-columns:last-of-type {
                margin-bottom: calc(var(--naples-space-4) * 2);
        }
        .naples-redesign .eii-content + .naples-newsletter,
        .naples-redesign .naples-newsletter {
                margin-top: calc(var(--naples-space-4) * 2);
        }
}

/* ====================================================================
   PHASE 12.44 — CV link button under Professional Memberships
   ==================================================================== */
.naples-redesign .naples-dh-cv-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: var(--naples-space-3);
        padding: 0;
        background: transparent;
        color: var(--naples-warm-red);
        font-family: var(--naples-font-body);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-decoration: none;
        transition: opacity 0.2s ease;
}

.naples-redesign .naples-dh-cv-link:hover,
.naples-redesign .naples-dh-cv-link:focus {
        opacity: 0.75;
        text-decoration: none;
        outline: 0;
}

.naples-redesign .naples-dh-cv-arrow {
        display: inline-flex;
        align-items: center;
}

.naples-redesign .naples-dh-cv-arrow svg {
        display: block;
}

/* ====================================================================
   PHASE 12.44 — CV link button under Professional Memberships
   Editorial-style link (not a filled button): uppercase, warm-red,
   chevron arrow. Distinguishes secondary actions from primary CTAs.
   ==================================================================== */
.naples-redesign .naples-dh-cv-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: var(--naples-space-3);
        margin-bottom: var(--naples-space-3);
        padding: 0;
        background: transparent;
        color: var(--naples-warm-red);
        font-family: var(--naples-font-body);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-decoration: none;
        transition: opacity 0.2s ease;
}

.naples-redesign .naples-dh-cv-link:hover,
.naples-redesign .naples-dh-cv-link:focus {
        opacity: 0.75;
        text-decoration: none;
        outline: 0;
}

.naples-redesign .naples-dh-cv-arrow {
        display: inline-flex;
        align-items: center;
}

.naples-redesign .naples-dh-cv-arrow svg {
        display: block;
}

/* ====================================================================
   PHASE 12.47 — Hide team group photo on /about/our-team/
   The full-team posed photo is hidden via CSS. The HTML block remains
   in place (includes/our-team-naples/our-team-naples.php lines 160-169)
   for easy reversal — delete this block to restore.
   ==================================================================== */
.naples-redesign .naples-team-group-photo {
        display: none !important;
}


/* ====================================================================
   ====================================================================
   GALLERY CASE PAGE — Naples button + link override
   --------------------------------------------------------------------
   The legacy etna-photo-gallery shortcodes render buttons styled by
   main-critical.css with .button.primary (#9c5a9b purple) and 
   .button.secondary (#516ac2 blue-purple), font-family muli, weight 800.
   Override scoped to .naples-redesign.eii-gallery-case to repaint
   all buttons + links in Naples teal + Inter without touching anything
   outside the case page.
   ====================================================================
   ==================================================================== */

/* All legacy buttons on the case page → Naples teal */
.naples-redesign.eii-gallery-case .button,
.naples-redesign.eii-gallery-case button.button,
.naples-redesign.eii-gallery-case a.button,
.naples-redesign.eii-gallery-case .eii-btn,
.naples-redesign.eii-gallery-case .button.primary,
.naples-redesign.eii-gallery-case .button.secondary,
.naples-redesign.eii-gallery-case .button.tertiary,
.naples-redesign.eii-gallery-case .eii-btn.primary,
.naples-redesign.eii-gallery-case .eii-btn.secondary,
.naples-redesign.eii-gallery-case .eii-btn.tertiary {
	background: var(--naples-primary) !important;
	border: 1px solid var(--naples-primary) !important;
	color: var(--naples-white) !important;
	font-family: var(--naples-font-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.4px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	padding: 14px 28px !important;
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.naples-redesign.eii-gallery-case .button:hover,
.naples-redesign.eii-gallery-case .button:focus,
.naples-redesign.eii-gallery-case a.button:hover,
.naples-redesign.eii-gallery-case a.button:focus,
.naples-redesign.eii-gallery-case button.button:hover,
.naples-redesign.eii-gallery-case button.button:focus,
.naples-redesign.eii-gallery-case .eii-btn:hover,
.naples-redesign.eii-gallery-case .eii-btn:focus,
.naples-redesign.eii-gallery-case .button.primary:hover,
.naples-redesign.eii-gallery-case .button.primary:focus,
.naples-redesign.eii-gallery-case .button.secondary:hover,
.naples-redesign.eii-gallery-case .button.secondary:focus,
.naples-redesign.eii-gallery-case .button.tertiary:hover,
.naples-redesign.eii-gallery-case .button.tertiary:focus,
.naples-redesign.eii-gallery-case .eii-btn.primary:hover,
.naples-redesign.eii-gallery-case .eii-btn.primary:focus,
.naples-redesign.eii-gallery-case .eii-btn.secondary:hover,
.naples-redesign.eii-gallery-case .eii-btn.secondary:focus,
.naples-redesign.eii-gallery-case .eii-btn.tertiary:hover,
.naples-redesign.eii-gallery-case .eii-btn.tertiary:focus {
	background: #1d4658 !important;
	border-color: #1d4658 !important;
	color: var(--naples-white) !important;
	text-decoration: none !important;
	outline: 0 !important;
}

/* Visited state — kill the legacy purple :visited */
.naples-redesign.eii-gallery-case .button:visited,
.naples-redesign.eii-gallery-case a.button:visited,
.naples-redesign.eii-gallery-case .eii-btn:visited {
	color: var(--naples-white) !important;
}

/* Links inside the case content — switch from #516ac2 (blue) to teal */
.naples-redesign.eii-gallery-case .case-category-link,
.naples-redesign.eii-gallery-case .case-surgeon-link,
.naples-redesign.eii-gallery-case .case-description a,
.naples-redesign.eii-gallery-case .case-link,
.naples-redesign.eii-gallery-case .back-to-category-link,
.naples-redesign.eii-gallery-case .view-all-link,
.naples-redesign.eii-gallery-case .prev-case-link,
.naples-redesign.eii-gallery-case .next-case-link {
	color: var(--naples-primary) !important;
	font-family: var(--naples-font-body) !important;
	transition: color 0.2s ease !important;
}

.naples-redesign.eii-gallery-case .case-category-link:hover,
.naples-redesign.eii-gallery-case .case-surgeon-link:hover,
.naples-redesign.eii-gallery-case .case-description a:hover,
.naples-redesign.eii-gallery-case .case-link:hover,
.naples-redesign.eii-gallery-case .back-to-category-link:hover,
.naples-redesign.eii-gallery-case .view-all-link:hover,
.naples-redesign.eii-gallery-case .prev-case-link:hover,
.naples-redesign.eii-gallery-case .next-case-link:hover {
	color: #1d4658 !important;
	text-decoration: underline !important;
}

/* Pagination — repaint borders + bg from #516ac2 to teal */
.naples-redesign.eii-gallery-case .eii-gallery-pagination .page-numbers {
	background: var(--naples-white) !important;
	border: 1px solid var(--naples-primary) !important;
	color: var(--naples-primary) !important;
	font-family: var(--naples-font-body) !important;
	font-weight: 500 !important;
}

.naples-redesign.eii-gallery-case .eii-gallery-pagination .page-numbers:hover,
.naples-redesign.eii-gallery-case .eii-gallery-pagination .page-numbers.current {
	background: var(--naples-primary) !important;
	border-color: var(--naples-primary) !important;
	color: var(--naples-white) !important;
}

/* "Disabled" prev/next state — keep them visible but muted */
.naples-redesign.eii-gallery-case.eii-gallery-v1 .prev-next-wrapper a:not([href]),
.naples-redesign.eii-gallery-case .prev-next-wrapper a:not([href]) {
	background: #a8b8bf !important;
	border-color: #a8b8bf !important;
	color: var(--naples-white) !important;
	pointer-events: none !important;
	cursor: default !important;
}


/* ====================================================================
   ====================================================================
   GALLERY CASE PAGE — Typography normalize to Naples Inter
   --------------------------------------------------------------------
   The legacy etna-photo-gallery shortcodes render content with the
   legacy Muli font and weight 300. This overrides all text inside
   the case content area (description, attributes, surgeon block,
   procedures, breadcrumb, etc.) to use Naples Inter at consistent
   weights and sizes. Scoped tightly to .naples-redesign.eii-gallery-case
   so we don't touch anything else on the site.
   ====================================================================
   ==================================================================== */

/* All text within the case content uses Inter */
.naples-redesign.eii-gallery-case #eii-gallery-main,
.naples-redesign.eii-gallery-case #eii-gallery-main *:not(svg):not(path):not(.button):not(button) {
	font-family: var(--naples-font-body) !important;
}

/* Paragraphs in case content — Inter, weight 400, proper size + line height */
.naples-redesign.eii-gallery-case #eii-gallery-main p,
.naples-redesign.eii-gallery-case .case-description,
.naples-redesign.eii-gallery-case .case-description p,
.naples-redesign.eii-gallery-case .case-description span {
	font-family: var(--naples-font-body) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: var(--naples-dark-slate) !important;
}

/* Headings in case content — Inter sans-serif (these are inline text titles,
   not big serif page headings) */
.naples-redesign.eii-gallery-case #eii-gallery-main h2,
.naples-redesign.eii-gallery-case #eii-gallery-main h3,
.naples-redesign.eii-gallery-case .case-description-title,
.naples-redesign.eii-gallery-case .case-attributes-title,
.naples-redesign.eii-gallery-case .eii-gallery-details-procedures-title,
.naples-redesign.eii-gallery-case .attribute-name {
	font-family: var(--naples-font-body) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: var(--naples-primary) !important;
	line-height: 1.4 !important;
	margin: 0 0 12px !important;
}

/* Surgeon block typography */
.naples-redesign.eii-gallery-case .case-surgeon,
.naples-redesign.eii-gallery-case .case-surgeon-title,
.naples-redesign.eii-gallery-case .case-surgeon-name {
	font-family: var(--naples-font-body) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	color: var(--naples-dark-slate) !important;
	line-height: 1.5 !important;
}

.naples-redesign.eii-gallery-case .case-surgeon-name {
	font-weight: 500 !important;
}

/* Attribute values (Date, Procedure, Age, etc.) */
.naples-redesign.eii-gallery-case .attribute-value,
.naples-redesign.eii-gallery-case .attribute-item {
	font-family: var(--naples-font-body) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: var(--naples-dark-slate) !important;
	line-height: 1.5 !important;
}

/* Breadcrumbs */
.naples-redesign.eii-gallery-case ul.breadcrumbs,
.naples-redesign.eii-gallery-case ul.breadcrumbs li,
.naples-redesign.eii-gallery-case ul.breadcrumbs a {
	font-family: var(--naples-font-body) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--naples-primary) !important;
}

/* Procedures list links */
.naples-redesign.eii-gallery-case .eii-gallery-details-procedures-list,
.naples-redesign.eii-gallery-case .eii-gallery-details-procedures-list li,
.naples-redesign.eii-gallery-case .eii-gallery-details-procedures-list a {
	font-family: var(--naples-font-body) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
}

/* Inline links inside paragraphs — switch from #516ac2 (blue) to teal */
.naples-redesign.eii-gallery-case #eii-gallery-main p a,
.naples-redesign.eii-gallery-case .case-description a,
.naples-redesign.eii-gallery-case .case-description-wrapper a {
	color: var(--naples-primary) !important;
	font-family: var(--naples-font-body) !important;
	font-weight: 500 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 2px !important;
}

.naples-redesign.eii-gallery-case #eii-gallery-main p a:hover,
.naples-redesign.eii-gallery-case .case-description a:hover,
.naples-redesign.eii-gallery-case .case-description-wrapper a:hover {
	color: #1d4658 !important;
	text-decoration: underline !important;
}


/* ====================================================================
   ====================================================================
   GALLERY CASE PAGE — H1 spacing fix
   --------------------------------------------------------------------
   The H1 title sits too close to the breadcrumb above it. Add 36px
   of breathing room on top.
   ====================================================================
   ==================================================================== */

.naples-redesign.eii-gallery-case #eii-gallery-main h1,
.naples-redesign.eii-gallery-case h1 {
	margin-top: 36px !important;
}


/* ====================================================================
   ====================================================================
   GALLERY — Naples button + link override (ALL inner pages)
   --------------------------------------------------------------------
   The legacy etna-photo-gallery shortcodes render multiple page types:
   case (single case), category (procedure list), search, account.
   They all share legacy .button.primary (#9c5a9b) / .button.secondary
   (#516ac2) / .button.tertiary buttons.
   
   This override applies to all body classes that include "eii-gallery"
   EXCEPT eii-gallery-landing (which already has the Naples redesign with
   .naples-gallery-* classes).
   ====================================================================
   ==================================================================== */

/* All legacy buttons inside any eii-gallery page (except the landing) → Naples teal */
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .button,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) button.button,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) a.button,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .eii-btn,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .button.primary,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .button.secondary,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .button.tertiary,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .eii-btn.primary,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .eii-btn.secondary,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .eii-btn.tertiary,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .filter-cases,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .load-more,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .consult,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .fancyconsultation {
	background: var(--naples-primary) !important;
	border: 1px solid var(--naples-primary) !important;
	color: var(--naples-white) !important;
	font-family: var(--naples-font-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.4px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	padding: 14px 28px !important;
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .button:hover,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .button:focus,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) a.button:hover,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) a.button:focus,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) button.button:hover,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) button.button:focus,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .eii-btn:hover,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .eii-btn:focus,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .filter-cases:hover,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .filter-cases:focus,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .load-more:hover,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .load-more:focus,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .consult:hover,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .consult:focus,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .fancyconsultation:hover,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .fancyconsultation:focus {
	background: #1d4658 !important;
	border-color: #1d4658 !important;
	color: var(--naples-white) !important;
	text-decoration: none !important;
	outline: 0 !important;
}

/* Visited state cleanup */
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .button:visited,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) a.button:visited,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .eii-btn:visited {
	color: var(--naples-white) !important;
}

/* Pagination on category pages */
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .eii-gallery-pagination .page-numbers {
	background: var(--naples-white) !important;
	border: 1px solid var(--naples-primary) !important;
	color: var(--naples-primary) !important;
	font-family: var(--naples-font-body) !important;
	font-weight: 500 !important;
}

body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .eii-gallery-pagination .page-numbers:hover,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .eii-gallery-pagination .page-numbers.current {
	background: var(--naples-primary) !important;
	border-color: var(--naples-primary) !important;
	color: var(--naples-white) !important;
}


/* ====================================================================
   ====================================================================
   GALLERY — Request a Consultation button — 2x size
   --------------------------------------------------------------------
   The "Request a Consultation" CTA (.consult.fancyconsultation) should
   be the visual anchor on gallery pages — bigger than the secondary
   buttons like Filter Cases or Load More. Doubles font-size and padding
   from the base override (14px/14×28) to (18px/20×40).
   ====================================================================
   ==================================================================== */

body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .consult,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .fancyconsultation,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) a.consult.fancyconsultation,
body.naples-redesign[class*="eii-gallery-"]:not(.eii-gallery-landing) .consult.fancyconsultation {
	font-size: 18px !important;
	font-weight: 600 !important;
	padding: 20px 40px !important;
	letter-spacing: 0.5px !important;
}