/*
Theme Name: Hello Elementor Child
Theme URI: https://omyai-ruamphat-clinic.local
Description: Child theme for Hello Elementor — holds the site font, custom shortcodes, header/footer helpers and all custom CSS/JS for Omyai Ruamphat Clinic.
Author: Omyai Ruamphat Clinic
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/*
 * Font default for markup Elementor doesn't render (WP menus, hamburger dropdown,
 * shortcode output). Deliberately low specificity — Elementor's kit Globals and
 * per-widget typography must always win, so nothing here is !important and no
 * font-size is declared: 16px comes from the kit body typography.
 */
body,
button,
input,
select,
textarea {
	font-family: 'Anuphan', sans-serif;
}

/*
 * Drop the trailing paragraph margin inside Text Editor widgets. The theme gives
 * every <p> a bottom margin, which stacks on top of the widget's own margin — it
 * made every service card 15px taller than the design and every section subtitle
 * sit 14px too far from what follows. Spacing belongs to the widget's margin, which
 * is what the design expresses and what stays editable in Elementor.
 * Scoped to :last-child so multi-paragraph copy still breathes, and to the widget
 * so post content is untouched.
 */
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Header shell
   HFE injects the header template into <header id="masthead">, so the sticky
   behaviour lives here rather than on an Elementor container (sticky is Pro).
   ========================================================================== */

/* HFE ships `.ehf-header #masthead{position:relative}` (0,1,1,0), which outranks a
   bare `#masthead` (0,1,0,0) no matter the load order — the header silently scrolled
   away instead of sticking. Adding `body` outranks it without !important. */
body.ehf-header #masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
}

/* Anchored sections must clear the sticky header, or their heading lands underneath
   it. Matches the header's height. */
#top,
#services,
#full-price-list,
#gallery,
#articles {
	scroll-margin-top: 68px;
}

/* Anchor for the absolutely-positioned mobile dropdown. */
#hdr-row {
	position: relative;
}

#hdr-logo {
	flex: 0 0 auto;
}

/* Pin the CTA cluster right. margin-left:auto rather than flex-grow on the logo:
   once the mobile nav goes position:absolute nothing stretches the row, and
   flex-grow would silently stop working. */
/* Elementor gives child containers width:100% (via --width), which flex:0 0 auto
   does NOT override — once the mobile nav leaves the flow this stretched the CTA
   to the full row and blew the page out to 582px. width:auto is the actual fix. */
#hdr-cta {
	margin-left: auto;
	width: auto;
	flex: 0 0 auto;
}

/* Logo lockup — native Custom Logo + Site Title + Tagline. */
.site-logo__link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.site-logo__mark {
	width: 44px;
	height: 44px;
	object-fit: contain;
	display: block;
}

.site-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.site-logo__name {
	font-weight: 700;
	color: var(--e-global-color-text);
}

/* The English line is deliberately smaller than body copy; em keeps it tied to
   the kit's 16px body size instead of hardcoding px. */
.site-logo__tagline {
	font-size: 0.75em;
	font-weight: 500;
	color: var(--e-global-color-text);
}

/* ==========================================================================
   Primary nav
   ========================================================================== */

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 15px in the design. Expressed in em so it stays tied to the kit's body size
   instead of hardcoding a px value. */
.site-nav__list a {
	display: block;
	font-size: 0.9375em;
	font-weight: 600;
	color: var(--e-global-color-text);
	text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
	color: var(--e-global-color-primary);
}

/* --------------------------------------------------------------------------
   Services dropdown (desktop). The 13 single-service pages hang under "บริการ"
   so they are reachable from every page, not just by scrolling /services/.
   Two columns via CSS multicol; the skin-department label starts column 2.
   -------------------------------------------------------------------------- */

.site-nav__list > li {
	position: relative;
}

/* Caret on the parent item. */
.site-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 6px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	z-index: 60;
	margin: 0;
	padding: 18px 22px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--e-global-color-bordersoft);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
	columns: 2;
	column-gap: 30px;
	width: max-content;
	max-width: min(92vw, 560px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* A hover bridge so the pointer can cross the 6px gap without the menu closing. */
.site-nav__list .menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 12px;
}

.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.site-nav__list .sub-menu li {
	break-inside: avoid;
}

.site-nav__list .sub-menu a {
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 0.9375em;
	font-weight: 500;
	white-space: nowrap;
}

.site-nav__list .sub-menu a:hover {
	background: var(--e-global-color-altbg2);
	color: var(--e-global-color-primary);
}

/* "ดูบริการทั้งหมด" — the parent page, kept reachable inside the dropdown. */
.site-nav__list .sub-menu .nav-all > a {
	font-weight: 700;
	color: var(--e-global-color-primary);
}

/* Group labels are headings, not links. */
.site-nav__list .sub-menu .nav-group > a {
	margin-top: 10px;
	padding: 6px 10px 4px;
	font-size: 0.8125em;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--e-global-color-accent);
	pointer-events: none;
	cursor: default;
	border-bottom: 1px solid var(--e-global-color-altbg);
	border-radius: 0;
}

.site-nav__list .sub-menu .nav-group--skin {
	break-before: column;
}

.site-nav__list .sub-menu .nav-group--skin > a {
	margin-top: 0;
}

/* ==========================================================================
   Home — hero
   ========================================================================== */

/* The hero is now a full-bleed background-photo band with the copy on the left
   (2026-07 redesign). A left→right white gradient keeps the H1/paragraph legible
   over the photo, and works for any background the owner swaps in. */
#top {
	position: relative;
}

#top::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.7) 42%,
		rgba(255, 255, 255, 0.12) 78%);
	pointer-events: none;
}

/* Lift the copy column above the gradient overlay. */
#top > .elementor-element {
	position: relative;
	z-index: 1;
}

#hero-copy {
	width: 100%;
	max-width: 600px;
}

/* Hero H1 — smaller and airier than the kit's 52px so it reads cleaner and doesn't
   crowd the background photo on the right (owner's request). STAYS an <h1> for
   SEO/AEO; this is CSS-only. em keeps it tied to the 16px base: 40 / 34 / 28 at
   desktop / tablet / mobile, with a more open line-height. */
#hero-copy h1.elementor-heading-title {
	font-size: 2.5em; /* 40px */
	line-height: 1.3;
}

@media (max-width: 1024px) {
	#hero-copy h1.elementor-heading-title {
		font-size: 2.125em; /* 34px */
	}
}

@media (max-width: 767px) {
	#hero-copy h1.elementor-heading-title {
		font-size: 1.75em; /* 28px */
	}
}

/* On narrow screens the photo is cropped tight, so the wash carries further right. */
@media (max-width: 767px) {
	#top::before {
		background: linear-gradient(90deg,
			rgba(255, 255, 255, 0.95) 0%,
			rgba(255, 255, 255, 0.82) 55%,
			rgba(255, 255, 255, 0.5) 100%);
	}
}

/* Home — the design caps this one subtitle and centres it.
   width:100% is required: auto inline margins cancel a flex item's stretch, so
   without it the widget shrinks to its text (601px) instead of filling to the cap. */
#gallery-sub {
	width: 100%;
	max-width: 620px;
	margin-inline: auto;
}

/* ==========================================================================
   Home — service cards
   The design uses `grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))`,
   which picks its own column count per width. Reproducing that here (rather than
   approximating with percentage widths) makes the cards land on the design's exact
   280px and keeps the reflow identical at every breakpoint.
   ========================================================================== */

#svc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

/* The icon chip is an inline-block inheriting the body's 1.6 leading, which adds
   ~8px of phantom descender space below it and makes every card taller than the
   design's 260px. Zeroing the wrapper's line-height gives a true 48px chip. */
#svc-grid .elementor-icon-wrapper {
	line-height: 0;
}

/* ==========================================================================
   Home — trust / local-SEO columns
   Fixed 4-up on desktop (the brief), collapsing 2-up then 1-up, unlike the
   service grid's auto-fit — the four short columns should stay a single row on
   desktop rather than reflowing at an arbitrary min-width.
   ========================================================================== */

#trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	align-items: start;
}

#trust-grid .elementor-heading-title {
	font-size: 1.125em;
}

/* Centred closing block below the columns. */
#trust-close {
	max-width: 820px;
	margin: 56px auto 0;
}

@media (max-width: 1024px) {
	#trust-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	#trust-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   About page
   Column sizing lifted straight from the design's flex-basis + min-width, same
   approach as the Home hero (percentages can't reproduce the wrap behaviour).
   ========================================================================== */

#about-hero-copy {
	flex: 1 1 460px;
	min-width: 300px;
	width: auto;
}

/* The hero title STAYS an <h1> (SEO), but the owner wants it visually the same size
   as the "วิสัยทัศน์และพันธกิจของเรา" <h2> below it — done here in CSS only, matching
   the kit's H2 scale (36 / 30 / 26 at desktop / tablet / mobile). */
#about-hero-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
}

@media (max-width: 1024px) {
	#about-hero-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#about-hero-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

#about-hero-media {
	flex: 1 1 380px;
	min-width: 280px;
	width: auto;
	max-width: 520px;
}

/* Natural 750x400 ratio, consistent with the Home hero decision (see rules.md #5). */
#about-hero-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 750 / 400;
	object-fit: cover;
}

#vision-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

#vision-grid .elementor-icon-wrapper {
	line-height: 0;
}

/* Location: text column grows, map column caps at 560 — the design's flex values. */
#loc-copy {
	flex: 1 1 420px;
	min-width: 280px;
	width: auto;
}

#loc-map {
	flex: 1 1 420px;
	min-width: 280px;
	width: auto;
	max-width: 560px;
}

/* The map iframe fills its rounded frame. */
#loc-map iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Anchored sections on the About page clear the sticky header too. */
#location,
#contact-hours {
	scroll-margin-top: 68px;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

/* Hero title STAYS an <h1> (SEO), sized like the H2 scale via CSS only. */
#contact-hero-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
	line-height: 1.3;
}

@media (max-width: 1024px) {
	#contact-hero-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#contact-hero-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

/* Hero columns — copy grows, photo caps (same behaviour as the About hero). */
#contact-hero-copy {
	flex: 1 1 460px;
	min-width: 300px;
	width: auto;
}

#contact-hero-media {
	flex: 1 1 380px;
	min-width: 280px;
	width: auto;
	max-width: 520px;
}

#contact-hero-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 750 / 400;
	object-fit: cover;
}

/* Info cards — 2 columns on desktop, 1 on mobile. */
#contact-info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: stretch;
}

@media (max-width: 767px) {
	#contact-info-grid {
		grid-template-columns: 1fr;
	}
}

/* Phone / LINE links inside the cards read in the primary colour. */
.contact-card__text a {
	color: var(--e-global-color-primary);
	font-weight: 700;
}

/* Kill the icon chip's phantom descender (same fix as the service grid). */
#contact-info-grid .elementor-icon-wrapper {
	line-height: 0;
}

/* Map embed fills its rounded frame. */
#contact-map iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* ==========================================================================
   Single service page — ตรวจสุขภาพ (health-checkup)
   ========================================================================== */

/* Hero title stays <h1>, sized like the H2 scale via CSS only. */
#checkup-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
	line-height: 1.3;
}

@media (max-width: 1024px) {
	#checkup-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#checkup-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

/* Lead paragraph under the programs H2 — capped and centred. */
#checkup-lead {
	max-width: 720px;
	margin-inline: auto;
}

/* Program cards — 3/2/1 grid. */
#checkup-programs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	align-items: stretch;
}

#checkup-programs .elementor-icon-wrapper {
	line-height: 0;
}

/* Callout box — soft tint with an accent rule down the left. */
#checkup-callout {
	background: var(--e-global-color-altbg);
	border-left: 4px solid var(--e-global-color-secondary);
	border-radius: 12px;
}

#checkup-callout .elementor-icon-wrapper {
	line-height: 0;
}

/* Blood-test price grid — clean centred cards. */
#checkup-prices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
}

#checkup-prices > .elementor-element {
	background: #fff;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 12px;
	text-align: center;
}

/* ==========================================================================
   Single service page — ใบรับรองแพทย์ (medical-certificate)
   ========================================================================== */

#cert-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
	line-height: 1.3;
}

@media (max-width: 1024px) {
	#cert-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#cert-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

/* Required-documents box. */
#cert-docs {
	background: #fff;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 14px;
	max-width: 760px;
	width: 100%;
	margin-inline: auto;
}

/* Certificate-type cards (2-up) + trust cards (3-up). */
#cert-types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	align-items: stretch;
}

#cert-why {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	align-items: stretch;
}

#cert-types .elementor-icon-wrapper,
#cert-why .elementor-icon-wrapper {
	line-height: 0;
}

/* "เหมาะสำหรับ" lead-in reads in the primary colour. */
#cert-types strong {
	color: var(--e-global-color-primary);
}

/* Price table — hairline rows in a rounded frame. */
#cert-prices {
	background: #fff;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 14px;
	overflow: hidden;
	max-width: 760px;
	width: 100%;
	margin-inline: auto;
}

#cert-prices > .elementor-element {
	padding: 14px 24px;
	border-top: 1px solid var(--e-global-color-altbg);
}

#cert-prices > .elementor-element:first-child {
	border-top: 0;
}

/* Keep the name growing and the price hard-right on one line. */
#cert-prices > .elementor-element > .elementor-element:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

#cert-prices > .elementor-element > .elementor-element:last-child {
	flex: 0 0 auto;
}

/* ==========================================================================
   Single service page — ฉีดวัคซีน (vaccination)
   ========================================================================== */

#vx-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
	line-height: 1.3;
}

@media (max-width: 1024px) {
	#vx-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#vx-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

/* Centred hero intro, capped for a comfortable measure. */
#vx-hero-intro p {
	max-width: 800px;
	margin-inline: auto;
}

/* Vaccine cards inside an open accordion panel — a tidy grid of name + price. */
.vx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.vx-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	background: var(--e-global-color-altbg2);
	border: 1px solid var(--e-global-color-accent);
	border-radius: 12px;
}

.vx-name {
	font-size: 0.9375em;
	color: var(--e-global-color-text);
}

.vx-price {
	font-size: 1.0625em;
	font-weight: 700;
	color: var(--e-global-color-primary);
}

/* Local-SEO call-to-action box. */
#vx-cta .elementor-heading-title {
	color: var(--e-global-color-primary);
}

/* ==========================================================================
   Local-SEO summary block (home + services, above the footer)
   ========================================================================== */

#local-seo-card .elementor-heading-title {
	color: var(--e-global-color-primary);
}

#local-seo-text p {
	max-width: 760px;
	margin-inline: auto;
}

/* ==========================================================================
   Single service page — คลินิกเบาหวานและความดัน (diabetes-hypertension)
   ========================================================================== */

#dm-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
	line-height: 1.3;
}

@media (max-width: 1024px) {
	#dm-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#dm-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

#dm-hero-intro p {
	max-width: 820px;
	margin-inline: auto;
}

/* Accordion rows: price item (name + price + note) and service item (name + desc). */
.dm-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-item {
	padding: 14px 0;
	border-top: 1px solid var(--e-global-color-altbg);
}

.dm-item:first-child {
	border-top: 0;
}

.dm-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.dm-name {
	font-size: 0.9375em;
	color: var(--e-global-color-text);
}

.dm-price {
	flex: 0 0 auto;
	font-size: 0.9375em;
	font-weight: 700;
	white-space: nowrap;
	color: var(--e-global-color-primary);
}

.dm-note {
	margin-top: 4px;
	font-size: 0.8125em;
	color: var(--e-global-color-accent);
}

.dm-item--service .dm-name {
	font-size: 1em;
	font-weight: 700;
	color: var(--e-global-color-primary);
}

.dm-desc {
	margin-top: 6px;
	font-size: 0.9375em;
	color: var(--e-global-color-text);
}

/* ANC hero shares the single-service hero sizing. */
#anc-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
	line-height: 1.3;
}

@media (max-width: 1024px) {
	#anc-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#anc-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

#anc-hero-intro p {
	max-width: 820px;
	margin-inline: auto;
}

/* Cancer-screening hero shares the single-service hero sizing. */
#cancer-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
	line-height: 1.3;
}

@media (max-width: 1024px) {
	#cancer-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#cancer-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

#cancer-hero-intro p {
	max-width: 840px;
	margin-inline: auto;
}

/* Gynecology + wound-care heroes share the single-service hero sizing. */
#gyneco-title .elementor-heading-title,
#wound-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
	line-height: 1.3;
}

@media (max-width: 1024px) {
	#gyneco-title .elementor-heading-title,
	#wound-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#gyneco-title .elementor-heading-title,
	#wound-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

#gyneco-hero-intro p,
#wound-hero-intro p {
	max-width: 860px;
	margin-inline: auto;
}

/* Trust points — "ทำไมต้องรักษาที่นี่?" as a 2×2 card grid (owner's pick 2026-07-23).
   Four selling points scan far faster as cards than as one stacked text block, and it
   matches the card language the rest of these pages already use. Shared by all seven
   pages that print [trust_points] (5 skin + gyneco + wound). Collapses to 1 column. */
.trust-points {
	list-style: none;
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.trust-points li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--e-global-color-bordersoft);
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.trust-points li:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09);
}

.trust-ico {
	flex: 0 0 auto;
	margin-top: 2px;
	font-size: 1.25em;
	color: var(--e-global-color-secondary);
}

.trust-body {
	line-height: 1.6;
}

/* Lead becomes the card title, description the body underneath. */
.trust-lead {
	display: block;
	margin-bottom: 6px;
	font-size: 1.0625em;
	color: var(--e-global-color-primary);
	font-weight: 700;
}

.trust-desc {
	display: block;
	font-size: 0.9375em;
	color: var(--e-global-color-text);
}

@media (max-width: 767px) {
	.trust-points {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.trust-points li {
		padding: 18px 20px;
	}
}

/* ==========================================================================
   Related-services cards (internal linking block, above the footer)
   ========================================================================== */

.rel-h3 {
	margin: 0 0 32px;
	text-align: center;
	font-size: 1.375em; /* 22px */
	font-weight: 700;
	color: var(--e-global-color-primary);
}

.rel-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.rel-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 14px;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.rel-card:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
	transform: translateY(-3px);
}

.rel-card__title {
	font-size: 1.0625em;
	font-weight: 700;
	color: var(--e-global-color-primary);
	line-height: 1.4;
}

.rel-card__arrow {
	flex: 0 0 auto;
	font-size: 1.125em;
	font-weight: 700;
	color: var(--e-global-color-secondary);
	transition: transform 0.2s ease;
}

.rel-card:hover .rel-card__arrow {
	transform: translateX(3px);
}

/* ==========================================================================
   Services page
   ========================================================================== */

/* Hero title STAYS an <h1> (SEO) but is sized like an H2 (owner's request) — CSS
   only, matching the kit's H2 scale (36 / 30 / 26 at desktop / tablet / mobile). */
#svc-hero-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
}

@media (max-width: 1024px) {
	#svc-hero-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#svc-hero-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

/* Services hero — centred like the Articles hero (owner request). Scoped to the
   Services page (body.page-id-21) because the hero container's #top id is shared
   with other pages' heroes, which must stay as they are. Works on all breakpoints. */
.page-id-21 #top {
	text-align: center;
}

.page-id-21 #top .svc-intro p {
	max-width: 760px;
	margin-inline: auto;
}

/* ...but the breadcrumb stays left-aligned, like the Articles/Contact pages. */
.page-id-21 #top .svc-breadcrumb {
	text-align: left;
}

/* Service card grid (general care) — clickable cards that link to each
   single-service page. Same card language as the homepage service grid. */
.svc-cards {
	display: grid;
	/* 3 columns on desktop, 2 on tablet, 1 on mobile — auto-fit at a 300px min. */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.svc-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 14px;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.svc-card:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
	transform: translateY(-3px);
}

.svc-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--e-global-color-secondary);
	color: #fff;
	font-size: 20px;
}

.svc-card__title {
	margin: 0;
	font-size: 1.0625em;
	font-weight: 700;
	color: var(--e-global-color-primary);
}

.svc-card__en {
	display: block;
	font-size: 0.8125em;
	font-weight: 500;
	color: var(--e-global-color-text);
}

.svc-card__desc {
	margin: 0;
	flex: 1;
	font-size: 0.875em;
	color: var(--e-global-color-text);
}

/* Price (prominent, left) + "อ่านรายละเอียด →" CTA (right), pinned to the card foot. */
.svc-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--e-global-color-altbg);
}

.svc-card__price {
	font-size: 1em;
	font-weight: 700;
	color: var(--e-global-color-primary);
}

.svc-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125em;
	font-weight: 700;
	color: var(--e-global-color-secondary);
	white-space: nowrap;
}

.svc-card__cta span {
	transition: transform 0.2s ease;
}

.svc-card:hover .svc-card__cta {
	text-decoration: underline;
}

.svc-card:hover .svc-card__cta span {
	transform: translateX(3px);
}

/* "ทำไมต้องเลือกเรา" trust bullets — centred, comfortable measure. */
#why-wrap {
	max-width: 680px;
	margin-inline: auto;
}

/* Breadcrumb — the design greys "หน้าแรก" and greens the current crumb. */
.svc-breadcrumb .elementor-widget-container p {
	font-size: 0.8125em;
}

.svc-breadcrumb a {
	color: var(--e-global-color-text);
}

.svc-breadcrumb .crumb-current {
	color: var(--e-global-color-primary);
}

/* Intro paragraphs (hero + each group) are capped and left-aligned, as the design.
   Cap the <p> itself: Elementor's `.e-con > .elementor-widget{max-width:100%}` has
   higher specificity than a class on the widget wrapper, so capping the wrapper loses. */
.svc-intro p {
	max-width: 720px;
}

/* Section badge pill ("กลุ่มบริการที่ N"). The pill IS the heading title so it hugs
   its text; --alt swaps the background for the second (darker-bg) section. */
.service-badge .elementor-heading-title {
	display: inline-block;
	background: var(--e-global-color-altbg);
	color: var(--e-global-color-primary);
	font-size: 0.8125em;
	font-weight: 700;
	line-height: 1.6;
	padding: 6px 14px;
	border-radius: 20px;
}

.service-badge--alt .elementor-heading-title {
	background: var(--e-global-color-altbg2);
}

/* Pricing table — a grid whose 1px gaps over an accent background read as hairline
   dividers between white cells (the design's technique, reproduced). */
.service-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--svc-min, 340px), 1fr));
	gap: 1px;
	background: var(--e-global-color-accent);
	border: 1px solid var(--e-global-color-accent);
	border-radius: 14px;
	overflow: hidden;
}

.service-list__item {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	background: #fff;
	padding: 22px 24px;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.service-list__item:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 1;
}

.service-list__main {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0; /* let a long title wrap instead of pushing the price off-cell */
}

.service-list__title {
	font-size: 1em;
	font-weight: 700;
	color: var(--e-global-color-primary);
}

.service-list__desc {
	font-size: 0.84375em; /* 13.5px */
	color: var(--e-global-color-text);
}

.service-list__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	text-align: right;
	white-space: nowrap;
	flex-shrink: 0;
}

.service-list__price {
	font-size: 0.875em; /* 14px */
	font-weight: 700;
	color: var(--e-global-color-primary);
}

.service-list__more {
	font-size: 0.75em; /* 12px */
	color: #4a4a4a;
}

/* ==========================================================================
   Horizontal scroll strips (price tables + clinic photos)
   Free Elementor has no horizontal-scroll widget, so the strips are plain row
   Containers and the scrolling behaviour lives here.
   ========================================================================== */

#price-strip,
#svc-price-strip,
#skin-price-strip {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

/* Services price strip images are a touch shorter than the Home ones.
   #skin-price-strip is the same strip for the skin department — a separate id
   because the Services page carries both strips and ids must stay unique. */
#svc-price-strip img,
#skin-price-strip img {
	height: clamp(340px, 54vh, 500px);
	width: auto;
	max-width: 88vw;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 12px;
}

/* Elementor gives child elements width:100%; these must size to their image and
   not shrink, or six images would squeeze into one row instead of scrolling. */
#price-strip > .elementor-element,
#svc-price-strip > .elementor-element,
#skin-price-strip > .elementor-element {
	flex: 0 0 auto;
	width: auto;
	scroll-snap-align: start;
}

/* Anchored service sections clear the sticky header. */
#general-care,
#aesthetic-care {
	scroll-margin-top: 68px;
}

#price-strip img {
	height: clamp(360px, 58vh, 560px);
	width: auto;
	max-width: 88vw;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 12px;
}

/* ==========================================================================
   Home gallery — auto-sliding marquee
   Elementor free has no carousel widget, so the strip holds the six photos twice
   and translateX(-50%) lands the 7th (a copy of the 1st) exactly where the 1st
   began — a seamless loop. Pauses on hover and for reduced-motion users (who get
   a normal scroll strip instead).
   ========================================================================== */

#gallery-viewport {
	width: 100%;
	overflow: hidden;
}

#gallery-strip {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	gap: 0;
	animation: omyai-marquee 48s linear infinite;
}

#gallery-strip:hover {
	animation-play-state: paused;
}

#gallery-strip > .elementor-element {
	flex: 0 0 auto;
	width: 340px;
	margin-right: 20px;
}

#gallery-strip img {
	display: block;
	width: 100%;
	height: 230px;
	object-fit: cover;
	border-radius: 16px;
}

@keyframes omyai-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 767px) {
	#gallery-strip > .elementor-element {
		width: 260px;
	}

	#gallery-strip img {
		height: 180px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#gallery-strip {
		animation: none;
	}

	#gallery-viewport {
		overflow-x: auto;
	}
}

/* ==========================================================================
   Article cards ([latest_articles])
   Same card language as the service cards in the design: 1px accent border,
   14px radius, image on top.
   ========================================================================== */

/* No posts yet → hide the whole section rather than show an empty heading + button.
   Reappears automatically once the first article is published. Front end only:
   the section stays visible in the Elementor editor so it can still be edited. */
body.no-articles #articles {
	display: none;
}

.article-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.article-card {
	border: 1px solid var(--e-global-color-accent);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.article-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.article-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
}

.article-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.article-card__img,
.article-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-card__placeholder {
	background: var(--e-global-color-altbg2);
}

.article-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}

.article-card__date {
	font-size: 0.8125em;
	color: var(--e-global-color-text);
}

.article-card__title {
	margin: 0;
	font-size: 1.125em;
	font-weight: 700;
	color: var(--e-global-color-primary);
}

.article-card__excerpt {
	margin: 0;
	font-size: 0.875em;
	color: var(--e-global-color-text);
}

@media (max-width: 1024px) {
	.article-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.article-cards {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Articles — list grid + cards ([article_grid]) and single post (single.php)
   ========================================================================== */

/* Hero title STAYS an <h1> (SEO/AEO) but is sized smaller and airier than the kit's
   52px — CSS only, matching the kit's H2 scale (36 / 30 / 26) with an open line-height. */
#articles-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
	line-height: 1.3;
}

@media (max-width: 1024px) {
	#articles-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#articles-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

.article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 28px;
}

/* Card — 4:3 image, title, excerpt, "อ่านเพิ่มเติม" pill (the design's list card). */
.article-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.article-card:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}

/* One media box for BOTH card layouts (home [latest_articles] + /blog/ [article_grid]).
   These two rule blocks used to disagree (16:9 vs 4:3) and the later one silently won
   everywhere, so 16:9 artwork left a blank strip under the image. 16:9 matches the
   featured images the clinic supplies — see the recommended size in memo/rules.md. */
.article-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--e-global-color-altbg2);
}

/* Scoped with .article-card so it outranks Elementor's `.elementor img { height:auto }`,
   which otherwise collapses the image back to its intrinsic height inside the box. */
.article-card .article-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	font-size: 0.875em;
	color: var(--e-global-color-accent);
}

.article-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 20px 22px 22px;
}

.article-card__title {
	margin: 0;
	font-size: 1.0625em; /* 17px */
	font-weight: 700;
	color: var(--e-global-color-primary);
}

.article-card__excerpt {
	margin: 0;
	flex: 1;
	font-size: 0.875em; /* 14px */
	color: var(--e-global-color-text);
}

.article-card__more {
	align-self: flex-start;
	margin-top: 4px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 20px;
	padding: 6px 16px;
	font-size: 0.8125em; /* 13px */
	font-weight: 600;
	color: var(--e-global-color-primary);
}

.article-card:hover .article-card__more {
	background: var(--e-global-color-altbg);
}

/* Empty state until the first post is published. */
.article-empty {
	text-align: center;
	padding: 40px 24px;
	color: var(--e-global-color-text);
}

/* Pagination. */
.article-pagination {
	margin-top: 40px;
}

.article-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-pagination a,
.article-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 8px;
	color: var(--e-global-color-primary);
	text-decoration: none;
}

.article-pagination .current {
	background: var(--e-global-color-secondary);
	border-color: var(--e-global-color-secondary);
	color: #fff;
}

/* --- Single post (single.php) --- */
.single-article__crumbs {
	background: var(--e-global-color-altbg);
	padding: clamp(20px, 4vw, 32px) clamp(16px, 4vw, 48px);
}

.single-article__crumbs-inner {
	max-width: 820px;
	margin: 0 auto;
	font-size: 0.8125em;
	color: var(--e-global-color-text);
}

.single-article__crumbs-inner a {
	color: var(--e-global-color-text);
}

.single-article__crumbs-inner .current {
	color: var(--e-global-color-primary);
}

.single-article__head {
	padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 48px) 8px;
}

.single-article__head-inner,
.single-article__body-inner {
	max-width: 820px;
	margin: 0 auto;
}

.single-article__badge {
	display: inline-block;
	background: var(--e-global-color-altbg);
	color: var(--e-global-color-primary);
	font-size: 0.8125em;
	font-weight: 700;
	line-height: 1.6;
	padding: 6px 14px;
	border-radius: 20px;
	margin-bottom: 16px;
}

.single-article__title {
	margin: 0 0 24px;
	color: var(--e-global-color-primary);
}

.single-article__hero {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 32px;
	background: var(--e-global-color-altbg2);
}

.single-article__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-article__hero-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 24px;
	font-size: 0.9375em;
	color: var(--e-global-color-accent);
}

.single-article__body {
	padding: 0 clamp(16px, 4vw, 48px) clamp(40px, 6vw, 64px);
}

/* Post content typography — 16.5px, comfortable rhythm. em keeps it kit-relative. */
.single-article__content {
	font-size: 1.03125em;
	color: var(--e-global-color-text);
}

.single-article__content > * {
	margin: 0 0 18px;
}

.single-article__content > *:last-child {
	margin-bottom: 0;
}

/* Headings inside article content (design: H2 24px, H3 19px, primary). */
.single-article__content h2 {
	margin-top: 14px;
	font-size: 1.5em; /* 24px */
	font-weight: 700;
	color: var(--e-global-color-primary);
}

.single-article__content h3 {
	margin-top: 8px;
	font-size: 1.1875em; /* 19px */
	font-weight: 700;
	color: var(--e-global-color-primary);
}

.single-article__content strong {
	color: var(--e-global-color-primary);
}

.single-article__content a {
	color: var(--e-global-color-primary);
	text-decoration: underline;
}

.single-article__content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Bulleted lists — soft green dot markers (design's "simple list"). */
.single-article__content ul {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.single-article__content ul li {
	position: relative;
	padding-left: 22px;
}

.single-article__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--e-global-color-secondary);
}

/* Numbered lists — filled circle counters (design's ordered/steps list). */
.single-article__content ol {
	list-style: none;
	counter-reset: step;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.single-article__content ol li {
	counter-increment: step;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.single-article__content ol li::before {
	content: counter(step);
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--e-global-color-primary);
	color: #fff;
	font-size: 0.8125em;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Comparison table — primary header, hairline rows, rounded frame, scrolls on
   narrow screens. Matches the design's isTable block; works for the WP table block. */
/* line-height:0 kills the stray ~17px line box the figure renders under the table
   (the table is the only real content, so the figure's own line box shows up as a
   thin empty strip inside the rounded frame). The table restores its own leading. */
.single-article__content figure.wp-block-table {
	margin: 0 0 18px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 12px;
	line-height: 0;
}

.single-article__content figure.wp-block-table > table {
	line-height: 1.6;
	margin: 0;
}

.single-article__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.84375em; /* 13.5px */
}

.single-article__content th,
.single-article__content td {
	padding: 12px 14px;
	text-align: left;
	border-top: 1px solid var(--e-global-color-accent);
	vertical-align: top;
}

.single-article__content thead th {
	background: var(--e-global-color-primary);
	color: #fff;
	font-weight: 700;
	border-top: 0;
	white-space: nowrap;
}

.single-article__content tbody td:first-child {
	background: var(--e-global-color-altbg2);
	color: var(--e-global-color-primary);
	font-weight: 700;
}

/* Closing paragraph (internal links) — it used to sit flush against the FAQ accordion
   above and 12px from the CTA box below, so it read as if it belonged to neither.
   A hairline + real breathing room makes it a closing note of its own. */
.single-article__content .article-closing {
	margin: 34px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--e-global-color-altbg);
}

/* Consult CTA box inside the article. */
.single-article__cta {
	margin-top: 36px;
	padding: 28px;
	background: var(--e-global-color-altbg2);
	border: 1px solid var(--e-global-color-accent);
	border-radius: 16px;
	text-align: center;
}

.single-article__cta h2 {
	margin: 0 0 8px;
	font-size: 1.1875em; /* 19px */
	color: var(--e-global-color-primary);
}

.single-article__cta p {
	margin: 0 0 20px;
	font-size: 0.90625em; /* 14.5px */
	color: var(--e-global-color-text);
}

.single-article__cta-buttons {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

.single-article__cta-buttons a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	border-radius: 10px;
	text-decoration: none;
}

/* Scoped with the wrapper class so these beat Elementor's kit link colour
   (`.elementor-kit-N a`, specificity 0,1,1) — without the extra class the call
   button rendered dark green on green and was almost unreadable. */
.single-article__cta-buttons .single-article__cta-call {
	background: var(--e-global-color-secondary);
	color: #fff;
	padding: 14px 26px;
}

.single-article__cta-buttons .single-article__cta-call:hover {
	color: #fff;
}

.single-article__cta-buttons .single-article__cta-line {
	background: #fff;
	color: var(--e-global-color-primary);
	border: 1px solid var(--e-global-color-primary);
	padding: 13px 24px;
}

/* --------------------------------------------------------------------------
   Article content — highlighted list + closing clinic box
   -------------------------------------------------------------------------- */

/* `hl-list` marks the one "signal / symptom" list that carries an article. Each
   item becomes its own card so readers can scan it, while ordinary bullet lists
   in the same article stay plain text. Works for both <ul> and <ol>. */
.single-article__content .hl-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	counter-reset: hl-item;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.single-article__content .hl-list li {
	position: relative;
	margin: 0;
	padding: 16px 20px 16px 58px;
	background: #fff;
	border: 1px solid var(--e-global-color-bordersoft);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.single-article__content .hl-list li::before {
	position: absolute;
	left: 16px;
	top: 15px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--e-global-color-secondary);
	color: #fff;
	font-size: 0.875em;
	font-weight: 700;
}

/* Numbered source list → numbered badge; bullet list → a check mark. */
.single-article__content ol.hl-list li {
	counter-increment: hl-item;
}

.single-article__content ol.hl-list li::before {
	content: counter(hl-item);
}

.single-article__content ul.hl-list li::before {
	content: "\2713";
}

.single-article__content .hl-list li strong {
	display: block;
	margin-bottom: 2px;
	color: var(--e-global-color-primary);
}

/* Closing clinic/service-area block — a card, matching the Local-SEO block used
   on the Elementor pages, so the article ends on the same visual note. */
.single-article__content .geo-box {
	margin: 36px 0 0;
	padding: 28px 26px;
	background: #F9FBF9;
	border: 1px solid var(--e-global-color-bordersoft);
	border-radius: 16px;
	text-align: center;
}

.single-article__content .geo-box h2 {
	margin: 0 0 10px;
	font-size: 1.1875em; /* 19px */
}

.single-article__content .geo-box p {
	margin: 0;
	font-size: 0.9375em;
}

@media (max-width: 767px) {
	.single-article__content .hl-list li {
		padding: 14px 16px 14px 52px;
	}

	.single-article__content .geo-box {
		padding: 22px 18px;
	}
}

.single-article__related {
	padding: 0 clamp(16px, 4vw, 48px) clamp(48px, 6vw, 72px);
	background: var(--e-global-color-altbg2);
}

.single-article__related-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding-top: clamp(32px, 5vw, 48px);
}

.single-article__related-inner > h2 {
	margin: 0 0 24px;
	font-size: 1.375em; /* 22px */
	color: var(--e-global-color-primary);
}

.single-article__related-grid {
	max-width: 780px;
}

/* ==========================================================================
   FAQ accordion ([faq_accordion]) — native <details>, no JS
   ========================================================================== */

.faq-accordion {
	max-width: 820px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.faq-item {
	background: #fff;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 14px;
	overflow: hidden;
}

.faq-q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	font-size: 1.0625em;
	font-weight: 700;
	color: var(--e-global-color-primary);
}

/* Hide the browser's default disclosure triangle (both engines). */
.faq-q::-webkit-details-marker {
	display: none;
}

/* +/− affordance that flips when the item opens. */
.faq-q::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.5em;
	font-weight: 400;
	line-height: 1;
	color: var(--e-global-color-secondary);
}

.faq-item[open] .faq-q::after {
	content: "\2212"; /* − */
}

.faq-a {
	padding: 0 24px 20px;
	font-size: 0.9375em;
	color: var(--e-global-color-text);
}

.faq-a p {
	margin: 0;
}

/* Price rows inside a [checkup_bloodtest] accordion panel — name left, price right. */
.bt-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bt-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid var(--e-global-color-altbg);
}

.bt-list li:first-child {
	border-top: 0;
}

.bt-name {
	font-size: 0.9375em;
	color: var(--e-global-color-text);
}

.bt-price {
	flex: 0 0 auto;
	font-size: 0.9375em;
	font-weight: 700;
	white-space: nowrap;
	color: var(--e-global-color-primary);
}

/* ==========================================================================
   Footer — thin single row: logo + phone · LINE · map · hours, then copyright
   ========================================================================== */

#ftr-wrap {
	text-align: center;
}

/* Brand mark on a white rounded chip so it reads on the dark bar. */
#ftr-brand .site-logo__link {
	justify-content: center;
}

#ftr-brand .site-logo__mark {
	width: 38px;
	height: 38px;
	background: #fff;
	border-radius: 8px;
	padding: 3px;
	object-fit: contain;
}

#ftr-brand .site-logo__name {
	font-size: 1.0625em;
	font-weight: 700;
	color: var(--e-global-color-ondark);
}

/* Hours sit right after the name. */
#ftr-hours {
	color: var(--e-global-color-ondark);
}

/* Contact icon-list (inline). Links inherit the kit's primary colour (unreadable on
   the dark bar), so force the on-dark global on both text and icons. */
#ftr-contact a,
#ftr-contact .elementor-icon-list-text,
#ftr-contact .elementor-icon-list-icon i {
	color: var(--e-global-color-ondark);
}

/* Tighten the icon → text gap — the icon-list default reads too far apart. */
#ftr-contact .elementor-icon-list-icon {
	padding-right: 5px;
}

#ftr-contact .elementor-icon-list-text {
	padding-inline-start: 0;
}

#ftr-contact .elementor-icon-list-item {
	margin-right: 18px;
}

#ftr-contact .elementor-icon-list-item:last-child {
	margin-right: 0;
}

#ftr-contact a:hover .elementor-icon-list-text {
	text-decoration: underline;
}

/* On a phone the row stacks; keep the contact items left-tidy and centred. */
@media (max-width: 600px) {
	#ftr-contact .elementor-icon-list-items.elementor-inline-items {
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}

	#ftr-contact .elementor-icon-list-item {
		margin-right: 0;
	}
}

/* ==========================================================================
   Hamburger
   Hello Elementor styles EVERY <button> with a pink #c36 border plus hover/focus
   fills, which the burger inherits — so background/border/outline/box-shadow are
   reset in all states, not just the default one.
   ========================================================================== */

.site-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
}

.site-burger,
.site-burger:hover,
.site-burger:focus,
.site-burger:active,
.site-burger:focus-visible {
	background: transparent;
	border: 0;
	outline: 0;
	box-shadow: none;
}

.site-burger__bar {
	display: block;
	width: 24px;
	height: 2px;
	margin: 0 auto;
	background: var(--e-global-color-primary);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Bars animate into an X while the dropdown is open. */
.site-burger.is-open .site-burger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-burger.is-open .site-burger__bar:nth-child(2) {
	opacity: 0;
}

.site-burger.is-open .site-burger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Mobile / tablet nav — matches Elementor's 767px breakpoint
   ========================================================================== */

@media (max-width: 767px) {
	.site-burger {
		display: flex;
	}

	/* Logo + Tel + Line + burger do not fit on one 390px row (measured 582px).
	   Collapse the CTAs to icon-only so both actions survive and the header stays
	   a single row — the labels are decorative, the icons are self-evident. */
	#hdr-cta .elementor-button-text {
		display: none;
	}

	#hdr-cta .elementor-button-icon {
		margin: 0;
	}

	#hdr-cta .elementor-button {
		padding: 10px 12px;
	}

	#hdr-row {
		--e-con-gap: 12px;
	}

	#hdr-cta {
		gap: 8px;
	}

	/* The Shortcode widget wrapping the nav must not keep its desktop width. */
	#hdr-nav {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		display: none;
		background: #fff;
		border-bottom: 1px solid var(--e-global-color-accent);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	}

	#hdr-nav.is-open {
		display: block;
	}

	/* Reset the flex row inherited from desktop, or the dropdown hugs the right
	   at half width instead of filling the sheet. */
	#hdr-nav .site-nav {
		display: block;
		width: 100%;
	}

	#hdr-nav .site-nav__list {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
	}

	#hdr-nav .site-nav__list a {
		padding: 14px 24px;
		border-top: 1px solid var(--e-global-color-altbg2);
	}

	/* Services dropdown on mobile = an accordion inside the sheet. Tapping "บริการ"
	   expands it (header.js) instead of navigating, so 15 sub-items don't make the
	   sheet a mile long. The parent page stays reachable via "ดูบริการทั้งหมด". */
	#hdr-nav .site-nav__list .sub-menu {
		position: static;
		display: none;
		transform: none;
		opacity: 1;
		visibility: visible;
		width: 100%;
		max-width: none;
		columns: 1;
		margin: 0;
		padding: 0;
		background: var(--e-global-color-altbg2);
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	#hdr-nav .site-nav__list .menu-item-has-children.is-expanded > .sub-menu {
		display: block;
	}

	/* The desktop hover-bridge would sit on top of the sheet's links. */
	#hdr-nav .site-nav__list .menu-item-has-children::after {
		content: none;
	}

	#hdr-nav .site-nav__list .sub-menu a {
		padding: 12px 24px 12px 40px;
		font-weight: 400;
		white-space: normal;
		border-radius: 0;
	}

	#hdr-nav .site-nav__list .sub-menu .nav-group > a {
		margin: 0;
		padding: 12px 24px 6px;
		border-bottom: 0;
		color: var(--e-global-color-accent);
	}

	#hdr-nav .site-nav__list .sub-menu .nav-group--skin {
		break-before: auto;
	}

	/* Caret flips when the accordion is open. */
	#hdr-nav .site-nav__list .menu-item-has-children.is-expanded > a::after {
		transform: rotate(180deg);
	}
}

/* ==========================================================================
   Acne-treatment page (รักษาสิว — แผนกผิวหนัง)
   ========================================================================== */

/* Hero title STAYS an <h1> (SEO/AEO) but is sized down to the kit's H2 scale — CSS only. */
#acne-title .elementor-heading-title,
#acnescar-title .elementor-heading-title,
#melasma-title .elementor-heading-title,
#mole-title .elementor-heading-title,
#ipl-title .elementor-heading-title,
#ivdrip-title .elementor-heading-title,
#botox-title .elementor-heading-title,
#filler-title .elementor-heading-title,
#ultraformer-title .elementor-heading-title,
#laser-title .elementor-heading-title,
#meso-title .elementor-heading-title,
#facial-title .elementor-heading-title {
	font-size: 2.25em; /* 36px */
	line-height: 1.3;
}

@media (max-width: 1024px) {
	#acne-title .elementor-heading-title,
	#acnescar-title .elementor-heading-title,
	#melasma-title .elementor-heading-title,
	#mole-title .elementor-heading-title,
	#ipl-title .elementor-heading-title,
	#ivdrip-title .elementor-heading-title,
	#botox-title .elementor-heading-title,
	#filler-title .elementor-heading-title,
	#ultraformer-title .elementor-heading-title,
	#laser-title .elementor-heading-title,
	#meso-title .elementor-heading-title,
	#facial-title .elementor-heading-title {
		font-size: 1.875em; /* 30px */
	}
}

@media (max-width: 767px) {
	#acne-title .elementor-heading-title,
	#acnescar-title .elementor-heading-title,
	#melasma-title .elementor-heading-title,
	#mole-title .elementor-heading-title,
	#ipl-title .elementor-heading-title,
	#ivdrip-title .elementor-heading-title,
	#botox-title .elementor-heading-title,
	#filler-title .elementor-heading-title,
	#ultraformer-title .elementor-heading-title,
	#laser-title .elementor-heading-title,
	#meso-title .elementor-heading-title,
	#facial-title .elementor-heading-title {
		font-size: 1.625em; /* 26px */
	}
}

#acne-hero-intro p,
#acnescar-hero-intro p,
#melasma-hero-intro p,
#mole-hero-intro p,
#ipl-hero-intro p,
#ivdrip-hero-intro p,
#botox-hero-intro p,
#filler-hero-intro p,
#ultraformer-hero-intro p,
#laser-hero-intro p,
#meso-hero-intro p,
#facial-hero-intro p {
	max-width: 880px;
	margin-inline: auto;
}

/* Filler price table — set name above its brand line in the first column. */
.filler-set {
	display: block;
}

.filler-brand {
	display: block;
	margin-top: 2px;
	font-size: 0.8125em;
	font-weight: 500;
	white-space: normal;
	color: var(--e-global-color-accent);
}

/* Review cards — image on top, caption below, soft shadow (owner brief). */
.acne-reviews {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
}

.acne-review {
	margin: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--e-global-color-bordersoft);
	border-radius: 18px;
	overflow: hidden;
	/* Deeper but tight-spread shadow — darker and less diffuse so the frame reads as
	   clearly lifted off the page (owner's reference: stronger, not wider). */
	box-shadow: 0 7px 16px rgba(0, 0, 0, 0.28), 0 2px 5px rgba(0, 0, 0, 0.18);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.acne-review:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 22px rgba(0, 0, 0, 0.32), 0 3px 7px rgba(0, 0, 0, 0.20);
}

.acne-review__media {
	display: block;
	background: var(--e-global-color-altbg2);
}

.acne-review__img {
	display: block;
	width: 100%;
	height: auto;
}

.acne-review__placeholder {
	display: flex;
	width: 100%;
	min-height: 220px;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	font-size: 0.875em;
	color: var(--e-global-color-accent);
}

.acne-review__cap {
	padding: 14px 16px;
	font-size: 0.875em;
	line-height: 1.55;
	color: var(--e-global-color-text);
}

/* Centred layouts when a page has fewer than the usual four review images. */
.acne-reviews--single {
	grid-template-columns: minmax(0, 480px);
	justify-content: center;
}

.acne-reviews--pair {
	grid-template-columns: repeat(2, minmax(0, 430px));
	justify-content: center;
}

/* Five images: four fill the first row, the fifth is centred under them instead of
   hugging the left edge. */
.acne-reviews--five > .acne-review:nth-child(5) {
	grid-column: 2 / span 2;
	justify-self: center;
	/* Spanning two tracks recentres the card; this width shrinks it back to exactly
	   one track (half the span minus half the gap) so it matches the row above. */
	width: calc(50% - 10px);
}

@media (max-width: 1024px) {
	.acne-reviews {
		grid-template-columns: repeat(2, 1fr);
	}
	.acne-reviews--single {
		grid-template-columns: minmax(0, 480px);
	}
	.acne-reviews--pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Two columns → the fifth card is the orphan again, so span both. */
	.acne-reviews--five > .acne-review:nth-child(5) {
		grid-column: 1 / span 2;
	}
}

@media (max-width: 560px) {
	.acne-reviews,
	.acne-reviews--single,
	.acne-reviews--pair {
		grid-template-columns: 1fr;
	}
	.acne-reviews--five > .acne-review:nth-child(5) {
		grid-column: auto;
		width: auto;
	}
}

/* Programme comparison table — scrolls horizontally on small screens. */
.acne-table-wrap {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--e-global-color-bordersoft);
	border-radius: 14px;
}

.acne-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: 0.9375em;
	background: #fff;
}

.acne-table th,
.acne-table td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--e-global-color-altbg);
}

.acne-table thead th {
	background: var(--e-global-color-secondary);
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
}

.acne-table tbody tr:last-child th,
.acne-table tbody tr:last-child td {
	border-bottom: 0;
}

.acne-table__name {
	font-weight: 700;
	color: var(--e-global-color-primary);
	white-space: nowrap;
}

.acne-table__promo {
	font-weight: 700;
	color: var(--e-global-color-secondary);
	white-space: nowrap;
}

.acne-table__normal {
	color: var(--e-global-color-accent);
	text-decoration: line-through;
	white-space: nowrap;
}

/* Step-by-step numbered list. */
.acne-steps {
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	counter-reset: acne-step;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.acne-step {
	position: relative;
	counter-increment: acne-step;
	padding: 18px 20px 18px 68px;
	background: #fff;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 14px;
}

.acne-step::before {
	content: counter(acne-step);
	position: absolute;
	left: 18px;
	top: 18px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--e-global-color-secondary);
	color: #fff;
	font-weight: 700;
}

.acne-step__lead {
	display: block;
	color: var(--e-global-color-primary);
	font-weight: 700;
	margin-bottom: 4px;
}

.acne-step__desc {
	display: block;
	font-size: 0.9375em;
	color: var(--e-global-color-text);
}

/* Table disclaimer note (acne-scar programmes). */
.acne-table__note {
	max-width: 100%;
	margin: 14px 0 0;
	font-size: 0.8125em;
	line-height: 1.6;
	color: var(--e-global-color-accent);
}

/* Melasma programme table — grouped tier rows + wrapping detail column. */
.melasma-table {
	min-width: 640px;
}

.melasma-group th {
	background: var(--e-global-color-altbg);
	color: var(--e-global-color-primary);
	font-weight: 700;
	text-align: left;
	white-space: normal;
}

.melasma-detail {
	white-space: normal;
	color: var(--e-global-color-text);
}

/* IPL price columns — per-session (neutral) and course (highlighted). */
.ipl-per {
	white-space: nowrap;
	font-weight: 600;
	color: var(--e-global-color-text);
}

.ipl-course {
	white-space: nowrap;
	font-weight: 700;
	color: var(--e-global-color-secondary);
}

/* A-La-Carte add-ons — a plain list, deliberately NOT cards (one card list per page). */
.melasma-alacarte {
	max-width: 860px;
	margin: 0 auto;
	padding-left: 22px;
}

.melasma-alacarte li {
	margin-bottom: 8px;
	color: var(--e-global-color-text);
}

.melasma-alacarte strong {
	color: var(--e-global-color-primary);
}

.alacarte-price {
	font-weight: 700;
	white-space: nowrap;
	color: var(--e-global-color-secondary);
}

.melasma-sub {
	max-width: 860px;
	margin: 32px auto 16px;
	text-align: center;
	font-size: 1.25em; /* 20px */
	font-weight: 700;
	color: var(--e-global-color-primary);
}

/* Acne-scar / melasma techniques list (name + optional price badge + description). */
.scar-techs {
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.scar-tech {
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 14px;
}

.scar-tech__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 6px;
}

.scar-tech__name {
	font-weight: 700;
	color: var(--e-global-color-primary);
}

.scar-tech__price {
	flex: 0 0 auto;
	font-weight: 700;
	white-space: nowrap;
	color: var(--e-global-color-secondary);
}

.scar-tech__desc {
	margin: 0;
	font-size: 0.9375em;
	color: var(--e-global-color-text);
}

/* Knowledge-base section hides itself until a "รอบรู้เรื่องสิว" post exists.
   Front end only — stays visible in the Elementor editor. */
body.no-acne-articles #acne-knowledge {
	display: none;
}