/* Mintly sections: treatments, team, locations, before/after, FAQ. */
.mx-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) ); gap: 24px; }
.mx-card {
	--mx-accent: var(--mintly-accent, #1f6f5c);
	--mx-deep: var(--mintly-deep, #134a3d);
	--mx-soft: var(--mintly-soft, #e9f4ef);
	--mx-ink: var(--mintly-ink, #10261f);
	background: #fff; border: 1px solid #e3eae6; border-radius: 24px; overflow: hidden;
	color: var(--mx-ink); display: flex; flex-direction: column;
}
.mx-card__title { font-family: var(--mintly-display, inherit); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--mx-ink); text-decoration: none; }
.mx-card__text { color: #3d4f49; }
.mx-muted { color: #4a5c56; font-size: 15px; }
.mx-treatment { padding: 28px; gap: 14px; text-decoration: none; transition: border-color .15s, transform .15s; }
.mx-treatment:hover { border-color: var(--mx-accent); transform: translateY( -2px ); }
.mx-num {
	width: 52px; height: 52px; border-radius: 16px; background: var(--mx-soft); color: var(--mx-deep);
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
.mx-card__foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mx-link { font-weight: 600; color: var(--mx-deep); }

.mx-member__photo { aspect-ratio: 4 / 4.4; background: var(--mintly-photo, #cfe5db); overflow: hidden; }
.mx-member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.mx-member__body, .mx-location__body { padding: 24px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.mx-next { margin-top: 8px; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: 15px; color: var(--mx-deep); }
.mx-member .mx-btn { margin-top: auto; }
.mx-member__body > .mx-btn { margin-top: 16px; }

.mx-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px;
	border-radius: 999px; font-weight: 700; text-decoration: none; background: var(--mx-accent, #1f6f5c); color: #fff;
	border: 1.5px solid var(--mx-accent, #1f6f5c);
}
.mx-btn:hover { background: var(--mx-deep, #134a3d); border-color: var(--mx-deep, #134a3d); color: #fff; }
.mx-btn--outline { background: transparent; color: var(--mx-deep, #134a3d); }
.mx-btn--outline:hover { color: #fff; }

.mx-location__photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mintly-photo, #cfe5db); }
.mx-location__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-phone { color: var(--mx-deep); font-weight: 600; text-decoration: none; }
.mx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Before / after */
.mx-ba { display: flex; flex-direction: column; gap: 16px; }
.mx-ba__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-ba__tab {
	min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid currentColor;
	background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; opacity: .85;
}
.mx-ba__tab.is-on { background: #fff; color: var(--mintly-ink, #10261f); border-color: #fff; opacity: 1; }
.mx-ba__frame { position: relative; aspect-ratio: 3 / 2; border-radius: 28px; overflow: hidden; background: #cfc8be; user-select: none; }
.mx-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.mx-ba__after { position: absolute; inset: 0; clip-path: inset( 0 calc( 100% - var(--pos) ) 0 0 ); }
.mx-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba( 0, 0, 0, .1 ); }
.mx-ba__handle::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
	border-radius: 999px; background: #fff; box-shadow: 0 6px 20px rgba( 0, 0, 0, .25 );
}
.mx-ba__tag { position: absolute; top: 16px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.mx-ba__tag--after { left: 16px; background: #fff; color: #10261f; }
.mx-ba__tag--before { right: 16px; background: rgba( 0, 0, 0, .6 ); color: #fff; }
.mx-ba__range input { width: 100%; min-height: 44px; accent-color: var(--mintly-warm, #f4b9a0); }

/* FAQ */
.mx-faq { display: flex; flex-direction: column; gap: 12px; }
.mx-faq__item { border: 1px solid #e3eae6; border-radius: 20px; background: #fff; }
.mx-faq__item[open] { background: var(--mintly-soft, #e9f4ef); }
.mx-faq__item summary {
	list-style: none; cursor: pointer; min-height: 64px; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
	font-size: 18px; font-weight: 600; color: var(--mintly-ink, #10261f);
}
.mx-faq__item summary::-webkit-details-marker { display: none; }
.mx-faq__sign::before { content: "+"; font-size: 24px; color: var(--mintly-accent, #1f6f5c); }
.mx-faq__item[open] .mx-faq__sign::before { content: "–"; }
.mx-faq__a { padding: 0 24px 20px; color: #3d4f49; }
.mx-faq__a p { margin: 0 0 .6em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect( 1px, 1px, 1px, 1px ); white-space: nowrap; }
@media ( prefers-reduced-motion: reduce ) { .mx-treatment { transition: none; } }
/* Never let Elementor's flex containers squash our widgets. */
[class*="elementor-widget-mintly-"] { flex-shrink: 0; width: 100%; }
.mx-ba { max-width: 960px; width: 100%; }
.mx-ba__frame { aspect-ratio: 16 / 10; }
.mx-locations { grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) ); }
