/* ===========================================================
   HealthBloom Homepage Builder — Phase 2 Stylesheet
   -----------------------------------------------------------
   1. Design tokens
   2. Layout helpers
   3. Buttons
   4. Hero — grid & background
   5. Hero — left content (badge, heading, copy, stats)
   6. Hero — right carousel (Swiper + slides)
   7. Floating rating card
   8. Pagination dots
   9. Responsive breakpoints
   =========================================================== */

/* -----------------------------------------------------------
   1. Design tokens
   ----------------------------------------------------------- */
:root {
	--hbhb-green:        #0C7A3B;
	--hbhb-green-dark:   #0A6730;
	--hbhb-green-accent: #0F8C3F;
	--hbhb-green-soft:   #E8F4ED;

	--hbhb-ink:          #0D1F2D;
	--hbhb-muted:        #52606D;

	--hbhb-bg:           #FFFFFF;
	--hbhb-bg-soft:      #F1F8F4;
	--hbhb-border:       #E5E7EB;

	--hbhb-radius-sm:    12px;
	--hbhb-radius-md:    16px;
	--hbhb-radius-lg:    24px;
	--hbhb-radius-pill:  999px;

	--hbhb-shadow-soft:  0 10px 30px -12px rgba(13, 31, 45, 0.10);
	--hbhb-shadow-card:  0 24px 50px -18px rgba(13, 31, 45, 0.18);
	--hbhb-shadow-float: 0 18px 40px -12px rgba(13, 31, 45, 0.20);
	--hbhb-shadow-ring:  0 0 0 6px rgba(255, 255, 255, 0.9),
	                     0 24px 50px -18px rgba(13, 31, 45, 0.28);

	--hbhb-font:         "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--hbhb-transition:   0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------------------------
   2. Layout helpers
   ----------------------------------------------------------- */
.hbhb-hero,
.hbhb-hero * {
	box-sizing: border-box;
}

.hbhb-hero {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	background:
		radial-gradient(900px 600px at 90% 30%, var(--hbhb-bg-soft) 0%, rgba(241, 248, 244, 0) 60%),
		linear-gradient(180deg, var(--hbhb-bg) 0%, #FAFCFB 100%);
	padding: 56px 0 80px;
	/* Clip horizontally only — vertical visible so prev/next slides aren't cut off. */
	overflow-x: clip;
}

/* -----------------------------------------------------------
   2a. Hero — Elementor / page-builder isolation
   -----------------------------------------------------------
   Hardens the hero stack against parent context issues that
   Elementor (and other page builders / themes) commonly inject:
     - section overflow:hidden clipping the back-layer peeks
     - widget transforms creating containing blocks that break
       Swiper's absolute-positioned slides
     - sticky-header z-index conflicts
     - section clip-path / mask chopping rounded corners
   Self-contained — does not require the parent Elementor section
   to be configured with "Overflow: Visible" (though that helps too).
   ----------------------------------------------------------- */

.hbhb-hero {
	/* Independent stacking context — z-indexes inside the hero
	   (rating card, stats card, slide layers) can't be overpowered
	   by anything outside, and can't leak outward into theme chrome. */
	isolation: isolate;

	/* 3D perspective reference for the slide stack. Back layers with
	   any translateZ will scale correctly relative to this plane. */
	perspective: 1200px;
	perspective-origin: 50% 50%;

	/* Defeat ancestor clips that would chop the back-layer peeks. */
	clip-path: none !important;
	-webkit-clip-path: none !important;
	mask: none !important;
	-webkit-mask: none !important;
}

.hbhb-hero__media,
.hbhb-carousel,
.hbhb-stack {
	/* Every step of the chain down to .hbhb-stack must allow overflow
	   so prev/next cards can peek past the active card. */
	overflow: visible !important;
	position: relative;
}

.hbhb-stack-card {
	/* GPU-composite the per-card transforms. backface-visibility
	   kills flicker during the cross-fade between positions. */
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.hbhb-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* -----------------------------------------------------------
   3. Buttons
   ----------------------------------------------------------- */
.hbhb-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--hbhb-font);
	font-weight: 600;
	font-size: 1rem;
	border-radius: var(--hbhb-radius-pill);
	text-decoration: none;
	transition: background-color var(--hbhb-transition),
	            color var(--hbhb-transition),
	            transform var(--hbhb-transition),
	            box-shadow var(--hbhb-transition);
	cursor: pointer;
	border: none;
	white-space: nowrap;
}

.hbhb-btn--primary {
	background-color: var(--hbhb-green);
	color: #FFFFFF;
	padding: 10px 12px 10px 28px;
	box-shadow: var(--hbhb-shadow-soft);
}

.hbhb-btn--primary:hover,
.hbhb-btn--primary:focus-visible {
	background-color: var(--hbhb-green-dark);
	color: #FFFFFF;
	transform: translateY(-2px);
}

.hbhb-btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.18);
	color: #FFFFFF;
	transition: transform var(--hbhb-transition);
}

.hbhb-btn--primary:hover .hbhb-btn__arrow {
	transform: translateX(3px);
}

.hbhb-btn--secondary {
	background-color: #FFFFFF;
	color: var(--hbhb-ink);
	padding: 16px 28px;
	box-shadow: var(--hbhb-shadow-soft);
}

.hbhb-btn--secondary:hover,
.hbhb-btn--secondary:focus-visible {
	box-shadow: var(--hbhb-shadow-card);
	transform: translateY(-2px);
	color: var(--hbhb-ink);
}

/* -----------------------------------------------------------
   4. Hero — grid
   ----------------------------------------------------------- */
.hbhb-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

/* -----------------------------------------------------------
   5. Hero — left content
   ----------------------------------------------------------- */
.hbhb-hero__content {
	max-width: 560px;
}

/* Badge */
.hbhb-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: var(--hbhb-green-soft);
	color: var(--hbhb-green-dark);
	padding: 8px 16px;
	border-radius: var(--hbhb-radius-pill);
	font-size: 0.875rem;
	font-weight: 600;
}

.hbhb-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--hbhb-green-accent);
}

/* Heading */
.hbhb-hero__title {
	margin: 28px 0 0;
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--hbhb-ink);
}

.hbhb-hero__title-accent {
	color: var(--hbhb-green-accent);
}

/* Description */
.hbhb-hero__description {
	margin: 24px 0 0;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--hbhb-muted);
	max-width: 540px;
}

/* CTAs */
.hbhb-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
}

/* Stats card */
.hbhb-stats-card {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	background-color: #FFFFFF;
	border-radius: var(--hbhb-radius-md);
	box-shadow: var(--hbhb-shadow-card);
	padding: 16px 22px;
	margin-top: 40px;
	transition: transform var(--hbhb-transition), box-shadow var(--hbhb-transition);
}

.hbhb-stats-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--hbhb-shadow-float);
}

.hbhb-stats-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--hbhb-green-soft);
	color: var(--hbhb-green);
}

.hbhb-stats-card__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.hbhb-stats-card__title {
	font-weight: 700;
	color: var(--hbhb-ink);
	font-size: 1rem;
}

.hbhb-stats-card__subtitle {
	font-size: 0.875rem;
	color: var(--hbhb-muted);
	margin-top: 2px;
}

/* -----------------------------------------------------------
   6. Hero — right carousel
   -----------------------------------------------------------
   Active slide  = 380×320 (compact SaaS-style rectangular stack)
   Prev / next   = scale 0.88 + opacity 0.55 + light blur, with a
                   small ~13px peek above/below active (driven by
                   the Swiper creativeEffect translateY 10%).
   Container     = overflow:visible so prev/next can poke past
                   the swiper edges without being clipped.
   ----------------------------------------------------------- */
.hbhb-hero__media {
	position: relative;
	display: flex;
	justify-content: center;
}

.hbhb-carousel {
	position: relative;
	width: 380px;
	max-width: 100%;
	/* Top padding fits the upper ~71 px peek; the bottom peek lives
	   inside the pagination margin (see .hbhb-pagination below). */
	padding: 85px 0 30px;
}

/* Stack container — relative box where cards stack via absolute positioning */
.hbhb-stack {
	position: relative;
	width: 380px;
	height: 320px;
	max-width: 100%;
	margin: 0 auto;
	isolation: isolate;
}

/* Each stack card — absolutely positioned, full container size by default.
   Transforms applied per data-pos below. */
.hbhb-stack-card {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--hbhb-radius-lg);
	overflow: hidden;
	background: linear-gradient(135deg, #E9C893, #B07F3C);
	box-shadow: 0 14px 32px -18px rgba(13, 31, 45, 0.40);
	transform-origin: 50% 50%;
	transform: translateY(0) scale(1);
	opacity: 0;
	z-index: 0;
	transition:
		transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 800ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	pointer-events: none;
}

.hbhb-stack-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* -----------------------------------------------------------
   Per-position transforms — these are the actual stack visuals
   -----------------------------------------------------------
   data-pos="0"   → active, full size, front
   data-pos="-1"  → one above, scaled, partial peek above active
   data-pos="1"   → one below, scaled, partial peek below active
   data-pos="-2"  → further above, smaller, fainter
   data-pos="2"   → further below, smaller, fainter
   data-pos="far" → hidden / behind (used for everything ≥3 steps away)

   Geometry: with a 320 px tall stack and transform-origin center,
   scale 0.85 shrinks the card to 272 px tall. translateY ±95 px
   then lifts/drops it so 71 px peeks above/below the active card.
   ----------------------------------------------------------- */

.hbhb-stack-card[data-pos="0"] {
	transform: translateY(0) scale(1);
	opacity: 1;
	z-index: 10;
	box-shadow:
		0 30px 60px -18px rgba(13, 31, 45, 0.55),
		0 14px 24px -14px rgba(13, 31, 45, 0.30);
	pointer-events: auto;
}

.hbhb-stack-card[data-pos="-1"] {
	transform: translateY(-95px) scale(0.85);
	opacity: 0.95;
	z-index: 6;
}

.hbhb-stack-card[data-pos="1"] {
	transform: translateY(95px) scale(0.85);
	opacity: 0.95;
	z-index: 7;
}

.hbhb-stack-card[data-pos="-2"] {
	transform: translateY(-130px) scale(0.72);
	opacity: 0.55;
	z-index: 3;
}

.hbhb-stack-card[data-pos="2"] {
	transform: translateY(130px) scale(0.72);
	opacity: 0.55;
	z-index: 4;
}

.hbhb-stack-card[data-pos="far"] {
	transform: translateY(0) scale(0.6);
	opacity: 0;
	z-index: 1;
}

/* -----------------------------------------------------------
   7. Floating rating card
   ----------------------------------------------------------- */
.hbhb-rating-card {
	position: absolute;
	top: 50%;
	right: -40px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: #FFFFFF;
	border-radius: var(--hbhb-radius-md);
	box-shadow: var(--hbhb-shadow-float);
	padding: 14px 20px;
	z-index: 20;
	transition: transform var(--hbhb-transition), box-shadow var(--hbhb-transition);
}

.hbhb-rating-card:hover {
	transform: translateY(-50%) translateX(-4px);
}

.hbhb-rating-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--hbhb-radius-sm);
	background-color: #FFF7E0;
}

.hbhb-rating-card__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.hbhb-rating-card__title {
	font-weight: 700;
	color: var(--hbhb-ink);
	font-size: 1rem;
}

.hbhb-rating-card__subtitle {
	font-size: 0.75rem;
	color: var(--hbhb-muted);
	margin-top: 2px;
}

/* -----------------------------------------------------------
   8. Pagination dots
   ----------------------------------------------------------- */
.hbhb-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	/* Sit below the next-slide bottom peek (~71 px) with breathing room. */
	margin-top: 90px;
	position: relative;
	z-index: 10;
}

.hbhb-pagination__bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: var(--hbhb-radius-pill);
	background-color: #D1D5DB;
	cursor: pointer;
	border: none;
	padding: 0;
	transition: width var(--hbhb-transition),
	            background-color var(--hbhb-transition);
}

.hbhb-pagination__bullet--active {
	width: 24px;
	background-color: var(--hbhb-green);
}

/* -----------------------------------------------------------
   9. Responsive breakpoints
   ----------------------------------------------------------- */
@media (max-width: 1100px) {
	.hbhb-hero__grid {
		gap: 40px;
	}
	.hbhb-carousel {
		width: 340px;
		padding: 75px 0 28px;
	}
	.hbhb-stack {
		width: 340px;
		height: 290px;
	}
	.hbhb-pagination {
		margin-top: 80px;
	}
	.hbhb-rating-card {
		right: -24px;
	}
}

@media (max-width: 900px) {
	.hbhb-hero {
		padding: 56px 0 72px;
	}
	.hbhb-hero__grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.hbhb-hero__content {
		max-width: 100%;
		order: 2;
	}
	.hbhb-hero__media {
		order: 1;
	}
	.hbhb-hero__description {
		max-width: 100%;
	}
}

@media (max-width: 560px) {
	.hbhb-hero {
		padding: 40px 0 56px;
	}
	.hbhb-container {
		padding: 0 20px;
	}
	.hbhb-carousel {
		width: 280px;
		padding: 60px 0 22px;
	}
	.hbhb-stack {
		width: 280px;
		height: 240px;
	}
	.hbhb-pagination {
		margin-top: 66px;
	}
	.hbhb-hero__ctas {
		gap: 12px;
	}
	.hbhb-btn--primary {
		padding: 8px 8px 8px 22px;
		font-size: 0.95rem;
	}
	.hbhb-btn--secondary {
		padding: 14px 22px;
		font-size: 0.95rem;
	}
	.hbhb-rating-card {
		right: -12px;
		padding: 10px 14px;
	}
	.hbhb-rating-card__icon {
		width: 34px;
		height: 34px;
	}
	.hbhb-rating-card__title {
		font-size: 0.9rem;
	}
	.hbhb-stats-card {
		margin-top: 32px;
	}
}

/* ===========================================================
   Doctors Section ("Meet Our Expert Doctors")
   -----------------------------------------------------------
   Independent from the hero — uses its own scoped class names
   so no existing styles can be affected.
   =========================================================== */

.hbhb-doctors {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	background: #FFFFFF;
	padding: 56px 0 64px;
	overflow-x: clip;
}

.hbhb-doctors .hbhb-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
}

/* ----- Section header ----- */
.hbhb-doctors__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 40px;
}

.hbhb-doctors__eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hbhb-green-accent);
	margin-bottom: 14px;
}

.hbhb-doctors__title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--hbhb-ink);
	line-height: 1.15;
}

/* ----- Carousel wrapper ----- */
.hbhb-doctors__carousel {
	position: relative;
}

.hbhb-doctors-swiper {
	overflow: hidden;
	padding-bottom: 8px;
}

.hbhb-doctors-swiper .swiper-wrapper {
	align-items: stretch;
}

.hbhb-doctor-slide {
	height: auto;
	display: flex;
}

/* =============================================================
   Doctor card — white, flippable, with top action bar
   =============================================================
   Two faces (front + back) sit inside .__inner which rotates on
   `is-flipped`. The top action bar (.hbhb-doctor-card__actions)
   is positioned outside .__inner so it stays put during the flip.
   ============================================================= */

.hbhb-doctor-card {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 540px;
	perspective: 1400px;
	background: transparent;
	border-radius: 22px;
}

/* Top action bar — pinned over both faces */
.hbhb-doctor-card__actions {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	z-index: 20;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
	pointer-events: none; /* wrapper passes through; pills opt in */
}

.hbhb-doctor-card__action {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 4px 8px;
	border-radius: 999px;
	font-family: var(--hbhb-font);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;                /* lock vertical size — prevents button vs span rendering drift */
	letter-spacing: 0.15px;
	background: transparent;
	color: #1F8A52;
	border: 1.3px solid #1F8A52;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
	box-shadow: none;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-decoration: none;
	min-height: 22px;              /* enforce identical pill height across button/span */
}

.hbhb-doctor-card__action svg {
	flex-shrink: 0;                /* lock icon to its declared 10×10 — no scaling drift */
	width: 10px;
	height: 10px;
}

.hbhb-doctor-card__action:hover,
.hbhb-doctor-card__action:focus-visible {
	background: #1F8A52;
	color: #FFFFFF;
	transform: translateY(-1px);
	outline: none;
}

/* Rating pill — non-interactive, pushes itself + flip pill to the right */
.hbhb-doctor-card__action--rating {
	cursor: default;
	margin-left: auto;
}

.hbhb-doctor-card__action--rating:hover {
	background: transparent;
	color: #1F8A52;
	transform: none;
}

.hbhb-doctor-card__action--rating svg {
	color: #F5B400; /* yellow star — stays yellow regardless */
}

.hbhb-doctor-card__action--rating:hover svg {
	color: #F5B400;
}

/* Likes — red heart icon at rest; full red fill when liked */
.hbhb-doctor-card__action--likes svg {
	color: #DC2626;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hbhb-doctor-card__action--likes:hover svg {
	color: #FFFFFF;
}

.hbhb-doctor-card__action--likes.is-liked {
	background: #DC2626;
	border-color: #DC2626;
	color: #FFFFFF;
}

.hbhb-doctor-card__action--likes.is-liked svg {
	color: #FFFFFF;
	transform: scale(1.15);
}

.hbhb-doctor-card__action--likes.is-liked:hover {
	background: #B91C1C;
	border-color: #B91C1C;
}

/* Flip icon — rotates 180° when card flips, both directions animated.
   Duration matches the card flip animation (~0.7s) so they spin in sync. */
.hbhb-doctor-card__action--flip svg {
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--flip svg {
	transform: rotate(180deg);
}

/* Back face top bar — only Flip Back is visible.
   Heart + rating pills hide; Flip Back sits left-aligned by default. */
.hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--likes,
.hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--rating {
	display: none;
}

/* Inner flip container */
.hbhb-doctor-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
	transform-style: preserve-3d;
}

.hbhb-doctor-card.is-flipped .hbhb-doctor-card__inner {
	transform: rotateY(180deg);
}

/* Each face — absolute, hidden when facing away */
.hbhb-doctor-card__face {
	position: absolute;
	inset: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: #FFFFFF;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
}

.hbhb-doctor-card__face--back {
	transform: rotateY(180deg);
}

/* When flipped, hide front from screen readers; expose back */
.hbhb-doctor-card.is-flipped .hbhb-doctor-card__face--back {
	visibility: visible;
}

/* ----- FRONT FACE -----
   Image at aspect-ratio 5/6 — less tall than the previous 3/4 so the
   overall card is more compact for the carousel. */
.hbhb-doctor-card__image {
	width: 100%;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	background: linear-gradient(135deg, #F5F5F5 0%, #E5E7EB 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hbhb-doctor-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

.hbhb-doctor-card__image-fallback {
	color: rgba(20, 61, 27, 0.30);
}

.hbhb-doctor-card__body {
	padding: 12px 14px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
}

.hbhb-doctor-card__specialty {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 1.3px;
	line-height: 1.4;
	text-transform: uppercase;
	color: #1F8A52;
	margin: 0 0 5px;
}

.hbhb-doctor-card__name {
	font-family: var(--hbhb-font);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.2px;
	color: #143D1B;
	margin: 0 0 4px;
	overflow-wrap: break-word;
	word-break: break-word;
	/* Reserve exactly 2 lines of vertical space — keeps the
	   button at the same Y position across all cards regardless
	   of whether the name itself is 1 or 2 lines. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(15px * 1.2 * 2); /* font-size × line-height × 2 lines */
}

.hbhb-doctor-card__experience {
	font-size: 10.5px;
	font-weight: 500;
	color: rgba(20, 61, 27, 0.60);
	margin-bottom: 12px;
}

/* Book appointment — full-width green pill. Sits directly under
   the experience text with no auto-margin gap. Because the name
   block reserves 2 lines of space, the button lands at the same Y
   position across all cards in the row. */
.hbhb-doctor-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	background: #1F8A52;
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--hbhb-font);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.2px;
	padding: 8px 14px;
	border-radius: 999px;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 4px 12px -4px rgba(31, 138, 82, 0.40);
}

.hbhb-doctor-card__btn:hover,
.hbhb-doctor-card__btn:focus-visible {
	background: #176A3F;
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -4px rgba(31, 138, 82, 0.50);
}

.hbhb-doctor-card__btn-arrow {
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s ease;
}

.hbhb-doctor-card__btn:hover .hbhb-doctor-card__btn-arrow,
.hbhb-doctor-card__btn:focus-visible .hbhb-doctor-card__btn-arrow {
	transform: translateX(3px);
}

/* ----- BACK FACE ----- */
.hbhb-doctor-card__back-content {
	padding: 42px 14px 14px; /* top padding clears the action bar */
	text-align: center;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
}

.hbhb-doctor-card__heart-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 6px;
}

.hbhb-doctor-card__about-heading,
.hbhb-doctor-card__rate-heading {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #1F8A52;
	margin: 0 0 8px;
}

/* "Submit Your Rating" — short horizontal lines flank the text */
.hbhb-doctor-card__rate-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.hbhb-doctor-card__rate-heading::before,
.hbhb-doctor-card__rate-heading::after {
	content: "";
	flex: 0 0 16px;
	height: 1px;
	background: #1F8A52;
	display: block;
}

.hbhb-doctor-card__about-text {
	font-size: 10.5px;
	line-height: 1.55;
	color: rgba(20, 61, 27, 0.82);
	text-align: justify;
	margin-bottom: 10px;
	max-height: 80px;
	overflow: hidden;
	mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.hbhb-doctor-card__about-text p {
	margin: 0 0 5px;
}

.hbhb-doctor-card__about-text p:last-child {
	margin-bottom: 0;
}

/* Read More — compact pill under description, links to single-product page */
.hbhb-doctor-card__read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	align-self: center;
	background: #1F8A52;
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--hbhb-font);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.2px;
	padding: 6px 13px;
	border-radius: 999px;
	margin-bottom: 12px;
	transition: background 0.25s ease, transform 0.25s ease;
	box-shadow: 0 3px 10px -3px rgba(31, 138, 82, 0.40);
}

.hbhb-doctor-card__read-more:hover {
	background: #176A3F;
	color: #FFFFFF;
	transform: translateY(-1px);
}

.hbhb-doctor-card__rate-divider {
	height: 1px;
	background: rgba(20, 61, 27, 0.10);
	margin: 0 0 12px;
}

/* Stars — small for carousel widths */
.hbhb-doctor-card__stars {
	display: flex;
	justify-content: center;
	gap: 3px;
	margin-bottom: 10px;
}

.hbhb-doctor-card__star {
	background: none;
	border: none;
	padding: 2px;
	cursor: pointer;
	color: #1F8A52;
	transition: transform 0.15s ease;
	line-height: 0;
}

.hbhb-doctor-card__star:hover,
.hbhb-doctor-card__star:focus-visible {
	transform: scale(1.18);
	outline: none;
}

.hbhb-doctor-card__star.is-active svg path,
.hbhb-doctor-card__star.is-hover svg path {
	fill: #F5B400;
	stroke: #F5B400;
}

/* Submit Review — full-width green pill matching Book Appointment */
.hbhb-doctor-card__submit-review {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: #1F8A52;
	color: #FFFFFF;
	border: none;
	font-family: var(--hbhb-font);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.2px;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
	margin-top: auto;
	box-shadow: 0 4px 12px -4px rgba(31, 138, 82, 0.40);
}

.hbhb-doctor-card__submit-review:hover:not(:disabled),
.hbhb-doctor-card__submit-review:focus-visible:not(:disabled) {
	background: #176A3F;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -4px rgba(31, 138, 82, 0.50);
}

.hbhb-doctor-card__submit-review:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.hbhb-doctor-card__rate-message {
	font-size: 10.5px;
	font-weight: 600;
	color: #1F8A52;
	margin-top: 6px;
	min-height: 14px;
}

.hbhb-doctor-card__rate-message.is-error {
	color: #DC2626;
}

/* ----- Defensive: hide theme / plugin injections -----
   Common product-card decorators that WooCommerce themes and plugins
   inject around products (wishlist hearts, rating stars, "quick view"
   buttons, "added to cart" badges, price, on-sale tags, theme dashed
   dividers). The plugin's template never renders these, but if a
   theme's product-loop hook fires inside .hbhb-doctor-slide, this
   keeps the card visually clean. */
.hbhb-doctor-slide .yith-wcwl-add-to-wishlist,
.hbhb-doctor-slide .yith-wcwl-wishlistaddedbrowse,
.hbhb-doctor-slide .star-rating,
.hbhb-doctor-slide .woocommerce-product-rating,
.hbhb-doctor-slide .added_to_cart,
.hbhb-doctor-slide .quick-view,
.hbhb-doctor-slide .quick-view-button,
.hbhb-doctor-slide .product-compare,
.hbhb-doctor-slide .onsale,
.hbhb-doctor-slide .price,
.hbhb-doctor-slide .product_meta,
.hbhb-doctor-slide .button.add_to_cart_button,
.hbhb-doctor-slide .wp-block-woocommerce-product-button,
.hbhb-doctor-card .yith-wcwl-add-to-wishlist,
.hbhb-doctor-card .star-rating,
.hbhb-doctor-card .added_to_cart,
.hbhb-doctor-card .quick-view,
.hbhb-doctor-card .onsale,
.hbhb-doctor-card .price {
	display: none !important;
}

/* Some themes drop a dashed/dotted divider between product loop items
   via ::after pseudo-elements on the slide. Suppress that too. */
.hbhb-doctor-slide::before,
.hbhb-doctor-slide::after {
	display: none !important;
	content: none !important;
}

/* ----- Navigation arrows ----- */
.hbhb-doctors__nav {
	position: absolute;
	top: calc(50% - 18px); /* account for card height visually */
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1px solid var(--hbhb-border);
	color: var(--hbhb-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	box-shadow: 0 10px 30px -12px rgba(13, 31, 45, 0.18);
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease,
		opacity 0.25s ease;
	padding: 0;
}

.hbhb-doctors__nav:hover,
.hbhb-doctors__nav:focus-visible {
	background: #1C4922;
	color: #FFFFFF;
	border-color: #1C4922;
	transform: translateY(-50%) scale(1.05);
	box-shadow: 0 14px 34px -10px rgba(28, 73, 34, 0.35);
}

.hbhb-doctors__nav--prev { left: -22px; }
.hbhb-doctors__nav--next { right: -22px; }

.hbhb-doctors__nav.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ----- Empty state ----- */
.hbhb-doctors__empty {
	text-align: center;
	padding: 56px 24px;
	border: 2px dashed var(--hbhb-border);
	border-radius: 18px;
	background: #FAFCFB;
	max-width: 560px;
	margin: 0 auto;
}

.hbhb-doctors__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--hbhb-green-soft);
	color: var(--hbhb-green);
	margin-bottom: 14px;
}

.hbhb-doctors__empty-text {
	margin: 0;
	color: var(--hbhb-muted);
	font-size: 1rem;
	line-height: 1.5;
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
	.hbhb-doctors {
		padding: 72px 0 88px;
	}
	.hbhb-doctors__nav--prev { left: -12px; }
	.hbhb-doctors__nav--next { right: -12px; }
}

@media (max-width: 900px) {
	.hbhb-doctors {
		padding: 64px 0 80px;
	}
	.hbhb-doctors__head {
		margin-bottom: 40px;
	}
	.hbhb-doctors__nav--prev { left: 4px; }
	.hbhb-doctors__nav--next { right: 4px; }
}

@media (max-width: 560px) {
	.hbhb-doctors {
		padding: 48px 0 64px;
	}
	.hbhb-doctors__nav {
		width: 40px;
		height: 40px;
		top: auto;
		bottom: -56px;
		transform: none;
	}
	.hbhb-doctors__nav--prev { left: 30%; }
	.hbhb-doctors__nav--next { right: 30%; }
	.hbhb-doctors__nav:hover {
		transform: scale(1.05);
	}
}

/* ===========================================================
   Services Section ("Comprehensive Care")
/* ===========================================================
   Services Section — sticky-scroll, migahealth-style
   -----------------------------------------------------------
   Flat canvas: no card boxes around content or images. Left
   column is a vertical list scrolling with the page; right
   column has ONE sticky image that cross-fades between service
   images as the user scrolls. On mobile the sticky right
   column is hidden and each service item carries its own
   inline image above the text.

   Driven by assets/js/services.js (IntersectionObserver — no
   GSAP, no scroll hijacking).
   =========================================================== */

.hbhb-services {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	padding: 56px 0 40px;
	position: relative;
	background: #F7F7F4; /* default — admin can override via bg_color setting */
}

.hbhb-services .hbhb-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ----- Section header (centered, matches doctors/reviews) ----- */
.hbhb-services__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 64px;
}

.hbhb-services__eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #1F8A52;
	margin-bottom: 14px;
}

.hbhb-services__title {
	font-family: var(--hbhb-font);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #0F1F1A;
	margin: 0;
}

/* ----- Two-column sticky layout ----- */
.hbhb-services__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

/* ----- LEFT: stationary stack of services (pin-and-scrub)
   Desktop: items are absolutely positioned on top of each other.
   Only the [data-active] item is visible; CSS cross-fades the
   transition. GSAP ScrollTrigger drives which item is active.
   Mobile: see media query below — items flow naturally. */
.hbhb-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	min-height: 540px;
}

.hbhb-services__item {
	position: absolute;
	inset: 0;
	padding: 0;
	margin: 0;
	border: none;
	opacity: 0;
	transform: translateY(0);
	filter: blur(0);
	transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	will-change: opacity, transform, filter;
}

.hbhb-services__item[data-active="true"] {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	filter: blur(0);
}

/* Next service shows as a blurred peek at the bottom — depth cue
   so users can see what's coming up. */
.hbhb-services__item[data-preview="next"] {
	opacity: 0.22;
	transform: translateY(70px) scale(0.96);
	filter: blur(6px);
}

.hbhb-services__item-number {
	display: block;
	font-family: var(--hbhb-font);
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	color: #1F8A52;
	margin-bottom: 16px;
	letter-spacing: -0.02em;
}

.hbhb-services__item-title {
	font-family: var(--hbhb-font);
	font-size: clamp(1.5rem, 2.5vw, 2.125rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: #0F1F1A;
	margin: 0 0 16px;
}

.hbhb-services__item-description {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(15, 31, 26, 0.70);
	margin: 0 0 24px;
	max-width: 480px;
}

.hbhb-services__item-btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	padding: 11px 20px;
	background: #1F8A52;
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--hbhb-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2px;
	border-radius: 999px;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 4px 14px -4px rgba(31, 138, 82, 0.40);
}

.hbhb-services__item-btn:hover,
.hbhb-services__item-btn:focus-visible {
	background: #176A3F;
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(31, 138, 82, 0.50);
	outline: none;
}

.hbhb-services__item-btn-arrow {
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s ease;
}

.hbhb-services__item-btn:hover .hbhb-services__item-btn-arrow,
.hbhb-services__item-btn:focus-visible .hbhb-services__item-btn-arrow {
	transform: translateX(3px);
}

/* Inline image — hidden on desktop, shown on mobile */
.hbhb-services__item-image {
	display: none;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 24px;
	background: rgba(15, 31, 26, 0.04);
}

.hbhb-services__item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ----- RIGHT: stationary media column ----- */
.hbhb-services__media {
	position: relative;
}

.hbhb-services__media-sticky {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 480px;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(15, 31, 26, 0.04);
}

.hbhb-services__media-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.hbhb-services__media-slide[data-active="true"] {
	opacity: 1;
	z-index: 2;
}

.hbhb-services__media-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hbhb-services__media-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(15, 31, 26, 0.25);
}

/* ----- Responsive: tablet (single column, no pin) ----- */
@media (max-width: 900px) {

	.hbhb-services {
		padding: 56px 0;
	}

	.hbhb-services__head {
		margin-bottom: 40px;
	}

	.hbhb-services__layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Hide the sticky right column entirely on mobile */
	.hbhb-services__media {
		display: none;
	}

	/* Show the inline image inside each service item */
	.hbhb-services__item-image {
		display: block;
	}

	/* Items flow naturally on mobile — no overlap, no fade */
	.hbhb-services__list {
		position: static;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.hbhb-services__item {
		position: static;
		inset: auto;
		display: block;
		opacity: 1;
		pointer-events: auto;
		padding: 40px 0;
		transition: none;
	}

	.hbhb-services__item + .hbhb-services__item {
		border-top: 1px solid rgba(15, 31, 26, 0.08);
	}

	.hbhb-services__item:first-child {
		padding-top: 0;
	}

	.hbhb-services__item-number {
		font-size: 36px;
		margin-bottom: 12px;
	}

	.hbhb-services__item-title {
		font-size: 1.5rem;
	}

	.hbhb-services__item-description {
		font-size: 15px;
		max-width: none;
	}
}

@media (max-width: 600px) {
	.hbhb-services .hbhb-container {
		padding: 0 20px;
	}

	.hbhb-services__item-image {
		aspect-ratio: 3 / 2;
		border-radius: 14px;
	}
}

/* ----- Reduced motion: instant cross-fade ----- */
@media (prefers-reduced-motion: reduce) {
	.hbhb-services__item,
	.hbhb-services__media-slide {
		transition: none;
	}
}


/* ===========================================================
   Reviews / Testimonials Section
   -----------------------------------------------------------
   Header (eyebrow / heading / description) is rendered from
   admin settings; the body is whatever the Trustindex shortcode
   outputs. We only style the wrapper + header, never the
   review cards themselves — those come from Trustindex.
   =========================================================== */

.hbhb-reviews {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	background: linear-gradient(180deg, #F7FBF8 0%, #FFFFFF 100%);
	padding: 80px 0;
	position: relative;
}

.hbhb-reviews .hbhb-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

/* ---------- Header ---------- */
.hbhb-reviews__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 56px;
}

.hbhb-reviews__eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hbhb-green-accent);
	margin-bottom: 14px;
}

.hbhb-reviews__title {
	margin: 0 0 18px;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--hbhb-ink);
}

.hbhb-reviews__description {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--hbhb-muted);
}

/* ---------- Shortcode body ----------
   We don't restyle Trustindex's internal widgets — the plugin
   ships its own theme. We only constrain its outer wrapper so
   it sits cleanly inside the section and never overflows. */
.hbhb-reviews__body {
	width: 100%;
	max-width: 100%;
}

.hbhb-reviews__body > * {
	max-width: 100%;
}

.hbhb-reviews__body img {
	max-width: 100%;
	height: auto;
}

/* ---------- Admin-only "shortcode missing" notice ---------- */
.hbhb-reviews__notice {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 28px;
	background: #FEF3C7;
	border: 1px solid #FCD34D;
	border-radius: 16px;
	color: #92400E;
	font-size: 0.95rem;
	line-height: 1.55;
	text-align: center;
}

.hbhb-reviews__notice strong {
	display: inline;
	margin-right: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.hbhb-reviews { padding: 56px 0; }
}

/* ===========================================================
   DOCTOR CARD — defensive overrides (last layer)
   -----------------------------------------------------------
   These rules exist to win specificity battles with Elementor,
   Astra, Hello Elementor, OceanWP, GeneratePress, and other
   themes that aggressively style buttons, SVGs, and flex
   children at high specificity. Compound class selectors push
   our specificity to (0,2,0) and !important locks the values.
   Edit with care — order matters within each rule.
   =========================================================== */

/* ----- Card container — clip everything to its border-radius */
.hbhb-doctors .hbhb-doctor-card {
	overflow: hidden !important;
	box-sizing: border-box !important;
	contain: layout style !important;
}

.hbhb-doctors .hbhb-doctor-card *,
.hbhb-doctors .hbhb-doctor-card *::before,
.hbhb-doctors .hbhb-doctor-card *::after {
	box-sizing: border-box !important;
}

/* ----- Faces are already clipped, but re-assert against themes */
.hbhb-doctors .hbhb-doctor-card__face--front,
.hbhb-doctors .hbhb-doctor-card__face--back {
	overflow: hidden !important;
	max-width: 100% !important;
}

/* ----- Action pills — filled green to match Submit Review button.
   Reverts the outlined treatment that themes were partly hiding
   anyway, and gives all three pills (heart / rating / flip)
   visual consistency with the Submit Review CTA. */
.hbhb-doctors .hbhb-doctor-card__action {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	padding: 5px 10px !important;
	min-height: 24px !important;
	background: #1F8A52 !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: var(--hbhb-font) !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.15px !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	box-shadow: 0 3px 8px -3px rgba(31, 138, 82, 0.45) !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	text-decoration: none !important;
	width: auto !important;
	max-width: none !important;
}

.hbhb-doctors .hbhb-doctor-card__action:hover,
.hbhb-doctors .hbhb-doctor-card__action:focus-visible {
	background: #176A3F !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

/* Pill icons keep their semantic colour: heart red, star yellow,
   flip white. Always 10×10, never stretched. */
.hbhb-doctors .hbhb-doctor-card__action svg {
	width: 10px !important;
	height: 10px !important;
	flex-shrink: 0 !important;
	display: block !important;
}

.hbhb-doctors .hbhb-doctor-card__action--likes svg {
	color: #DC2626 !important;
}

.hbhb-doctors .hbhb-doctor-card__action--rating {
	cursor: default !important;
	margin-left: auto !important;
}

.hbhb-doctors .hbhb-doctor-card__action--rating:hover {
	background: #1F8A52 !important;
	transform: none !important;
}

.hbhb-doctors .hbhb-doctor-card__action--rating svg {
	color: #F5B400 !important; /* yellow star, stays yellow on hover too */
}

.hbhb-doctors .hbhb-doctor-card__action--flip svg {
	color: #FFFFFF !important;
}

/* Liked state — red pill */
.hbhb-doctors .hbhb-doctor-card__action--likes.is-liked {
	background: #DC2626 !important;
	border-color: #DC2626 !important;
}

.hbhb-doctors .hbhb-doctor-card__action--likes.is-liked svg {
	color: #FFFFFF !important;
}

/* ----- Flip icon rotation — sync with card flip (0.7s) */
.hbhb-doctors .hbhb-doctor-card__action--flip svg {
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
	transform-origin: center center !important;
}

.hbhb-doctors .hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--flip svg {
	transform: rotate(180deg) !important;
}

/* Back face: only flip pill visible (heart and rating hide) */
.hbhb-doctors .hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--likes,
.hbhb-doctors .hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--rating {
	display: none !important;
}

/* ----- Star rating buttons — themes love to inflate <button> elements.
   Lock their box dimensions absolutely and force the SVG inside. */
.hbhb-doctors .hbhb-doctor-card__stars {
	display: flex !important;
	flex-direction: row !important;
	justify-content: center !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 4px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.hbhb-doctors .hbhb-doctor-card__star {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 24px !important;
	max-height: 24px !important;
	padding: 2px !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #1F8A52 !important;
	cursor: pointer !important;
	line-height: 0 !important;
	flex: 0 0 24px !important; /* don't flex-grow / shrink */
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: transform 0.15s ease !important;
	transform: none;
}

.hbhb-doctors .hbhb-doctor-card__star:hover,
.hbhb-doctors .hbhb-doctor-card__star:focus-visible {
	transform: scale(1.15) !important;
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

.hbhb-doctors .hbhb-doctor-card__star svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
	flex-shrink: 0 !important;
}

.hbhb-doctors .hbhb-doctor-card__star.is-active svg path,
.hbhb-doctors .hbhb-doctor-card__star.is-hover svg path {
	fill: #F5B400 !important;
	stroke: #F5B400 !important;
}

/* ----- Back face content — contain everything to card width */
.hbhb-doctors .hbhb-doctor-card__back-content {
	width: 100% !important;
	max-width: 100% !important;
	padding: 42px 14px 14px !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

.hbhb-doctors .hbhb-doctor-card__about-heading,
.hbhb-doctors .hbhb-doctor-card__rate-heading {
	max-width: 100% !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}

.hbhb-doctors .hbhb-doctor-card__about-text {
	max-width: 100% !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	hyphens: auto !important;
}

/* ----- Submit Review — full-width green pill, same shape language
   as the action pills so the whole back face reads as a coherent set */
.hbhb-doctors .hbhb-doctor-card__submit-review {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 9px 16px !important;
	margin-top: auto !important;
	background: #1F8A52 !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: var(--hbhb-font) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	box-shadow: 0 4px 12px -4px rgba(31, 138, 82, 0.40) !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	box-sizing: border-box !important;
	transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease !important;
}

.hbhb-doctors .hbhb-doctor-card__submit-review:hover:not(:disabled),
.hbhb-doctors .hbhb-doctor-card__submit-review:focus-visible:not(:disabled) {
	background: #176A3F !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

.hbhb-doctors .hbhb-doctor-card__submit-review:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
}

/* ----- Read More on back face — same shape language */
.hbhb-doctors .hbhb-doctor-card__read-more {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	align-self: center !important;
	padding: 6px 13px !important;
	background: #1F8A52 !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: var(--hbhb-font) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-shadow: 0 3px 10px -3px rgba(31, 138, 82, 0.40) !important;
	box-sizing: border-box !important;
}

.hbhb-doctors .hbhb-doctor-card__read-more:hover,
.hbhb-doctors .hbhb-doctor-card__read-more:focus-visible {
	background: #176A3F !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

/* ----- Mobile compactness ----- */
@media (max-width: 600px) {
	.hbhb-doctors .hbhb-doctor-card__action {
		padding: 4px 8px !important;
		font-size: 10px !important;
		min-height: 22px !important;
	}
	.hbhb-doctors .hbhb-doctor-card__star {
		width: 22px !important;
		height: 22px !important;
		flex: 0 0 22px !important;
	}
	.hbhb-doctors .hbhb-doctor-card__star svg {
		width: 16px !important;
		height: 16px !important;
	}
	.hbhb-doctors .hbhb-doctor-card__back-content {
		padding: 38px 12px 12px !important;
	}
}

/* ===========================================================
   Gallery Section
   -----------------------------------------------------------
   6-image responsive grid. 3 cols desktop, 2 cols tablet,
   1 col mobile. Equal-aspect tiles with hover lift.
   =========================================================== */

.hbhb-gallery {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	padding: 80px 0;
	position: relative;
	background: #FFFFFF;
}

.hbhb-gallery .hbhb-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.hbhb-gallery__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 56px;
}

.hbhb-gallery__eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #1F8A52;
	margin-bottom: 14px;
}

.hbhb-gallery__title {
	font-family: var(--hbhb-font);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #0F1F1A;
	margin: 0 0 14px;
}

.hbhb-gallery__description {
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(15, 31, 26, 0.65);
	margin: 0;
}

.hbhb-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.hbhb-gallery__item {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(15, 31, 26, 0.04);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease;
	will-change: transform;
}

.hbhb-gallery__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px -12px rgba(15, 31, 26, 0.18);
}

.hbhb-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hbhb-gallery__item:hover img {
	transform: scale(1.04);
}

@media (max-width: 900px) {
	.hbhb-gallery {
		padding: 56px 0;
	}
	.hbhb-gallery__head {
		margin-bottom: 36px;
	}
	.hbhb-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.hbhb-gallery__item {
		border-radius: 14px;
	}
}

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

/* ===========================================================
   Blog Section
   -----------------------------------------------------------
   Latest posts card grid. 3 cols desktop, 2 tablet, 1 mobile.
   Card = featured image + title + excerpt + Read More CTA.
   =========================================================== */

.hbhb-blog {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	padding: 80px 0;
	position: relative;
	background: #F7FBF8;
}

.hbhb-blog .hbhb-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.hbhb-blog__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 56px;
}

.hbhb-blog__eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #1F8A52;
	margin-bottom: 14px;
}

.hbhb-blog__title {
	font-family: var(--hbhb-font);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #0F1F1A;
	margin: 0 0 14px;
}

.hbhb-blog__description {
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(15, 31, 26, 0.65);
	margin: 0;
}

.hbhb-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.hbhb-blog__card {
	background: #FFFFFF;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 16px -6px rgba(15, 31, 26, 0.08);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease;
}

.hbhb-blog__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 36px -12px rgba(15, 31, 26, 0.18);
}

.hbhb-blog__card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: rgba(15, 31, 26, 0.05);
}

.hbhb-blog__card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hbhb-blog__card:hover .hbhb-blog__card-image {
	transform: scale(1.04);
}

.hbhb-blog__card-image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(15, 31, 26, 0.20);
}

.hbhb-blog__card-body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.hbhb-blog__card-title {
	font-family: var(--hbhb-font);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	color: #0F1F1A;
}

.hbhb-blog__card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hbhb-blog__card-title a:hover {
	color: #1F8A52;
}

.hbhb-blog__card-excerpt {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(15, 31, 26, 0.65);
	margin: 0 0 18px;
	flex-grow: 1;
}

.hbhb-blog__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #1F8A52;
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	letter-spacing: 0.2px;
	align-self: flex-start;
	transition: gap 0.25s ease, color 0.2s ease;
}

.hbhb-blog__card-cta:hover {
	color: #176A3F;
	gap: 10px;
}

.hbhb-blog__card-cta-arrow {
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s ease;
}

.hbhb-blog__card-cta:hover .hbhb-blog__card-cta-arrow {
	transform: translateX(2px);
}

@media (max-width: 900px) {
	.hbhb-blog {
		padding: 56px 0;
	}
	.hbhb-blog__head {
		margin-bottom: 36px;
	}
	.hbhb-blog__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.hbhb-blog__grid {
		grid-template-columns: 1fr;
	}
	.hbhb-blog__card-body {
		padding: 18px 20px 22px;
	}
}

/* ===========================================================
   Hero — stats bar (single rectangle, 4 inline stats)
   -----------------------------------------------------------
   Replaces the old "10+ Doctors / Specialists on call" chip.
   Sits below the Book A Visit / Explore Services buttons.
   =========================================================== */
.hbhb-hero__stats-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
	gap: 0;
	margin-top: 28px;
	max-width: 580px;
	background: #FFFFFF;
	border-radius: 18px;
	padding: 18px 8px;
	box-shadow: 0 10px 30px -14px rgba(15, 31, 26, 0.18);
}

.hbhb-hero__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	padding: 4px 10px;
	position: relative;
}

/* Thin vertical separators between stats (within the single rectangle) */
.hbhb-hero__stat + .hbhb-hero__stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18%;
	bottom: 18%;
	width: 1px;
	background: rgba(15, 31, 26, 0.10);
}

.hbhb-hero__stat-value {
	font-family: var(--hbhb-font);
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	font-weight: 800;
	color: #0F1F1A;
	line-height: 1.1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.hbhb-hero__stat-label {
	font-family: var(--hbhb-font);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(15, 31, 26, 0.60);
	line-height: 1.25;
}

@media (max-width: 720px) {
	.hbhb-hero__stats-bar {
		grid-template-columns: repeat(2, 1fr);
		padding: 16px 6px;
	}
	/* Only show separator between cols, not across rows */
	.hbhb-hero__stat + .hbhb-hero__stat::before { display: none; }
	.hbhb-hero__stat:nth-child(2)::before,
	.hbhb-hero__stat:nth-child(4)::before {
		content: "";
		position: absolute;
		left: 0;
		top: 18%;
		bottom: 18%;
		width: 1px;
		background: rgba(15, 31, 26, 0.10);
		display: block;
	}
	.hbhb-hero__stat:nth-child(3),
	.hbhb-hero__stat:nth-child(4) {
		padding-top: 12px;
	}
	.hbhb-hero__stat:nth-child(1),
	.hbhb-hero__stat:nth-child(2) {
		padding-bottom: 12px;
		border-bottom: 1px solid rgba(15, 31, 26, 0.10);
	}
}

/* ===========================================================
   Hero — patients card (below 3D card stack)
   -----------------------------------------------------------
   White pill matching the .hbhb-rating-card treatment.
   Avatars row on the left, count caption on the right.
   Empty avatar slots show a colored gradient + silhouette so
   the row still reads as patient avatars before photos exist.
   =========================================================== */
.hbhb-hero__patients {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: #FFFFFF;
	border-radius: var(--hbhb-radius-md);
	box-shadow: var(--hbhb-shadow-float);
	padding: 10px 18px 10px 14px;
	margin: 24px auto 0;
}

/* Center the pill horizontally beneath the carousel */
.hbhb-carousel .hbhb-hero__patients {
	display: flex;
	width: max-content;
	max-width: 100%;
}

.hbhb-hero__patients-avatars {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.hbhb-hero__patients-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	overflow: hidden;
	border: 2px solid #FFFFFF;
	box-shadow: 0 2px 4px -2px rgba(15, 31, 26, 0.18);
	background: rgba(15, 31, 26, 0.06);
	flex-shrink: 0;
	position: relative;
}

/* Distinct gradient backgrounds per empty slot — colorful by default */
.hbhb-hero__patients-avatar--slot-1 { background: linear-gradient(135deg, #F5C97D, #E89B5F); }
.hbhb-hero__patients-avatar--slot-2 { background: linear-gradient(135deg, #F08C5D, #C84A28); }
.hbhb-hero__patients-avatar--slot-3 { background: linear-gradient(135deg, #8B6F47, #5C4520); }
.hbhb-hero__patients-avatar--slot-4 { background: linear-gradient(135deg, #6BA77B, #2D7548); }
.hbhb-hero__patients-avatar--slot-5 { background: linear-gradient(135deg, #E8839C, #C84474); }

.hbhb-hero__patients-avatar + .hbhb-hero__patients-avatar {
	margin-left: -10px; /* overlap so they form a stack */
}

.hbhb-hero__patients-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hbhb-hero__patients-avatar-fallback {
	width: 100%;
	height: 100%;
	display: block;
}

.hbhb-hero__patients-text {
	font-family: var(--hbhb-font);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hbhb-ink);
	letter-spacing: 0.01em;
	white-space: nowrap;
	line-height: 1.2;
}

@media (max-width: 900px) {
	.hbhb-hero__patients {
		padding: 8px 14px 8px 10px;
	}
	.hbhb-hero__patients-avatar {
		width: 28px;
		height: 28px;
		border-width: 1.5px;
	}
	.hbhb-hero__patients-avatar + .hbhb-hero__patients-avatar {
		margin-left: -8px;
	}
	.hbhb-hero__patients-text {
		font-size: 0.8125rem;
		white-space: normal;
	}
}

/* ===========================================================
   Clinical Approach Section
   -----------------------------------------------------------
   Two columns: text on left, orbital diagram on right.
   Green CTA banner below. All illustrations are inline SVG.
   =========================================================== */

.hbhb-approach {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	padding: 80px 0;
	position: relative;
}

.hbhb-approach .hbhb-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.hbhb-approach__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
	margin-bottom: 56px;
}

/* ----- LEFT: text content ----- */
.hbhb-approach__eyebrow-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 22px;
}

.hbhb-approach__eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #1F8A52;
}

.hbhb-approach__eyebrow-rule {
	display: block;
	width: 48px;
	height: 2px;
	background: #1F8A52;
	border-radius: 2px;
}

.hbhb-approach__title {
	font-family: var(--hbhb-font);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #0F1F1A;
	margin: 0 0 28px;
}

.hbhb-approach__title em,
.hbhb-approach__title i {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 500;
	color: #1F8A52;
}

.hbhb-approach__para {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(15, 31, 26, 0.78);
}

.hbhb-approach__para p {
	margin: 0;
	flex: 1;
}

.hbhb-approach__para-icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.hbhb-approach__para-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(31, 138, 82, 0.10);
	margin-top: 2px;
}

.hbhb-approach__divider {
	height: 1px;
	background: rgba(15, 31, 26, 0.12);
	margin: 26px 0 24px;
}

/* ----- RIGHT: orbital diagram ----- */
.hbhb-approach__diagram {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 1;
	margin: 0 auto;
}

.hbhb-approach__diagram-orbit {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hbhb-approach__diagram-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 56%;
	max-width: 280px;
}

.hbhb-approach__diagram-center svg {
	width: 100%;
	height: auto;
	display: block;
}

.hbhb-approach__orbit {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 2;
}

.hbhb-approach__orbit--tl { top: 8%;    left: 0;   }
.hbhb-approach__orbit--tr { top: 8%;    right: 0;  }
.hbhb-approach__orbit--bl { bottom: 8%; left: 0;   }
.hbhb-approach__orbit--br { bottom: 8%; right: 0;  }

.hbhb-approach__orbit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: 0 6px 16px -6px rgba(15, 31, 26, 0.12);
	border: 1px solid rgba(31, 138, 82, 0.10);
}

.hbhb-approach__orbit-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #0F1F1A;
	text-align: center;
	max-width: 110px;
	line-height: 1.25;
}

/* ----- CTA banner ----- */
.hbhb-approach__cta {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding: 36px 56px;
	display: flex;
	align-items: center;
	gap: 28px;
	color: #FFFFFF;
	box-shadow: 0 12px 36px -16px rgba(15, 31, 26, 0.30);
}

.hbhb-approach__cta-leaves {
	position: absolute;
	bottom: 0;
	width: 180px;
	height: auto;
	pointer-events: none;
}

.hbhb-approach__cta-leaves--left {
	left: 0;
}

.hbhb-approach__cta-leaves--right {
	right: 0;
}

.hbhb-approach__cta-shield {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	position: relative;
	z-index: 2;
}

.hbhb-approach__cta-body {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}

.hbhb-approach__cta-heading {
	margin: 0;
	font-family: var(--hbhb-font);
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	color: #FFFFFF;
	flex: 1;
	min-width: 220px;
}

.hbhb-approach__cta-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: #FFFFFF;
	color: #1F8A52;
	text-decoration: none;
	font-family: var(--hbhb-font);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.2px;
	border-radius: 999px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.20);
}

.hbhb-approach__cta-button:hover,
.hbhb-approach__cta-button:focus-visible {
	color: #176A3F;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25);
	outline: none;
}

.hbhb-approach__cta-button svg {
	transition: transform 0.25s ease;
}

.hbhb-approach__cta-button:hover svg {
	transform: translateX(3px);
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
	.hbhb-approach {
		padding: 64px 0;
	}
	.hbhb-approach__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-bottom: 40px;
	}
	.hbhb-approach__diagram {
		max-width: 440px;
	}
	.hbhb-approach__orbit-icon {
		width: 60px;
		height: 60px;
	}
	.hbhb-approach__orbit-icon svg {
		width: 28px;
		height: 28px;
	}
	.hbhb-approach__cta {
		padding: 28px 32px;
	}
}

@media (max-width: 600px) {
	.hbhb-approach__diagram {
		max-width: 360px;
	}
	.hbhb-approach__orbit-icon {
		width: 52px;
		height: 52px;
	}
	.hbhb-approach__orbit-icon svg {
		width: 24px;
		height: 24px;
	}
	.hbhb-approach__orbit-label {
		font-size: 0.75rem;
		max-width: 90px;
	}
	.hbhb-approach__cta {
		padding: 24px 20px;
		gap: 16px;
		border-radius: 16px;
	}
	.hbhb-approach__cta-shield {
		width: 48px;
		height: 48px;
	}
	.hbhb-approach__cta-shield svg {
		width: 28px;
		height: 28px;
	}
	.hbhb-approach__cta-leaves {
		width: 120px;
	}
}

/* ===========================================================
   POLISH LAYER (v1.43) — typography, section consistency,
   spacing standardization, scroll reveal animations.
   -----------------------------------------------------------
   This block sits last in the cascade so it overrides any
   per-section variations without touching their CSS above.
   No layout, content, or color changes — only refinements.
   =========================================================== */

/* ----- Two-font typography system -----
   Headings + buttons + labels: Montserrat
   Body text: Helvetica → Helvetica Neue → Arial → sans-serif */
:root {
	--hbhb-font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
	--hbhb-font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Make headings + visual labels Montserrat */
.hbhb-main h1,
.hbhb-main h2,
.hbhb-main h3,
.hbhb-main h4,
.hbhb-main [class*="__title"],
.hbhb-main [class*="__heading"],
.hbhb-main [class*="__eyebrow"],
.hbhb-main [class*="__name"],
.hbhb-main [class*="__label"],
.hbhb-main [class*="__btn"],
.hbhb-main [class*="-btn"] {
	font-family: var(--hbhb-font-heading) !important;
}

/* Body text — paragraphs, list items, descriptions, generic spans */
.hbhb-main,
.hbhb-main p,
.hbhb-main li,
.hbhb-main [class*="__description"],
.hbhb-main [class*="__text"],
.hbhb-main [class*="__excerpt"],
.hbhb-main [class*="__specialty"],
.hbhb-main [class*="__experience"],
.hbhb-main [class*="__para"] p,
.hbhb-main [class*="__about-text"] {
	font-family: var(--hbhb-font-body);
}

/* ----- Unified section-head treatment -----
   Same font-size / weight / letter-spacing / colour / margins
   across every section's eyebrow + title + description. */

.hbhb-doctors__eyebrow,
.hbhb-services__eyebrow,
.hbhb-approach__eyebrow,
.hbhb-gallery__eyebrow,
.hbhb-reviews__eyebrow,
.hbhb-blog__eyebrow {
	font-family: var(--hbhb-font-heading) !important;
	font-size: 0.8125rem !important;       /* 13px */
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	color: #1F8A52 !important;
	margin: 0 0 12px !important;
	display: inline-block;
}

.hbhb-doctors__title,
.hbhb-services__title,
.hbhb-approach__title,
.hbhb-gallery__title,
.hbhb-reviews__title,
.hbhb-blog__title {
	font-family: var(--hbhb-font-heading) !important;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
	color: #0F1F1A !important;
	margin: 0 0 14px !important;
}

/* Italic emphasis inside approach title keeps its serif treatment */
.hbhb-approach__title em,
.hbhb-approach__title i {
	font-family: Georgia, 'Times New Roman', serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	color: #1F8A52 !important;
}

.hbhb-doctors__description,
.hbhb-services__description,
.hbhb-gallery__description,
.hbhb-reviews__description,
.hbhb-blog__description {
	font-family: var(--hbhb-font-body) !important;
	font-size: 1rem !important;
	line-height: 1.65 !important;
	letter-spacing: 0 !important;
	color: rgba(15, 31, 26, 0.65) !important;
	margin: 0 !important;
}

/* Section-head wrapper → 32px gap before content */
.hbhb-doctors__head,
.hbhb-gallery__head,
.hbhb-reviews__head,
.hbhb-blog__head {
	margin-bottom: 32px !important;
}

/* Services head has the layout grid directly after — keep its
   tighter margin since the pinned content needs to sit close. */
.hbhb-services__head {
	margin-bottom: 28px !important;
}

/* ----- Unified section padding (60-80 desktop / 50-60 tablet / 40-50 mobile) ----- */
.hbhb-doctors,
.hbhb-services,
.hbhb-approach,
.hbhb-gallery,
.hbhb-reviews,
.hbhb-blog {
	padding-top: 72px !important;
	padding-bottom: 72px !important;
}

@media (max-width: 900px) {
	.hbhb-doctors,
	.hbhb-services,
	.hbhb-approach,
	.hbhb-gallery,
	.hbhb-reviews,
	.hbhb-blog {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
}

@media (max-width: 600px) {
	.hbhb-doctors,
	.hbhb-services,
	.hbhb-approach,
	.hbhb-gallery,
	.hbhb-reviews,
	.hbhb-blog {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}
}

/* ===========================================================
   Scroll reveal animations
   -----------------------------------------------------------
   - Headings: slide in from left/right (label fade-left, title fade-right)
   - Content (cards, descriptions, images): fade up from 24px below
   - Triggered once when entering viewport (JS adds .is-revealed)
   =========================================================== */

[data-hbhb-reveal] {
	opacity: 0;
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

[data-hbhb-reveal="fade-left"] {
	transform: translateX(-32px);
}

[data-hbhb-reveal="fade-right"] {
	transform: translateX(32px);
}

[data-hbhb-reveal="fade-up"] {
	transform: translateY(24px);
}

[data-hbhb-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Reduced-motion users — no transitions, just present */
@media (prefers-reduced-motion: reduce) {
	[data-hbhb-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ===========================================================
   v1.44 refinements
   -----------------------------------------------------------
   1. Approach section header centered above the 2-col grid
   2. Tighter spacing between Doctors and Services sections
   =========================================================== */

/* ----- 1. Approach centered head ----- */
.hbhb-approach__head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 40px;
}

/* Eyebrow-rule was a left-aligned 48px bar in the old layout.
   In the centered head, stack the eyebrow text on top and
   the rule directly below it, both centered. */
.hbhb-approach__head .hbhb-approach__eyebrow-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
}

.hbhb-approach__head .hbhb-approach__eyebrow-rule {
	width: 48px;
	height: 2px;
	background: #1F8A52;
	border-radius: 2px;
}

.hbhb-approach__head .hbhb-approach__title {
	margin: 0;
}

/* The 2-col grid no longer holds the head, so re-center the diagram
   against the paragraphs by switching align-items from center to start
   — paragraphs flow naturally on the left while the diagram sits at the
   top of its column. (Optional: keep as center if the user prefers.) */
@media (max-width: 960px) {
	.hbhb-approach__head {
		margin-bottom: 28px;
	}
}

/* ----- 2. Reduce vertical gap between Doctors and Services ----- */
.hbhb-doctors {
	padding-bottom: 48px !important;
}

.hbhb-services {
	padding-top: 48px !important;
}

@media (max-width: 900px) {
	.hbhb-doctors {
		padding-bottom: 36px !important;
	}
	.hbhb-services {
		padding-top: 36px !important;
	}
}

@media (max-width: 600px) {
	.hbhb-doctors {
		padding-bottom: 28px !important;
	}
	.hbhb-services {
		padding-top: 28px !important;
	}
}

/* ===========================================================
   v1.45 — Hero parallax + mobile carousel fix + italic word fix
   =========================================================== */

/* ----- Hero decorative parallax layer ----- */
.hbhb-hero__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

/* Hero content needs to sit ABOVE the decoration */
.hbhb-hero .hbhb-container {
	position: relative;
	z-index: 2;
}

/* Common decoration shape behavior */
.hbhb-hero__decor-circle,
.hbhb-hero__decor-dots {
	position: absolute;
	display: block;
	pointer-events: none;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

/* Large background circle — top-left, partly off-screen */
.hbhb-hero__decor-circle--lg {
	top: -120px;
	left: -120px;
	width: 360px;
	height: 360px;
	border-radius: 999px;
	border: 1px solid rgba(31, 138, 82, 0.18);
	opacity: 0.55;
}

/* Mid-depth circle — overlap area near content edge */
.hbhb-hero__decor-circle--md {
	top: 50%;
	left: 38%;
	width: 200px;
	height: 200px;
	border-radius: 999px;
	border: 1px solid rgba(31, 138, 82, 0.14);
	opacity: 0.50;
}

/* Dot grid — top right, cream/beige dots */
.hbhb-hero__decor-dots {
	top: 80px;
	right: 80px;
	width: 140px;
	height: 90px;
	background-image: radial-gradient(rgba(232, 178, 138, 0.55) 1.4px, transparent 1.4px);
	background-size: 14px 14px;
	background-position: 0 0;
	opacity: 0.85;
}

@media (max-width: 900px) {
	/* Smaller decorations on tablet/mobile + static (no JS movement) */
	.hbhb-hero__decor-circle--lg { width: 260px; height: 260px; top: -80px; left: -80px; }
	.hbhb-hero__decor-circle--md { width: 140px; height: 140px; }
	.hbhb-hero__decor-dots      { width: 100px; height: 70px; top: 40px; right: 32px; }
}

@media (max-width: 600px) {
	.hbhb-hero__decor-circle--md { display: none; }  /* drop mid circle on small phones for less clutter */
	.hbhb-hero__decor-dots      { width: 80px; height: 56px; opacity: 0.65; }
}

/* ----- Doctors carousel — mobile rendering (v1.47 — superseded v1.45) -----
   v1.45's `min-height: 0 !important` let Swiper measure cards as zero-height
   during init on mobile, which collapsed every card to nothing. v1.47 keeps
   the auto-height intent but adds a safety floor and lifts `contain` so
   Swiper can actually measure card content during its init pass. */
@media (max-width: 900px) {
	.hbhb-doctors .swiper-wrapper {
		align-items: stretch !important;
	}
	.hbhb-doctors .swiper-slide {
		height: auto !important;
		display: flex !important;          /* let card fill slide if shorter */
		flex-direction: column !important;
	}
	.hbhb-doctors .hbhb-doctor-card {
		height: auto !important;
		min-height: 520px !important;      /* safety floor — image ~336 + body ~150 ≈ 486 */
		flex: 1 1 auto !important;
		overflow: hidden !important;
		/* IMPORTANT: lift `contain: layout style` on mobile so Swiper's measurement
		   logic can read the card's natural dimensions. With contain on, Swiper
		   sees the card as 0×0 during init and collapses the wrapper. */
		contain: none !important;
	}
}

@media (max-width: 600px) {
	.hbhb-doctors .hbhb-doctor-card {
		min-height: 580px !important;      /* taller cards on small phones — image grows with width */
	}
}

/* ----- Approach italic emphasis — strengthen so theme can't override ----- */
/* The italic green serif on `<em>health</em>` was already declared with
   !important earlier, but extending to body-prefixed selectors raises
   specificity to (0,1,1+ahead) so even aggressive parent themes lose. */
body .hbhb-approach__title em,
body .hbhb-approach__title i,
html body .hbhb-main .hbhb-approach__title em,
html body .hbhb-main .hbhb-approach__title i {
	font-family: Georgia, 'Times New Roman', 'Playfair Display', serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	color: #1F8A52 !important;
	letter-spacing: -0.005em !important;
}

/* ===========================================================
   v1.46 — Three fixes
   1. Hero parallax circles → cream/beige (visible vs dark green)
   2. Title accent → bulletproof against Elementor overrides
   3. Patient avatar image sizing → cover crop face
   =========================================================== */

/* ----- 1. Hero parallax — visible cream/beige shapes ----- */
/* Previous green-on-green was invisible against the dark green
   hero. Match the dot grid's warm cream tone for cohesion.
   All declarations !important so Elementor / theme cannot override. */
body .hbhb-hero .hbhb-hero__decor-circle--lg {
	border: 1px solid rgba(232, 188, 154, 0.28) !important;
	background: transparent !important;
	opacity: 1 !important;
}

body .hbhb-hero .hbhb-hero__decor-circle--md {
	border: 1px solid rgba(232, 188, 154, 0.22) !important;
	background: transparent !important;
	opacity: 1 !important;
}

body .hbhb-hero .hbhb-hero__decor-dots {
	background-image: radial-gradient(rgba(232, 188, 154, 0.55) 1.4px, transparent 1.4px) !important;
	background-size: 14px 14px !important;
	opacity: 0.95 !important;
}

/* Re-assert wrapper positioning + z-index ordering against
   any Elementor section that sets position:static on children. */
body .hbhb-hero {
	position: relative !important;
}

body .hbhb-hero .hbhb-hero__decor {
	position: absolute !important;
	inset: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
	z-index: 1 !important;
}

body .hbhb-hero > .hbhb-container {
	position: relative !important;
	z-index: 2 !important;
}

/* ----- 2. Hero title accent — guard against theme overrides ----- */
body .hbhb-hero .hbhb-hero__title-accent,
html body .hbhb-main .hbhb-hero .hbhb-hero__title-accent {
	color: #5BC287 !important;     /* light green that pops against dark hero */
	font-style: normal !important;
	font-weight: inherit !important;
	display: inline !important;
	background: transparent !important;
	-webkit-text-fill-color: #5BC287 !important;
}

/* ----- 3. Avatar image — center-crop face, not stretched ----- */
body .hbhb-hero__patients-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center 30% !important;  /* bias toward face/upper area */
	display: block !important;
	border-radius: inherit !important;
}

/* ===========================================================
   v1.48 — Mobile spacing refinements
   1. Doctor card body padding (button has horizontal breathing room)
   2. Doctors ↔ Services gap on mobile (was too tight)
   3. Carousel nav margin (arrows breathe from card + next section)
   =========================================================== */

/* ----- 1. Body padding on mobile — gives the Book Appointment
   button visible white space on the left and right edges so its
   rounded pill ends don't touch the screen ----- */
@media (max-width: 900px) {
	.hbhb-doctors .hbhb-doctor-card__body {
		padding: 14px 20px 18px !important;
	}
}

@media (max-width: 600px) {
	.hbhb-doctors .hbhb-doctor-card__body {
		padding: 14px 22px 20px !important;
	}
	/* Button itself: keep box-sizing so width:100% respects padding */
	.hbhb-doctors .hbhb-doctor-card__btn {
		box-sizing: border-box !important;
		max-width: 100% !important;
		padding: 10px 16px !important;
		font-size: 12px !important;
		white-space: nowrap !important;
	}
}

/* ----- 2. Doctors → Services gap on mobile — restore breathing room.
   v1.44 trimmed this to 28px each side which felt tight on small
   screens. Bumping to 56/56 = 112px total gap matches the visual
   rhythm of other section transitions on mobile. ----- */
@media (max-width: 900px) {
	.hbhb-doctors {
		padding-bottom: 56px !important;
	}
	.hbhb-services {
		padding-top: 56px !important;
	}
}

@media (max-width: 600px) {
	.hbhb-doctors {
		padding-bottom: 48px !important;
	}
	.hbhb-services {
		padding-top: 48px !important;
	}
}

/* ----- 3. Carousel nav buttons — gentle gap from the card above
   so the prev/next arrows don't hug the Book Appointment button.
   Also gentle margin below so they're not crammed against the
   doctors section's bottom edge. ----- */
@media (max-width: 900px) {
	.hbhb-doctors .hbhb-doctors__nav,
	.hbhb-doctors .swiper-button-prev,
	.hbhb-doctors .swiper-button-next {
		margin-top: 12px !important;
	}
}

/* ===========================================================
   v1.49 — Mobile button clipping fix (supersedes v1.47 flex rules)
   -----------------------------------------------------------
   v1.47 set the swiper-slide to display:flex + card to flex:1 1 auto
   to handle Swiper measurement issues. That brought the cards back but
   introduced a new problem: flex-shrink:1 (implied by flex:1 1 auto)
   crunched the card to whatever height Swiper measured for the slide,
   and overflow:hidden chopped off the Book Appointment button at the
   bottom.

   v1.49 removes the flex equalization on mobile entirely. Cards size
   to their natural content height (image + body + button). The
   min-height safety floor from v1.47 stays as a fallback.
   =========================================================== */

@media (max-width: 900px) {
	/* Slides become plain blocks — no flex equalization */
	.hbhb-doctors .swiper-slide {
		display: block !important;
		height: auto !important;
	}

	/* Wrapper aligns slides to top, doesn't stretch them */
	.hbhb-doctors .swiper-wrapper {
		align-items: flex-start !important;
	}

	/* Card sizes to its own content. NO flex-shrink (would crunch
	   content into a shorter slide height and clip the button). */
	.hbhb-doctors .hbhb-doctor-card {
		height: auto !important;
		min-height: 520px !important;
		flex: 0 0 auto !important;        /* explicit: no grow, no shrink, basis from content */
		overflow: hidden !important;       /* keeps rounded corners on the image */
		contain: none !important;          /* lifts Swiper's measurement isolation */
	}
}

@media (max-width: 600px) {
	.hbhb-doctors .hbhb-doctor-card {
		min-height: 580px !important;
	}
}

/* ===========================================================
   v1.50 — Mobile button visibility (Elementor-proof)
   -----------------------------------------------------------
   The Book Appointment button text was being clipped vertically
   because Elementor's button styles (.elementor-button or
   theme equivalents) were applying line-height: 1, height: <fixed>
   and overflow: hidden, which crushed the text descenders.

   This block uses (0,3,1+) specificity via `html body` prefix
   + element selector + class, plus !important on every property,
   so no Elementor / theme rule can win the cascade.
   =========================================================== */

@media (max-width: 900px) {

	/* ----- Body containing the button ----- */
	/* Ensure body doesn't accidentally clip its overflow */
	html body .hbhb-doctors .hbhb-doctor-card__body {
		overflow: visible !important;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* ----- Book Appointment button — ALL critical properties ----- */
	html body .hbhb-doctors .hbhb-doctor-card a.hbhb-doctor-card__btn,
	html body .hbhb-doctors .hbhb-doctor-card .hbhb-doctor-card__btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;

		/* Sizing — explicit floor + auto growth, no maximum */
		width: 100% !important;
		height: auto !important;
		min-height: 44px !important;        /* WCAG touch target; also guarantees enough room for text + padding */
		max-height: none !important;

		/* Internal spacing — generous vertical padding so descenders never touch borders */
		padding: 12px 18px !important;

		/* Typography — line-height must be 1.4 to fit "p", "o" descenders without clipping */
		font-family: var(--hbhb-font-heading), 'Montserrat', sans-serif !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;
		letter-spacing: 0.2px !important;
		text-decoration: none !important;
		text-transform: none !important;
		white-space: nowrap !important;

		/* Visual — preserves green pill design */
		background: #1F8A52 !important;
		color: #FFFFFF !important;
		border: 0 !important;
		border-radius: 999px !important;
		box-shadow: 0 4px 12px -4px rgba(31, 138, 82, 0.40) !important;

		/* Box behavior — defeats any clipping from theme button styles */
		overflow: visible !important;
		box-sizing: border-box !important;
		margin: 0 !important;

		/* Defeat browser button appearance */
		appearance: none !important;
		-webkit-appearance: none !important;
	}

	/* Hover/focus stays consistent */
	html body .hbhb-doctors .hbhb-doctor-card a.hbhb-doctor-card__btn:hover,
	html body .hbhb-doctors .hbhb-doctor-card a.hbhb-doctor-card__btn:focus-visible {
		background: #176A3F !important;
		color: #FFFFFF !important;
		text-decoration: none !important;
		outline: none !important;
	}

	/* Arrow icon inside button — lock to small size, never inflated by themes */
	html body .hbhb-doctors .hbhb-doctor-card__btn-arrow,
	html body .hbhb-doctors .hbhb-doctor-card__btn svg {
		display: inline-flex !important;
		flex-shrink: 0 !important;
		width: 14px !important;
		height: 14px !important;
		font-size: 13px !important;
		line-height: 1 !important;
		margin: 0 !important;
	}

	/* The arrow element is a <span> with content "→" — ensure font renders cleanly */
	html body .hbhb-doctors .hbhb-doctor-card__btn-arrow {
		width: auto !important;
		height: auto !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
	}

	/* ----- Specifically defeat .elementor-button if Elementor has wrapped it ----- */
	html body .hbhb-doctors .elementor-button.hbhb-doctor-card__btn,
	html body .hbhb-doctors a.elementor-button.hbhb-doctor-card__btn {
		height: auto !important;
		min-height: 44px !important;
		line-height: 1.4 !important;
		padding: 12px 18px !important;
		overflow: visible !important;
	}
}