/**
 * Alchemical Fixes — override layer.
 *
 * Loaded at priority 9999 so it lands after essentials, pixfort-core,
 * Archive-1 and alchemical-blocks. Every rule here is a correction to
 * something already on the page. Deactivate the plugin and the site returns
 * to its current behaviour.
 *
 * 1. Duplicated header on flagged product pages
 * 2. Popular Treatments (service area) — swipe affordance
 * 3. Therapy carousels — unnest the scroller, add snap
 * 4. Mobile pass
 */

/* =========================================================================
   1. Duplicated header on flagged product pages.

   alchemical-blocks/overrides.css section 3.3 forces both header variants
   visible on body.alch-orphan-pdp:

       body.alch-orphan-pdp .pix-header-desktop,
       body.alch-orphan-pdp .pix-header-mobile { display: block !important; }

   That rule carries no media query, so it defeats the site's own 1099px
   breakpoint and both headers render at every width. Currently that is the
   Women's Niagen page. The intent of the original rule was to stop the
   headers being hidden altogether, so the fix is to restore the breakpoint
   rather than remove the rule.
   ========================================================================= */

@media (max-width: 1099px) {
	html body.alch-orphan-pdp .pix-header-desktop {
		display: none !important;
		visibility: hidden !important;
	}
	html body.alch-orphan-pdp .pix-header-mobile {
		display: block !important;
		visibility: visible !important;
	}
}

@media (min-width: 1100px) {
	html body.alch-orphan-pdp .pix-header-mobile {
		display: none !important;
		visibility: hidden !important;
	}
	html body.alch-orphan-pdp .pix-header-desktop {
		display: block !important;
		visibility: visible !important;
	}
}


/* =========================================================================
   2. Popular Treatments — the service area section.

   The track is moved with transform inside a clipped parent, so there is no
   scrollable overflow for a finger to grab. touch-action: pan-y hands
   horizontal gestures to the swipe handler while leaving vertical page
   scrolling to the browser.
   ========================================================================= */

.aths-popular-treatments .treatments-carousel {
	touch-action: pan-y;
	cursor: grab;
}

.aths-popular-treatments .treatments-carousel.alch-dragging {
	cursor: grabbing;
}

.aths-popular-treatments .treatments-carousel.alch-dragging,
.aths-popular-treatments .treatments-carousel.alch-dragging * {
	-webkit-user-select: none;
	user-select: none;
}

.aths-popular-treatments .treatment-card img {
	-webkit-user-drag: none;
	user-drag: none;
}


/* =========================================================================
   3. Therapy carousels.

   The wrapper and the track were both scroll containers. Nested horizontal
   scrollers means a swipe can be claimed by the outer one, which has nothing
   to scroll, and the gesture dies. Only the inner track should scroll.
   ========================================================================= */

.aths-therapy-carousel {
	display: block !important;
	flex-direction: row !important;
	overflow: visible !important;
}

.aths-therapy-carousel-content {
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
	cursor: grab;
}

.aths-therapy-carousel-content.alch-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.aths-therapy-carousel-content .aths-therapy-item {
	scroll-snap-align: start;
}

.aths-therapy-carousel-content img {
	-webkit-user-drag: none;
	user-drag: none;
}

/* The left arrow is rendered but was never bound; it is wired up in JS and
   revealed only once the track has moved. */
.aths-carousel-arrow-prev {
	transition: opacity 0.25s ease;
}

/* How it works + testimonials: same drag treatment, same snap. */
.aths-how-it-works-carousel-content,
.alch-testi__track {
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	cursor: grab;
}

.aths-how-it-works-carousel-content.alch-dragging,
.alch-testi__track.alch-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.aths-how-it-works-carousel-content > *,
.alch-testi__track > * {
	scroll-snap-align: start;
}


/* =========================================================================
   4. Mobile pass — tested at 375 x 812.
   ========================================================================= */

@media (max-width: 767px) {

	/* --- Therapy carousel ------------------------------------------------
	   Cards were pinned to a 300px minimum with a 400px minimum image height
	   and a 40px gap, which on a 375px screen fills the viewport and hides
	   the fact that the row scrolls at all. Narrowing the card and the gap
	   leaves the next card peeking, which is the affordance that tells a
	   thumb to swipe. */

	.aths-therapy-carousel-content {
		gap: 16px;
		padding-right: 20px;
		scroll-padding-left: 20px;
	}

	.aths-therapy-carousel-content .aths-therapy-item {
		flex: 0 0 78vw !important;
		min-width: 0 !important;
		max-width: 320px;
		padding: 0;
	}

	/* A 400px minimum height on a 292px-wide card is taller than it is wide.
	   Let the square aspect ratio govern instead of a fixed pixel height. */
	.aths-therapy-carousel-content .aths-therapy-image img {
		min-height: 0 !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
	}

	.aths-therapy-carousel-section {
		padding: 48px 0 !important;
	}

	.aths-therapy-carousel {
		width: 100% !important;
		margin-left: 0 !important;
		padding-left: 20px !important;
	}

	/* Two buttons side by side under a 78vw card leaves neither readable. */
	.aths-therapy-buttons {
		flex-direction: column;
		gap: 8px;
	}

	.aths-therapy-buttons .aths-btn-primary,
	.aths-therapy-buttons .aths-btn-secondary {
		flex: 1 1 auto;
		width: 100%;
	}

	/* --- Popular treatments ---------------------------------------------- */

	.aths-popular-treatments .popular-treatments-section {
		padding: 56px 0 !important;
	}

	.aths-popular-treatments .treatments-header {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
		margin-bottom: 32px !important;
	}

	.aths-popular-treatments .treatments-title {
		font-size: 1.9rem !important;
		line-height: 1.15 !important;
	}

	/* --- Section rhythm --------------------------------------------------
	   80px of vertical padding on a phone is roughly a fifth of the screen
	   per section boundary. */

	.aths-how-it-works-carousel-section,
	.aths-faq-section,
	.features-three-panel-section {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	/* Nothing on a phone should be able to push the page sideways. */
	html,
	body {
		overflow-x: hidden;
	}
}


/* =========================================================================
   5. Provider Bio ([alch_bio]).

   The founder card on /brand/, the page the About Us menu item points at, is
   hand-written HTML with its own 10KB <style> block sitting inside the post
   content, where the editor can damage it. This is the same card rebuilt
   under its own class names and styled from the plugin, so it survives
   editing and can be added again for another provider.

   Namespaced .alch-bio rather than .aths-founder-profile so a migrated block
   and the original can sit on the page together during the handover.
   ========================================================================= */

.alch-bio {
	--alch-bio-paper: #ffffff;
	--alch-bio-card: #faf7f0;
	--alch-bio-border: #e8e3d6;
	--alch-bio-text: #4a4a47;
	--alch-bio-strong: #171717;
	--alch-bio-accent: #b8892c;
	--alch-bio-accent-soft: rgba(184, 137, 44, 0.12);
	--alch-bio-name: #7a5d12;

	padding: clamp(60px, 8vw, 100px) 1.5rem;
	background: var(--alch-bio-paper);
	color: var(--alch-bio-text);
	font-family: 'Apercu', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.alch-bio--cream {
	background: var(--alch-bio-card);
}

/* Consecutive bios read as one section rather than two slabs. */
.alch-bio + .alch-bio {
	padding-top: 0;
}

.alch-bio__container {
	max-width: 1120px;
	margin: 0 auto;
}

.alch-bio__card {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	background: var(--alch-bio-card);
	border: 1px solid var(--alch-bio-border);
	border-radius: 28px;
	padding: clamp(24px, 4vw, 48px);
	box-shadow: 0 20px 60px rgba(71, 55, 22, 0.08);
}

.alch-bio--reverse .alch-bio__card {
	grid-template-columns: 7fr 5fr;
}

.alch-bio--reverse .alch-bio__media {
	order: 2;
}

.alch-bio--reverse .alch-bio__content {
	order: 1;
}

.alch-bio__media {
	position: relative;
	aspect-ratio: 4 / 5;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 0 0 1px var(--alch-bio-border), 0 24px 44px rgba(71, 55, 22, 0.12);
}

.alch-bio__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f2ecde, #e8e3d6);
}

.alch-bio__initial {
	font-family: 'Aeonik', 'Inter', system-ui, sans-serif;
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #0a0f1f;
}

.alch-bio__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alch-bio__eyebrow {
	display: inline-block;
	background: var(--alch-bio-accent-soft);
	border-radius: 999px;
	padding: 6px 14px;
	margin: 0 0 20px;
	font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #0a0f1f;
}

/* The theme's own heading rules outrank a single class, which is why the card
   already on /brand/ does not render at the size its stylesheet asks for.
   Forced, so a migrated block sits flush beside the existing one. */
.alch-bio__name {
	font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif !important;
	font-size: clamp(1.875rem, 3.4vw, 2.6rem) !important;
	font-weight: 500 !important;
	line-height: 1.05 !important;
	letter-spacing: 0.005em !important;
	color: var(--alch-bio-name) !important;
	margin: 0 0 0.5rem;
}

.alch-bio__copy p {
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-size: 1.075rem;
	line-height: 1.7;
	margin: 0 0 1rem;
	color: var(--alch-bio-strong);
}

.alch-bio__copy p:last-child {
	margin-bottom: 0;
}

.alch-bio__quote {
	margin: 1.6rem 0 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--alch-bio-accent);
}

.alch-bio__quote p {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 1.18rem;
	line-height: 1.5;
	margin: 0;
	color: var(--alch-bio-strong);
}

@media (max-width: 880px) {
	.alch-bio__card,
	.alch-bio--reverse .alch-bio__card {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 24px;
		border-radius: 20px;
	}

	.alch-bio--reverse .alch-bio__media {
		order: 0;
	}

	.alch-bio__media {
		aspect-ratio: 1 / 1;
		max-width: 320px;
		margin: 0 auto;
		border-radius: 16px;
	}
}