/* =============================================================================
   CLIENT — AZUR HEALTH
   Homepage, header and footer from the client design (built by client/build-homepage.php).
   Only what Elementor can't express natively: fluid type sizes (design clamp() values),
   image fit and masks, pseudo elements, the slider controls position.
   Every rule is scoped to a CSS ID set in Elementor; colors come from Global Colors.
   Breakpoints are the design's (Site Settings → Breakpoints): tablet ≤ 1000px, phone ≤ 650px.
   ============================================================================= */

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

:is(#azur-hero, #azur-strip, #categories, #treatments, #how-it-works, #about, #azur-closing, #faq, #product-faq, #site-footer) .elementor-widget-text-editor p {
	margin: 0;
}

:is(#azur-hero, #azur-closing) > .e-con-inner {
	position: static;
}

/* Buttons: 54px tall with the design's 1.55 line height; 48px on phones. */
:is(#site-header, #azur-hero, #treatments, #azur-closing) .azur-btn .elementor-button {
	min-height: 50px;
}

@media (max-width: 650px) {
	:is(#azur-hero, #treatments, #azur-closing) .azur-btn .elementor-button {
		min-height: 48px;
		padding: 13px 18px;
	}
}

/* Section titles follow the design's fluid h2 (Global Font presets carry fixed sizes). */
:is(#categories, #treatments, #how-it-works, #about, #faq, #product-faq) h2.elementor-heading-title {
	font-size: clamp(38px, 4vw, 62px);
}

@media (max-width: 650px) {
	:is(#categories, #how-it-works, #about, #faq, #product-faq) h2.elementor-heading-title {
		font-size: 39px;
	}
}

/* ---- Extra brand colors ------------------------------------------------------
   Elementor data only references the core tokens; these apply the brand's extra
   Global Colors (Site Settings → Global Colors) where the design uses them. */

#azur-hero {
	background-color: var(--e-global-color-hero-bg);
}

#azur-hero-title span {
	color: var(--e-global-color-hero-soft);
}

#azur-hero-note {
	color: var(--e-global-color-hero-note);
}

#azur-strip {
	background-color: var(--e-global-color-fog);
}

:is(#azur-hero, #treatments) .azur-btn--ghost .elementor-button:hover,
:is(#azur-hero, #treatments) .azur-btn--ghost .elementor-button:focus-visible {
	background-color: var(--e-global-color-fog);
}

#categories .azur-focus {
	background-color: var(--e-global-color-cat-base);
}

#how-it-works .elementor-widget-text-editor {
	color: var(--e-global-color-on-dark-muted);
}

#azur-process-note {
	border-color: color-mix(in srgb, var(--e-global-color-on-dark) 19%, transparent);
}

#azur-closing {
	background-color: var(--e-global-color-closing-bg);
}

#site-footer .elementor-widget-text-editor,
#site-footer .azur-copyright .elementor-heading-title,
#azur-footer-grid .azur-footer-menu .elementor-item {
	color: var(--e-global-color-on-dark-soft);
}

/* ---- Header ----------------------------------------------------------------- */

#site-header-nav .elementor-nav-menu--main .elementor-item {
	line-height: 1.55;
}

#site-header-nav .elementor-nav-menu--main .elementor-item:hover,
#site-header-nav .elementor-nav-menu--main .elementor-item:focus-visible {
	box-shadow: 0 1px currentColor;
}

#site-header-actions {
	--width: auto;
	width: auto;
}

@media (max-width: 650px) {
	/* The design's menu button: the word "Menu" / "Close" in a 1px box. */
	#site-header-nav .elementor-menu-toggle {
		width: auto;
		height: auto;
		min-height: 44px;
		padding: 10px 14px;
		border: 1px solid var(--e-global-color-border);
		border-radius: 0;
		background: transparent;
	}

	#site-header-nav .elementor-menu-toggle svg,
	#site-header-nav .elementor-menu-toggle i {
		display: none;
	}

	#site-header-nav .elementor-menu-toggle::before {
		content: "Menu";
		font-family: var(--e-global-typography-text-font-family), sans-serif;
		font-size: 16px;
		line-height: 1.55;
		color: var(--e-global-color-heading);
	}

	#site-header-nav .elementor-menu-toggle.elementor-active::before {
		content: "Close";
	}

	#site-header-nav .elementor-nav-menu--dropdown {
		border-bottom: 1px solid var(--e-global-color-border);
	}

	#site-header-nav .elementor-nav-menu--dropdown > .elementor-nav-menu {
		padding: 20px 0;
	}
}

/* ---- Hero ------------------------------------------------------------------- */

#azur-hero-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	z-index: 0;
}

#azur-hero-art .elementor-widget-container,
#azur-hero-art img {
	width: 100%;
	height: 100%;
}

#azur-hero-art img {
	max-width: none;
	object-fit: cover;
	object-position: center top;
}

/* The copy sits in the left half of the wrap, at most 510px wide. */
#azur-hero-copy {
	max-width: 50%;
}

#azur-hero-eyebrow .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

#azur-hero-eyebrow .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--e-global-color-accent);
}

#azur-hero-title .elementor-heading-title {
	font-size: clamp(64px, 6.8vw, 100px);
}

#azur-hero-title span {
	display: block;
}

#azur-hero-lead {
	max-width: 460px;
	font-size: 19px;
}

#azur-hero-note {
	max-width: 430px;
	font-size: 11px;
}

@media (max-width: 1000px) {
	#azur-hero-copy {
		max-width: none;
	}

	/* Keeps the copy readable where the photo runs under it. */
	#azur-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(90deg, color-mix(in srgb, var(--e-global-color-hero-bg) 79%, transparent), transparent 65%);
		pointer-events: none;
	}

	#azur-hero-art img {
		object-position: 65% top;
	}

	#azur-hero-title .elementor-heading-title {
		font-size: 58px;
	}

	#azur-hero-lead {
		max-width: 390px;
		font-size: 17px;
	}
}

@media (max-width: 650px) {
	#azur-hero::before {
		display: none;
	}

	#azur-hero-eyebrow .elementor-heading-title {
		font-size: 9px;
	}

	#azur-hero-title .elementor-heading-title {
		font-size: 64px;
		line-height: 0.99;
	}

	#azur-hero-lead {
		max-width: none;
	}

	#azur-hero-note {
		max-width: none;
		font-size: 10px;
	}

	/* Photo below the copy, edge to edge. */
	#azur-hero-art {
		position: relative;
		inset: auto;
		order: 2;
		width: calc(100% + 40px);
		max-width: none;
		height: 390px;
		margin: 0 -20px;
	}

	#azur-hero-art img {
		object-position: 80% top;
	}
}

/* ---- Strip ------------------------------------------------------------------ */

#azur-strip .elementor-icon-list-icon {
	width: 23px;
	padding: 0;
}

#azur-strip .elementor-icon-list-icon svg {
	margin: 0;
	fill: none;
	stroke: currentColor;
}

#azur-strip .elementor-icon-list-text {
	padding-inline-start: 12px;
	color: var(--e-global-color-heading);
}

#azur-strip .elementor-icon-list-text {
	font-size: 13px;
	line-height: 1.55;
}

@media (max-width: 650px) {
	#azur-strip .elementor-icon-list-text {
		font-size: 12px;
	}
}

/* ---- Categories ------------------------------------------------------------- */

#azur-categories-heading .elementor-widget-text-editor {
	font-size: 16px;
}

#categories .azur-focus {
	position: relative;
	aspect-ratio: 4 / 5;
	isolation: isolate;
	text-decoration: none;
}

#categories .azur-focus__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	z-index: 0;
}

#categories .azur-focus__photo .elementor-widget-container,
#categories .azur-focus__photo img {
	width: 100%;
	height: 100%;
}

#categories .azur-focus__photo img {
	max-width: none;
	object-fit: cover;
	transition: transform 350ms ease;
}

#categories .azur-focus__caption {
	position: relative;
}

#categories .azur-focus__caption h3.elementor-heading-title {
	max-width: 290px;
	line-height: 1.07;
}

#categories .azur-focus__caption .elementor-widget-text-editor {
	max-width: 260px;
	font-size: 14px;
	line-height: 1.4;
}

#category-weight .azur-focus__caption {
	max-width: 240px;
}

#categories .azur-focus__link {
	position: absolute;
	left: 28px;
	bottom: 24px;
	z-index: 1;
	margin: 0;
}

#categories .azur-focus__link .elementor-heading-title {
	display: block;
	padding: 10px 15px;
	border: 1px solid color-mix(in srgb, var(--e-global-color-heading) 20%, transparent);
	border-radius: 3px;
	background: color-mix(in srgb, var(--e-global-color-surface) 91%, transparent);
	font-size: 13px;
	line-height: 1.55;
	transition: background-color 160ms ease, color 160ms ease;
}

@media (hover: hover) {
	#categories .azur-focus:hover .azur-focus__photo img {
		transform: scale(1.025);
	}

	#categories .azur-focus:hover .azur-focus__link .elementor-heading-title {
		background: var(--e-global-color-primary);
		color: var(--e-global-color-on-dark);
	}
}

/* Desktop: both rows fit below the header — card height follows the viewport height. */
@media (min-width: 1001px) {
	#categories h2.elementor-heading-title {
		font-size: 40px;
		line-height: 1.08;
	}

	#azur-categories-heading .elementor-widget-text-editor {
		font-size: 15px;
		line-height: 1.5;
	}

	#categories .azur-focus {
		aspect-ratio: auto;
		height: clamp(170px, calc((100svh - 354px) / 2), 330px);
	}

	#categories .azur-focus__photo {
		left: auto;
		right: 0;
		width: 92%;
	}

	#categories .azur-focus__photo img {
		object-position: center 55%;
		-webkit-mask-image: linear-gradient(90deg, transparent, black 24%);
		mask-image: linear-gradient(90deg, transparent, black 24%);
	}

	#category-wellness .azur-focus__photo img {
		object-position: center 35%;
	}

	#categories #category-weight {
		background-color: var(--e-global-color-cat-weight);
	}

	#categories #category-longevity {
		background-color: var(--e-global-color-cat-longevity);
	}

	#categories #category-peptides {
		background-color: var(--e-global-color-cat-peptides);
	}

	#categories #category-metabolic {
		background-color: var(--e-global-color-cat-metabolic);
	}

	#categories #category-recovery {
		background-color: var(--e-global-color-cat-recovery);
	}

	#categories #category-wellness {
		background-color: var(--e-global-color-cat-wellness);
	}

	#categories .azur-focus__caption h3.elementor-heading-title {
		line-height: 1.06;
	}

	#categories .azur-focus__caption .elementor-widget-text-editor {
		max-width: 170px;
		font-size: 12px;
	}

	#category-weight .azur-focus__caption {
		max-width: 72%;
	}

	#categories .azur-focus__link {
		left: 22px;
		bottom: 20px;
	}

	#categories .azur-focus__link .elementor-heading-title {
		padding: 9px 12px;
		font-size: 12px;
	}
}

@media (max-width: 650px) {
	#categories .azur-focus__link {
		left: 25px;
	}
}

/* ---- Treatments (Loop Carousel) --------------------------------------------- */

#treatments {
	overflow-x: clip;
}

#azur-product-slider {
	position: relative;
}

#azur-product-slider .swiper {
	padding-bottom: 8px;
}

#azur-product-slider .azur-card {
	height: 100%;
}

#azur-product-slider .azur-card__media {
	background-color: var(--e-global-color-media);
}

#azur-product-slider .azur-card__media .elementor-widget-image {
	position: absolute;
	inset: 18px;
	width: auto;
}

#azur-product-slider .azur-card__media .elementor-widget-image :is(.elementor-widget-container, a, img) {
	display: block;
	width: 100%;
	height: 100%;
}

#azur-product-slider .azur-card__media img {
	object-fit: contain;
}

#azur-product-slider .azur-card__media {
	position: relative;
}

#azur-product-slider .azur-card h3.elementor-heading-title {
	font-size: 23px;
	line-height: 1.03;
}

#azur-product-slider .azur-card h3.elementor-heading-title a {
	color: inherit;
}

#azur-product-slider .azur-card__price .price {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	font-variant-numeric: tabular-nums;
}

#azur-product-slider .azur-card__button {
	margin-top: auto;
}

#azur-product-slider .azur-card__button .elementor-button {
	width: 100%;
	font-size: 13px;
}

/* Previous / next sit at the right end of the heading row, level with the bottom of the title
   (the design lets them touch the cards; the owner wants them clear of the cards: 40px above). */
#azur-product-slider .elementor-swiper-button {
	display: grid;
	place-items: center;
	top: -86px;
	left: auto;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--e-global-color-control-line);
	border-radius: 50%;
	color: var(--e-global-color-heading);
	transform: none;
}

#azur-product-slider .elementor-swiper-button svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
}

#azur-product-slider .elementor-swiper-button-prev {
	right: 55px;
}

#azur-product-slider .elementor-swiper-button-next {
	right: 0;
}

#azur-product-slider .elementor-swiper-button.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
}

#azur-pricing-note {
	font-size: 11px;
}

@media (max-width: 650px) {
	#treatments h2.elementor-heading-title {
		font-size: 37px;
	}

	#azur-treatments-heading {
		max-width: 230px;
	}

	/* One card and a glimpse of the next one (cut at the wrap edge; the arrows sit above). */
	#azur-product-slider {
		clip-path: inset(-80px 0 0 0);
	}

	#azur-product-slider .swiper {
		width: 88%;
		margin-left: 0;
		overflow: visible;
	}

	#azur-product-slider .azur-card h3.elementor-heading-title {
		font-size: 24px;
	}

	#azur-product-slider .elementor-swiper-button {
		top: -72px;
		width: 44px;
		height: 44px;
	}

	#azur-product-slider .elementor-swiper-button-prev {
		right: 50px;
	}
}

/* ---- How it works ----------------------------------------------------------- */

#azur-process-heading {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

#azur-process-heading .elementor-widget-text-editor {
	font-size: 16px;
}

#azur-steps .azur-step__art img {
	width: 210px;
	height: 210px;
	border-radius: 50%;
	object-fit: cover;
}

#azur-steps .azur-step__number .elementor-heading-title {
	line-height: 1.55;
}

#azur-steps h3.elementor-heading-title {
	font-size: 24px;
	letter-spacing: -0.03em;
}

#azur-process-note {
	font-size: 12px;
}

@media (max-width: 1000px) and (min-width: 651px) {
	#azur-steps .azur-step__art img {
		width: 170px;
		height: 170px;
	}
}

/* ---- About ------------------------------------------------------------------ */

#azur-about-img img {
	width: 100%;
	height: 490px;
	border-radius: 4px;
	object-fit: cover;
	object-position: center;
}

#azur-about-link .elementor-button {
	display: block;
	width: fit-content;
	min-height: 0;
	padding: 0 0 7px;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: none;
	color: var(--e-global-color-heading);
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
}

@media (max-width: 1000px) {
	#azur-about-img img {
		height: 410px;
	}
}

@media (max-width: 650px) {
	#azur-about-img img {
		height: 300px;
	}
}

/* ---- Closing CTA ------------------------------------------------------------ */

#azur-closing {
	height: 43vw;
	min-height: 470px;
	max-height: 820px;
}

#azur-closing-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	z-index: 0;
}

#azur-closing-art .elementor-widget-container,
#azur-closing-art img {
	width: 100%;
	height: 100%;
}

#azur-closing-art img {
	max-width: none;
	object-fit: cover;
	object-position: center;
}

#azur-closing-copy {
	max-width: 500px;
}

#azur-closing-copy h2.elementor-heading-title {
	font-size: clamp(38px, 4.2vw, 64px);
	line-height: 1.06;
}

#azur-closing-lead {
	max-width: 420px;
}

@media (max-width: 1000px) {
	#azur-closing {
		height: auto;
		min-height: 760px;
		max-height: none;
		background-color: var(--e-global-color-closing-bg-small);
	}

	#azur-closing-copy {
		max-width: 540px;
	}

	#azur-closing-copy h2.elementor-heading-title {
		font-size: 44px;
	}

	#azur-closing-lead {
		font-size: 17px;
	}

	/* Packaging photo along the bottom, fading into the section color above it. */
	#azur-closing-art img {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 400px;
		object-position: right bottom;
	}

	#azur-closing-art::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 340px;
		height: 60px;
		background: linear-gradient(var(--e-global-color-closing-bg-small), transparent);
	}
}

@media (max-width: 650px) {
	#azur-closing {
		min-height: 730px;
	}

	#azur-closing-copy {
		max-width: none;
	}

	#azur-closing-copy h2.elementor-heading-title {
		max-width: 340px;
		font-size: 42px;
	}

	#azur-closing-lead {
		max-width: 330px;
	}

	#azur-closing-art img {
		left: auto;
		right: 0;
		width: 165%;
		height: auto;
		object-fit: contain;
	}

	#azur-closing-art::after {
		bottom: 220px;
		height: 80px;
	}
}

/* ---- FAQ -------------------------------------------------------------------- */

:is(#azur-faq-intro, #azur-product-faq-intro) .elementor-widget-text-editor {
	font-size: 16px;
}

:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item-title {
	align-items: flex-start;
	gap: 22px;
	padding: 24px 0;
	border: 0;
	background: none;
}

:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item-title-text {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	color: var(--e-global-color-heading);
}

:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item-title-icon {
	display: none;
}

/* The design's 17px between question and answer and 24px under the answer: the question keeps its
   24px, the answer sits 7px into it. */
:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item > .e-con {
	position: relative;
	top: -7px;
	padding: 0 0 17px;
	border: 0;
}

:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item .elementor-widget-text-editor {
	max-width: 580px;
}

/* Lines between the questions. The item itself has no padding or border: Elementor slides an item
   between "question height" and "question + answer height", so anything of its own would make the
   animation stop short and jump. The lines are drawn in a 1px margin instead. */
:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item {
	margin-top: 1px;
	box-shadow: 0 -1px 0 var(--e-global-color-border);
}

:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item:last-child {
	margin-bottom: 1px;
	box-shadow: 0 -1px 0 var(--e-global-color-border), 0 1px 0 var(--e-global-color-border);
}

/* + / − drawn as two bars (same size, weight and place as the design's light "+" glyph), so it can
   turn into the minus: the upright bar folds away while the sign makes a half turn. */
:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item-title::after {
	content: "";
	flex: none;
	width: 0.6em;
	height: 1.55em;
	font-size: 18px;
	color: var(--e-global-color-heading);
	background:
		linear-gradient(currentColor, currentColor) 50% calc(0.85em - 0.5px) / 0.5em 1px no-repeat,
		linear-gradient(currentColor, currentColor) 50% 0.6em / 1px 0.5em no-repeat;
	transform-origin: 50% 0.85em;
	transition: transform 300ms ease, background-size 300ms ease, background-position 300ms ease;
}

/* Open — and not on its way to closing: Elementor flips aria-expanded when the slide starts and
   removes [open] only when it ends (inline overflow marks a slide in progress). */
:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item[open]:not([style*="overflow"]) > .e-n-accordion-item-title::after,
:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item[open] > .e-n-accordion-item-title[aria-expanded="true"]::after {
	background-size: 0.5em 1px, 1px 0;
	background-position: 50% calc(0.85em - 0.5px), 50% 0.85em;
	transform: rotate(180deg);
}

/* The answer fades in while the item slides open and out when it starts to close. */
:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item[open] > .e-con {
	animation: azur-faq-answer 300ms ease backwards;
}

:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item[style*="overflow"] > .e-n-accordion-item-title[aria-expanded="false"] + .e-con {
	opacity: 0;
	transition: opacity 200ms ease;
}

@keyframes azur-faq-answer {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@media (max-width: 650px) {
	:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item-title-text,
	:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item-title::after {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item-title::after,
	:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item[open] > .e-con,
	:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item[style*="overflow"] > .e-n-accordion-item-title[aria-expanded="false"] + .e-con {
		animation: none;
		transition: none;
	}
}

/* Forced colors drop backgrounds: back to the text signs. */
@media (forced-colors: active) {
	:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item-title::after {
		content: "+";
		height: auto;
		line-height: 1.55;
		font-weight: 300;
		background: none;
		transform: none;
	}

	:is(#azur-faq-list, #azur-product-faq-list) .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
		content: "\2212";
	}
}

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

#azur-footer-grid .azur-footer-col__title .elementor-heading-title {
	line-height: 1.03;
	letter-spacing: 0;
}

#azur-footer-grid .azur-footer-menu .elementor-item {
	line-height: 1.5;
}

#azur-footer-grid .azur-footer-menu .elementor-item:hover,
#azur-footer-grid .azur-footer-menu .elementor-item:focus-visible {
	text-decoration: underline;
}

/* The closing line: fluid size (two lines on every screen), tight tracking, the secondary color at 36%
   and a hairline under it. */
#azur-footer-word {
	border-bottom: 1px solid color-mix(in srgb, var(--e-global-color-on-dark) 19%, transparent);
}

#azur-footer-word .elementor-heading-title {
	font-size: clamp(70px, 15vw, 224px);
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.065em;
	color: color-mix(in srgb, var(--e-global-color-secondary) 36%, transparent);
}

#azur-fineprint :is(.elementor-widget-text-editor, .elementor-heading-title) {
	font-size: 11px;
	line-height: 1.55;
}

#azur-fineprint .azur-copyright {
	flex: none;
}

@media (max-width: 1000px) {
	#azur-footer-identity {
		grid-column: 1 / -1;
	}
}

@media (max-width: 650px) {
	#azur-footer-grid .azur-footer-menu .elementor-item {
		font-size: 13px;
	}

	#azur-footer-word .elementor-heading-title {
		font-size: 20vw;
	}
}