/*
Theme Name: C Derma
Theme URI: https://cccdermastageing.permaiserver.com
Author: Ciputra Healthcare
Author URI: https://cderma.id
Description: Custom block theme for C Derma — Dermatology & Aesthetic Center. Modern skincare and dermatology care.
Version: 1.2.13
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cderma
Tags: full-site-editing, block-patterns, custom-colors, custom-fonts
*/

/* ==========================================================================
   Sticky Header — scroll behavior
   ========================================================================== */

/* When JS activates scroll tracking, switch to fixed positioning */
header.wp-block-group.header--scrolled {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	transition: transform 0.35s ease-in-out;
}

/* Scrolling down — slide header off-screen */
header.wp-block-group.header--hidden {
	transform: translateY(-100%);
}

/* Scrolling up, away from top — compact header */
header.wp-block-group.header--compact .wp-block-site-logo img {
	width: 150px !important;
	height: auto !important;
}

header.wp-block-group.header--compact > .wp-block-group {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

/* Desktop expanded: bottom-align nav so logo dominates top, nav sits at bottom */
@media (min-width: 1200px) {
	header.wp-block-group:not(.header--compact) > .wp-block-group > .wp-block-group {
		align-items: flex-end !important;
	}

	header.wp-block-group.header--compact > .wp-block-group > .wp-block-group {
		align-items: center !important;
	}
}

/* Nav + CTA group fills remaining space so nav can push to right edge */
@media (min-width: 1200px) {
	header.wp-block-group .wp-block-group:has(> .wp-block-navigation) {
		flex: 1 !important;
	}
}

/* Force inline nav display on desktop (overrides overlayMenu:"always") */
@media (min-width: 1200px) {
	.wp-block-navigation__responsive-container {
		display: flex !important;
		position: static !important;
		width: auto !important;
		height: auto !important;
		overflow: visible !important;
		background: transparent !important;
		padding: 0 !important;
	}
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		display: none !important;
	}
}

/* Push nav to the right within the expanded group */
header.wp-block-group .wp-block-navigation {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* Backdrop for compact/scrolled header */
header.wp-block-group.header--scrolled > .wp-block-group {
	background-color: #fff !important;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Header — Mobile Layout (≤1099px)
   ========================================================================== */

@media (max-width: 1199px) {
	/* Reduce header padding on mobile */
	header.wp-block-group > .wp-block-group {
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	/* Dissolve Nav+CTA group so hamburger, logo, and CTAs are all
	   direct flex participants of the Header Row */
	header.wp-block-group .wp-block-group:has(> .wp-block-navigation) {
		display: contents;
	}

	/* Hamburger — leftmost, tight against logo */
	header.wp-block-group .wp-block-navigation {
		order: -1;
		margin: 0 !important;
	}

	/* Logo — pull close to hamburger (counteract the 32px row gap) */
	header.wp-block-group .wp-block-site-logo {
		order: 0;
		flex: 1 1 0%;
		min-width: 120px;
		margin-left: -24px !important;
	}

	header.wp-block-group .wp-block-site-logo img {
		height: 48px !important;
		width: auto !important;
		max-width: 100%;
		object-fit: contain;
	}

	/* CTAs — rightmost */
	header.wp-block-group .header-ctas {
		order: 2;
		margin-left: auto;
		flex-shrink: 0;
	}

	/* Custom hamburger icon — 3 teal rounded lines (top/bottom wider, middle shorter) */
	header.wp-block-group .wp-block-navigation__responsive-container-open {
		background: none !important;
		border: none !important;
		padding: 0 !important;
		width: 28px;
		height: 28px;
	}

	header.wp-block-group .wp-block-navigation__responsive-container-open svg {
		display: none !important;
	}

	header.wp-block-group .wp-block-navigation__responsive-container-open::before {
		content: "";
		display: block;
		width: 28px;
		height: 28px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect x='4' y='7' width='20' height='2.5' rx='1.25' fill='%238c7332'/%3E%3Crect x='4' y='13' width='16' height='2.5' rx='1.25' fill='%238c7332'/%3E%3Crect x='4' y='19' width='20' height='2.5' rx='1.25' fill='%238c7332'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-size: 28px 28px;
	}

}

/* ==========================================================================
   Header — Mobile Navigation Overlay
   ========================================================================== */

@media (max-width: 1199px) {
	/* Full-screen overlay background */
	.wp-block-navigation__responsive-container.is-menu-open {
		background-color: #fff !important;
		padding: 0 !important;
	}

	/* Overlay content wrapper */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 72px 24px 0;
		display: flex !important;
		flex-direction: column !important;
		gap: 0;
		align-items: stretch !important;
	}

	/* Nav list inside overlay — left-align items */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch !important;
		text-align: left;
	}

	/* All nav items — override WP default column + center alignment */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: stretch !important;
	}

	/* Reset letter-spacing inherited from desktop nav block */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		letter-spacing: 0 !important;
	}

	/* Kill focus outline on nav links in overlay */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		outline: none;
		box-shadow: none;
	}

	/* === Level 1: Top-level nav items === */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
		font-size: 17px !important;
		font-weight: 600 !important;
		color: var(--wp--preset--color--heading, #262626);
		padding: 14px 0 !important;
		display: block;
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--border, #ece9df);
		text-decoration: none;
		text-align: left;
	}

	/* Parent items with submenus — flex row for label + chevron */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		flex: 1;
		border-bottom: none;
	}

	/* Submenu toggle chevron button */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		background: transparent !important;
		border: none !important;
		outline: none !important;
		box-shadow: none !important;
		cursor: pointer;
		color: #94a3b8;
		transition: transform 0.25s ease, color 0.25s ease;
		flex-shrink: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		width: 10px;
		height: 10px;
		stroke-width: 1.2;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
		transform: rotate(180deg);
		color: var(--wp--preset--color--primary, #bca443);
	}

	/* Add bottom border to the parent row (submenu item wrapper) */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
		border-bottom: 1px solid var(--wp--preset--color--border, #ece9df);
	}

	/* Hide floating WhatsApp bubble when overlay is open */
	.wp-block-navigation__responsive-container.is-menu-open ~ *,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) a[aria-label="Chat on WhatsApp"] {
		z-index: auto;
	}

	body:has(.wp-block-navigation__responsive-container.is-menu-open) a[aria-label="Chat on WhatsApp"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .floating-cta {
		display: none !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item--current .wp-block-navigation-item__content {
		color: var(--wp--preset--color--primary, #bca443);
	}

	/* Submenu containers — collapsed by default, accordion style */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent !important;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		min-width: unset !important;
		position: static !important;
		width: 100% !important;
		display: none !important;
		overflow: hidden;
	}

	/* Show submenu when toggle is expanded */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
		display: block !important;
	}

	/* === Level 2: Sub-category headers (e.g. Program Hamil) === */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 15px !important;
		font-weight: 500 !important;
		color: var(--wp--preset--color--nav, #57534a);
		padding: 12px 0 12px 20px !important;
		border-bottom-color: rgba(0, 0, 0, 0.06);
	}

	/* === Level 3: Leaf service links (e.g. Bayi Tabung, ICSI) === */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 14px !important;
		font-weight: 400 !important;
		color: #78869b;
		padding-left: 40px !important;
	}

	/* Nested submenu parent items — smaller chevron area */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
		width: 36px;
		height: 36px;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-submenu {
		border-bottom-color: rgba(0, 0, 0, 0.06);
	}

	/* Close button — style as X in top-right */
	.wp-block-navigation__responsive-container-close {
		position: fixed !important;
		top: 12px;
		right: 16px;
		z-index: 100;
		background: transparent !important;
		border: none;
		color: var(--wp--preset--color--heading, #262626) !important;
	}

	/* Hide the "Buat Janji" button inside the overlay (it's already in the header bar) */
	.wp-block-navigation__responsive-container.is-menu-open .header-ctas {
		display: none;
	}
}

/* Mobile overlay AI Quiz CTA — hidden on desktop, shown in overlay */
.mobile-overlay-quiz-cta {
	display: none !important;
}

@media (max-width: 1199px) {
	.wp-block-navigation__responsive-container.is-menu-open .mobile-overlay-quiz-cta {
		display: block !important;
		margin: 0 !important;
	}
}

.mobile-quiz-card {
	background: var(--wp--preset--color--primary-surface);
	border: 1px solid rgba(140, 115, 50, 0.22);
	border-radius: 20px;
	padding: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.mobile-quiz-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-quiz-card__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	margin: 0;
}

.mobile-quiz-card__desc {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	line-height: 1.38;
	color: var(--wp--preset--color--heading);
	margin: 0;
	opacity: 0.7;
}

.mobile-quiz-card__btn {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background: var(--wp--preset--color--primary);
	color: #fff !important;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
	transition: background-color 0.2s;
}

.mobile-quiz-card__btn:hover,
.mobile-quiz-card__btn:focus {
	background: #005153;
	color: #fff !important;
}

/* Mobile overlay bottom CTAs — hidden on desktop, shown in overlay */
.mobile-overlay-ctas {
	display: none !important;
}

@media (max-width: 1199px) {
	.wp-block-navigation__responsive-container.is-menu-open .mobile-overlay-ctas {
		display: flex !important;
		align-items: stretch !important;
		border-radius: 0;
		margin: 0 !important;
		padding: 16px 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .mobile-overlay-ctas .wp-block-buttons {
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open .mobile-overlay-ctas .wp-block-button__link {
		padding: 12px 24px !important;
		font-size: 15px !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .mobile-overlay-ctas .wp-block-button__link.has-primary-gradient-gradient-background {
		background: var(--wp--preset--color--primary) !important;
	}
}

/* ==========================================================================
   Navigation — Submenu Dropdown
   ========================================================================== */

.wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
	padding: 8px 0;
	min-width: 240px;
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 20px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--wp--preset--color--body, #3c4043);
	transition: color 0.15s ease, background 0.15s ease;
	display: block;
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary, #bca443);
	background: var(--wp--preset--color--surface, #f4f8f8);
}

/* ==========================================================================
   Single Post — In-Content Headings (teal)
   ========================================================================== */

.single .wp-block-post-content h2,
.single .wp-block-post-content h3,
.single .wp-block-post-content h4 {
	color: var(--wp--preset--color--primary, #bca443);
}

/* ==========================================================================
   Single Post — Category Pill
   ========================================================================== */

.wp-block-post-terms.is-style-pill {
	display: inline-block !important;
}

/* ==========================================================================
   Single Post — Author & Date
   ========================================================================== */

.cderma-post-author .wp-block-post-author__avatar img {
	border-radius: 9999px;
	border: 2px solid var(--wp--preset--color--primary-light, #d8c98a);
	object-fit: cover;
}

.cderma-post-author .wp-block-post-author__name {
	white-space: nowrap;
}

/* ==========================================================================
   Related Posts (rp4wp plugin) — "Artikel Terkait"
   ========================================================================== */

.rp4wp-related-posts {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--wp--preset--color--border, #ece9df);
}

.rp4wp-related-posts > h3 {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--heading, #262626);
	letter-spacing: -0.01em;
	margin: 0 0 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.rp4wp-related-posts > h3::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 1.25rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--primary, #bca443);
	flex-shrink: 0;
}

.rp4wp-related-posts > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}

.rp4wp-related-posts > ul > li:nth-child(n+7) {
	display: none;
}

.rp4wp-related-posts > ul > li {
	background: var(--wp--preset--color--white, #fff);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(25, 28, 29, 0.05);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	display: flex;
	flex-direction: column;
}

.rp4wp-related-posts > ul > li:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 36px rgba(25, 28, 29, 0.08);
	transform: translateY(-2px);
}

.rp4wp-related-posts .rp4wp-related-post-image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.rp4wp-related-posts .rp4wp-related-post-image a {
	display: block;
	height: 100%;
}

.rp4wp-related-posts .rp4wp-related-post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.rp4wp-related-posts > ul > li:hover .rp4wp-related-post-image img {
	transform: scale(1.04);
}

.rp4wp-related-posts .rp4wp-related-post-content {
	padding: 1rem 1.25rem 1.25rem;
}

.rp4wp-related-posts .rp4wp-related-post-content a {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--heading, #262626);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

.rp4wp-related-posts .rp4wp-related-post-content a:hover {
	color: var(--wp--preset--color--primary, #bca443);
}

@media (max-width: 600px) {
	.rp4wp-related-posts {
		margin-top: 1.5rem;
		padding-top: 1.5rem;
	}

	.rp4wp-related-posts > ul {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.rp4wp-related-posts > ul > li {
		flex-direction: row;
		border-radius: 16px;
		padding-bottom: 0 !important;
	}

	.rp4wp-related-posts .rp4wp-related-post-image {
		width: 110px !important;
		min-height: 110px;
		aspect-ratio: auto;
		flex-shrink: 0;
		margin-bottom: 0 !important;
	}

	.rp4wp-related-posts .rp4wp-related-post-content {
		padding: 0.875rem 1rem;
		display: flex;
		align-items: center;
		min-width: 0;
	}

	.rp4wp-related-posts .rp4wp-related-post-content a {
		-webkit-line-clamp: 3;
	}
}

/* ==========================================================================
   Blog Archive + Category — Hero
   ========================================================================== */

@media (min-width: 769px) {
	.archive-hero,
	.category-hero {
		min-height: 280px;
		display: flex;
		align-items: center;
	}
}

@media (max-width: 768px) {
	.archive-hero h1,
	.category-hero h1 {
		font-size: 32px !important;
	}
}

/* ==========================================================================
   Blog Archive — Category Filter Pills
   ========================================================================== */

/* All pills: make link fill entire pill for full click target */
.category-filter-bar .filter-pill {
	padding: 0 !important;
	border-radius: 12px;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.category-filter-bar .filter-pill a {
	display: block;
	padding: 12px 24px;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.category-filter-bar .filter-pill p {
	pointer-events: none;
}

.category-filter-bar .filter-pill a {
	pointer-events: auto;
}

/* Inactive pills — subtle border for definition */
.category-filter-bar .filter-pill {
	border: 1px solid rgba(140, 115, 50, 0.08);
}

/* Blog home (/artikel/) → "Semua Artikel" active */
.blog .filter-pill-all {
	background-color: var(--wp--preset--color--primary, #bca443) !important;
	border-color: transparent;
	box-shadow: 0 2px 8px rgba(140, 115, 50, 0.25);
}
.blog .filter-pill-all p,
.blog .filter-pill-all a {
	color: #ffffff !important;
}

/* Category pages → matching pill active */
.category-perawatan-botox .filter-pill-perawatan-botox,
.category-event .filter-pill-event,
.category-penyakit-kulit .filter-pill-penyakit-kulit,
.category-flek-hitam .filter-pill-flek-hitam,
.category-perawatan-wajah .filter-pill-perawatan-wajah,
.category-laser-tindakan .filter-pill-laser-tindakan,
.category-pengencangan .filter-pill-pengencangan {
	background-color: var(--wp--preset--color--primary, #bca443) !important;
	border-color: transparent;
	box-shadow: 0 2px 8px rgba(140, 115, 50, 0.25);
}

.category-perawatan-botox .filter-pill-perawatan-botox p,
.category-perawatan-botox .filter-pill-perawatan-botox a,
.category-event .filter-pill-event p,
.category-event .filter-pill-event a,
.category-penyakit-kulit .filter-pill-penyakit-kulit p,
.category-penyakit-kulit .filter-pill-penyakit-kulit a,
.category-flek-hitam .filter-pill-flek-hitam p,
.category-flek-hitam .filter-pill-flek-hitam a,
.category-perawatan-wajah .filter-pill-perawatan-wajah p,
.category-perawatan-wajah .filter-pill-perawatan-wajah a,
.category-laser-tindakan .filter-pill-laser-tindakan p,
.category-laser-tindakan .filter-pill-laser-tindakan a,
.category-pengencangan .filter-pill-pengencangan p,
.category-pengencangan .filter-pill-pengencangan a {
	color: #ffffff !important;
}

/* On category pages, "Semua Artikel" should NOT be active */
.category .filter-pill-all {
	background-color: transparent !important;
	border-color: rgba(140, 115, 50, 0.08);
	box-shadow: none;
}
.category .filter-pill-all p,
.category .filter-pill-all a {
	color: var(--wp--preset--color--body, #3c4043) !important;
}

/* Hover state — only for inactive pills */
.blog .category-filter-bar .filter-pill:not(.filter-pill-all):hover,
.category .category-filter-bar .filter-pill:hover {
	background-color: var(--wp--preset--color--surface, #f4f8f8) !important;
	border-color: rgba(140, 115, 50, 0.15);
}

/* Active pills keep primary bg on hover */
.blog .filter-pill-all:hover,
.category-perawatan-kulit .filter-pill-perawatan-kulit:hover,
.category-psoriasis .filter-pill-psoriasis:hover,
.category-perawatan-botox .filter-pill-perawatan-botox:hover,
.category-event .filter-pill-event:hover,
.category-penting-diketahui .filter-pill-penting-diketahui:hover {
	background-color: var(--wp--preset--color--primary, #bca443) !important;
	border-color: transparent;
}

/* Desktop: constrain the pill bar to 1120px so its left/right edges
   align with the condition-index cards directly below (which use
   .condition-index__inner { max-width:1120px }). Without this it
   would inherit var:spacing|40 margins and stick out ~80px on each side. */
@media (min-width: 769px) {
	.category-filter-bar {
		max-width: 1120px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Mobile: two-row wrap — "Semua Artikel" full-width primary, categories wrap as chips below.
   On mobile the column order becomes: breadcrumb → pill bar → hero → rest, via flex `order`. */
@media (max-width: 768px) {
	main.wp-block-group {
		display: flex;
		flex-direction: column;
	}

	.archive-breadcrumb {
		order: -2;
	}

	.category-filter-bar {
		flex-wrap: wrap !important;
		gap: 8px !important;
		padding: 12px !important;
		margin-top: 8px !important;
		margin-left: 16px !important;
		margin-right: 16px !important;
		border-radius: 14px !important;
		position: relative !important;
		z-index: 1 !important;
		overflow: visible;
		order: -1;
	}

	/* "Semua Artikel" — full-width primary row */
	.category-filter-bar .filter-pill-all {
		flex: 0 0 100%;
		border-radius: 12px;
		white-space: nowrap;
	}

	.category-filter-bar .filter-pill-all a {
		padding: 12px 16px;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
	}

	/* Category chips — auto width, wrap freely below */
	.category-filter-bar .filter-pill:not(.filter-pill-all) {
		flex: 0 0 auto;
		border-radius: 14px;
		white-space: nowrap;
	}

	.category-filter-bar .filter-pill:not(.filter-pill-all) a {
		padding: 8px 14px;
		font-size: 12px;
	}

	/* Reduce gap between pill bar and article grid */
	.category-filter-bar + .wp-block-group {
		padding-top: 32px !important;
	}
}

/* ==========================================================================
   Blog Archive — Mobile Article List (vertical list with thumbnails)
   ========================================================================== */

@media (max-width: 768px) {
	/* Switch from 3-col grid to single column list */
	.wp-block-query .wp-block-post-template {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}

	/* Each article card: horizontal row layout */
	.wp-block-query .wp-block-post-template > .wp-block-post > .wp-block-group {
		display: flex !important;
		flex-direction: row !important;
		border-radius: 0 !important;
		overflow: visible !important;
		border-bottom: 1px solid rgba(190, 201, 200, 0.25);
		padding: 16px 0 !important;
		background: transparent !important;
	}

	/* Thumbnail: small fixed square on left */
	.wp-block-query .wp-block-post-template .wp-block-post-featured-image {
		width: 100px !important;
		min-width: 100px;
		height: 100px !important;
		flex-shrink: 0;
		margin: 0 !important;
		border-radius: 12px;
		overflow: hidden;
	}

	/* Fill the square thumbnail. The height must be an absolute value (not 100%):
	   the post-featured-image block writes an inline height:256px on the <img>,
	   and a percentage height can't resolve against the auto-height <a> wrapper,
	   so the inline 256px would win and leave the image a clipped sliver. */
	.wp-block-query .wp-block-post-template .wp-block-post-featured-image img {
		width: 100% !important;
		height: 100px !important;
		object-fit: cover;
		object-position: center;
	}

	/* Content area: flows to the right */
	.wp-block-query .wp-block-post-template > .wp-block-post > .wp-block-group > .wp-block-group:not(:first-child) {
		padding: 0 0 0 14px !important;
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* Title: compact sizing */
	.wp-block-query .wp-block-post-template .wp-block-post-title {
		font-size: 15px !important;
		line-height: 1.35 !important;
		margin-top: 8px !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Category badge: smaller */
	.wp-block-query .wp-block-post-template .wp-block-post-terms {
		font-size: 9px !important;
		padding: 3px 8px !important;
	}

	/* Excerpt: compact, clamp to 2 lines */
	.wp-block-query .wp-block-post-template .wp-block-post-excerpt {
		margin-top: 6px !important;
		font-size: 13px !important;
		line-height: 1.5 !important;
	}

	.wp-block-query .wp-block-post-template .wp-block-post-excerpt__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Hide the date/read-more footer row on mobile */
	.wp-block-query .wp-block-post-template > .wp-block-post > .wp-block-group > .wp-block-group:last-child > .wp-block-group:last-child {
		display: none;
	}

	/* Reduce outer section padding on mobile */
	.wp-block-query .wp-block-post-template + .wp-block-group {
		margin-top: var(--wp--preset--spacing--40) !important;
	}

	/* Tighten article grid section margins on mobile */
	.wp-block-group:has(> .wp-block-query) {
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 24px !important;
		padding-bottom: 40px !important;
	}
}

/* ==========================================================================
   Homepage — Service Cards (Bold & Modern)
   ========================================================================== */

.service-card-header {
	position: relative;
	height: 120px;
	background: linear-gradient(135deg, #bca443 0%, #008c8e 100%);
	display: flex;
	align-items: center;
	padding-left: 28px;
	overflow: hidden;
}

.service-card-icon {
	position: relative;
	z-index: 1;
}

.service-card-deco {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}

.service-card-deco-1 {
	width: 80px;
	height: 80px;
	right: -10px;
	top: -20px;
}

.service-card-deco-2 {
	width: 40px;
	height: 40px;
	right: 10px;
	bottom: -5px;
	background: rgba(255, 255, 255, 0.06);
}

.service-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12), 0px 2px 8px 0px rgba(0, 0, 0, 0.06) !important;
}

@media (max-width: 782px) {
	.service-card-header {
		height: 70px;
	}
}

/* ==========================================================================
   Homepage — Articles Carousel
   ========================================================================== */

.cderma-articles-carousel .cderma-carousel-track {
	display: flex !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 24px;
	padding-bottom: 8px;
}

.cderma-articles-carousel .cderma-carousel-track::-webkit-scrollbar {
	display: none;
}

.cderma-articles-carousel .cderma-carousel-track > li {
	flex: 0 0 calc((100% - 72px) / 4);
	scroll-snap-align: start;
	min-width: 280px;
	margin-block-start: 0 !important;
}

/* Carousel wrapper — position context for arrows + fades */
.cderma-articles-carousel {
	position: relative;
	overflow: hidden;
}

/* Fade edges — hint that content continues */
.cderma-articles-carousel::before,
.cderma-articles-carousel::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 56px;
	z-index: 2;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.cderma-articles-carousel::before {
	left: 0;
	background: linear-gradient(to right, var(--wp--preset--color--background, #f8f8f6) 8%, transparent);
}

.cderma-articles-carousel::after {
	right: 0;
	background: linear-gradient(to left, var(--wp--preset--color--background, #f8f8f6) 8%, transparent);
}

.cderma-articles-carousel.at-start::before {
	opacity: 0;
}

.cderma-articles-carousel.at-end::after {
	opacity: 0;
}

/* Arrow nav — overlays left/right edges of carousel */
.cderma-carousel-nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 3;
}

.cderma-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 9999px;
	border: none;
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--heading, #262626);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	transition: all 0.25s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.cderma-carousel-prev {
	left: -8px;
}

.cderma-carousel-next {
	right: -8px;
}

.cderma-carousel-btn:hover {
	background: var(--wp--preset--color--primary, #bca443);
	color: #fff;
	box-shadow: 0 4px 16px rgba(140, 115, 50, 0.25);
	transform: translateY(-50%) scale(1.08);
}

.cderma-carousel-btn.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) scale(0.8);
}

@media (max-width: 768px) {
	.cderma-carousel-nav {
		display: none;
	}

	.cderma-articles-carousel::before,
	.cderma-articles-carousel::after {
		width: 28px;
	}
}

.cderma-articles-carousel .cderma-carousel-track .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 1024px) {
	.cderma-articles-carousel .cderma-carousel-track > li {
		flex: 0 0 calc((100% - 48px) / 3);
	}
}

@media (max-width: 768px) {
	.cderma-articles-carousel .cderma-carousel-track > li {
		flex: 0 0 calc((100% - 24px) / 2);
		min-width: 240px;
	}
}

@media (max-width: 480px) {
	.cderma-articles-carousel .cderma-carousel-track > li {
		flex: 0 0 85%;
		min-width: 0;
	}
}

/* ==========================================================================
   Mobile side padding — single posts + pages
   ========================================================================== */

@media (max-width: 768px) {
	.single main > .wp-block-group,
	.page main > .wp-block-group {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ==========================================================================
   Breadcrumbs — mobile layout
   ========================================================================== */

.cderma-breadcrumbs {
	align-items: baseline;
}

@media (max-width: 768px) {
	.cderma-breadcrumbs {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Parents and separators stay full-width; only the current item shrinks/ellipsizes */
	.cderma-breadcrumbs > p {
		flex-shrink: 0;
	}

	.cderma-breadcrumbs > .wp-block-post-title,
	.cderma-breadcrumbs > .cderma-breadcrumb-current {
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Yoast breadcrumbs in archive hero */
.archive-hero .yoast-breadcrumb {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--body);
}

.archive-hero .yoast-breadcrumb a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.archive-hero .yoast-breadcrumb a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Footer — link hover states
   ========================================================================== */

footer.wp-block-group a {
	transition: color 0.2s ease;
}

/* Footer logo: reuse the full-color header logo, recolored solid white so the
   CD mark + "C DERMA" wordmark read on the dark footer background. */
.cderma-footer-logo img {
	filter: brightness(0) invert(1);
}

footer.wp-block-group a:hover {
	color: #fff !important;
}

/* Reduce footer top padding on mobile */
@media (max-width: 781px) {
	footer.wp-block-group > .wp-block-group:first-child {
		padding-top: var(--wp--preset--spacing--50) !important;
	}
}

/* ==========================================================================
   Page Template — Hero Header
   ========================================================================== */

/* Page hero header columns — hide empty right column so it doesn't take vertical space */
.cderma-page-header-cols {
	margin-bottom: 0 !important;
}

/* ==========================================================================
   Doctor Profile — Profile Header (photo + name in hero)
   ========================================================================== */

/* Photo column — fixed width circle */
.cderma-doctor-photo-col {
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
}

.cderma-doctor-photo-col .wp-block-post-featured-image img {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 8px 24px rgba(140, 115, 50, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Mobile: stack photo above name, center photo */
@media (max-width: 768px) {
	.cderma-doctor-profile-header {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center;
		gap: 24px !important;
	}

	.cderma-doctor-photo-col {
		flex-basis: auto !important;
	}

	.cderma-doctor-photo-col .wp-block-post-featured-image img {
		width: 140px;
		height: 140px;
	}

	.cderma-doctor-profile-header .cderma-accent-bar {
		margin-left: auto;
		margin-right: auto;
	}

	.cderma-doctor-profile-header .wp-block-buttons {
		justify-content: center;
	}
}

/* Two-column details grid inside post-content */
.cderma-doctor-content .wp-block-columns.cderma-doctor-details {
	gap: 48px;
}

@media (max-width: 768px) {
	.cderma-doctor-content .wp-block-columns.cderma-doctor-details {
		flex-direction: column !important;
		gap: 0 !important;
	}
}

/* ==========================================================================
   Doctor Profile — Content Styling
   ========================================================================== */

/* H2 section headings — matches blog post H2 style (primary color) */
.cderma-doctor-content h2 {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
	font-weight: 700;
	color: var(--wp--preset--color--primary, #bca443);
	line-height: 1.2;
	letter-spacing: -0.5px;
	margin-top: 3rem;
	margin-bottom: 1rem;
	padding-top: 0.5rem;
}

.cderma-doctor-content h2:first-child {
	margin-top: 0;
	padding-top: 0;
}

/* Paragraphs */
.cderma-doctor-content p {
	font-family: var(--wp--preset--font-family--body, 'Lato', 'Lato Fallback', sans-serif);
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--wp--preset--color--body, #3f4948);
	margin-bottom: 1.25rem;
}

/* Lists */
.cderma-doctor-content ul,
.cderma-doctor-content ol {
	font-family: var(--wp--preset--font-family--body, 'Lato', 'Lato Fallback', sans-serif);
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--wp--preset--color--body, #3f4948);
	margin-bottom: 1.25rem;
	padding-left: 1.5rem;
}

.cderma-doctor-content li {
	margin-bottom: 0.5rem;
}

.cderma-doctor-content li::marker {
	color: var(--wp--preset--color--primary, #bca443);
}

/* Links */
.cderma-doctor-content a {
	color: var(--wp--preset--color--primary, #bca443);
	text-decoration: underline;
	text-decoration-color: rgba(140, 115, 50, 0.3);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.2s ease;
}

.cderma-doctor-content a:hover {
	text-decoration-color: var(--wp--preset--color--primary, #bca443);
}

/* Schedule table — refined styling */
.cderma-doctor-content .wp-block-table {
	margin-top: 0.5rem;
	margin-bottom: 2rem;
}

.cderma-doctor-content .wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wp--preset--color--border, #ece9df);
	border-radius: 16px;
	overflow: hidden;
	width: 100%;
}

.cderma-doctor-content .wp-block-table thead th {
	background: var(--wp--preset--color--primary, #bca443);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--body, 'Lato', 'Lato Fallback', sans-serif);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 14px 20px;
	border: none;
	text-align: left;
}

.cderma-doctor-content .wp-block-table tbody td {
	font-family: var(--wp--preset--font-family--body, 'Lato', 'Lato Fallback', sans-serif);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--body, #3f4948);
	padding: 14px 20px;
	border-top: 1px solid var(--wp--preset--color--border, #ece9df);
	border-left: none;
	border-right: none;
	border-bottom: none;
}

.cderma-doctor-content .wp-block-table tbody tr:nth-child(even) td {
	background-color: var(--wp--preset--color--primary-surface, #f7f3e8);
}

.cderma-doctor-content .wp-block-table tbody tr:first-child td {
	border-top: none;
}

.cderma-doctor-content .wp-block-table tbody td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--heading, #262626);
}

/* Doctor CTA — same as page CTA */
.cderma-doctor-cta {
	transition: transform 0.3s ease;
}

@media (max-width: 600px) {
	.cderma-doctor-cta {
		padding: 40px 24px 32px !important;
		border-radius: 24px !important;
	}

	.cderma-doctor-cta .wp-block-buttons {
		flex-direction: column !important;
	}

	.cderma-doctor-cta .wp-block-button {
		width: 100%;
	}

	.cderma-doctor-cta .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* Doctor location chips */
.cderma-location-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--primary, #bca443);
	background: rgba(140, 115, 50, 0.08);
	padding: 7px 14px;
	border-radius: 20px;
}

.cderma-location-chip svg {
	flex-shrink: 0;
	opacity: 0.7;
}

/* Hero locations row (under the doctor name) — flex wrap of .cderma-location-chip pills */
.doctor-locations {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 16px 0;
}

/* Hero booking buttons — solid primary-color CTA, location-stamped.
   Secondary to the green WhatsApp pill: same shape, different color so they
   read as parallel actions, not competing primaries. */
.doctor-booking-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.doctor-booking-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--primary, #bca443);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.15s ease;
}

.doctor-booking-btn:hover,
.doctor-booking-btn:focus {
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.doctor-booking-btn svg {
	flex-shrink: 0;
	opacity: 0.9;
}

.doctor-booking-btn__loc {
	font-weight: 500;
	opacity: 0.85;
}

/* Doctor schedule — per-location cards in the right column of the doctor
   profile. One card per location: header (pin + name, city), one row per
   day (multi-day slots are expanded), then a primary CTA button. */
.doctor-schedule-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 24px;
}

.doctor-loc-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #ece9df);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.doctor-loc-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	background: var(--wp--preset--color--primary-surface, #f7f3e8);
	color: var(--wp--preset--color--primary, #bca443);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	border-bottom: 1px solid var(--wp--preset--color--border, #ece9df);
}

.doctor-loc-card__head svg {
	flex-shrink: 0;
	opacity: 0.85;
}

.doctor-loc-card__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.doctor-loc-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--wp--preset--color--border, #ece9df);
}

.doctor-loc-card__row:last-child {
	border-bottom: none;
}

.doctor-loc-card__day {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--body, #3f4948);
}

.doctor-loc-card__time {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: #eef2f3;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--heading, #262626);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.doctor-loc-card__cta {
	display: block;
	margin: 14px 16px 16px;
	padding: 13px 18px;
	background: var(--wp--preset--color--primary, #bca443);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border-radius: 12px;
	transition: filter 0.2s ease, transform 0.15s ease;
}

.doctor-loc-card__cta:hover,
.doctor-loc-card__cta:focus {
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-1px);
}

@media (max-width: 781px) {
	.doctor-schedule-section {
		position: static;
		margin-top: 32px;
	}
}

/* Compact day-range label next to the chips (e.g. "Senin–Jumat") */
.doctor-day-label {
	display: inline-block;
	font-weight: 600;
	color: var(--wp--preset--color--heading, #262626);
	font-size: 0.875rem;
}

/* Schedule section heading + per-location grouping */
.doctor-schedule-section {
	margin-top: var(--wp--preset--spacing--60, 3rem);
}

.doctor-schedule-group {
	margin-bottom: 1.5rem;
}

.doctor-schedule-group__heading {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 0 0.5rem 0;
	color: var(--wp--preset--color--heading, #262626);
}

.doctor-schedule-group__city {
	font-weight: 400;
	color: var(--wp--preset--color--body, #666);
}

/* Mobile: stack the day chips above the day-range label so neither truncates */
@media (max-width: 600px) {
	.doctor-schedule-section .wp-block-table tbody td:first-child {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.doctor-day-chips {
		margin-right: 0;
	}
	.doctor-day-chip {
		min-width: 28px;
		padding: 3px 6px;
		font-size: 10px;
	}
}

/* ==========================================================================
   Location single page (single-clinic-location)
   ========================================================================== */

/* Two-column hero detail: map left, info right */
.loc-detail__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 32px;
	align-items: stretch;
}

.loc-detail__map {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(140, 115, 50, 0.06);
	min-height: 320px;
}

.loc-detail__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.loc-detail__info {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-self: center;
}

.loc-detail__address {
	font-style: normal;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--body, #3f4948);
	white-space: pre-line;
}

.loc-detail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.loc-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.15s ease;
}

.loc-action-btn:hover,
.loc-action-btn:focus {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.loc-action-btn--wa {
	background-color: #25D366;
	color: #fff;
}

.loc-action-btn--wa:hover,
.loc-action-btn--wa:focus {
	color: #fff;
}

.loc-action-btn--tel {
	background-color: #fff;
	color: var(--wp--preset--color--primary, #bca443);
	border: 1px solid rgba(140, 115, 50, 0.18);
}

.loc-action-btn--tel:hover,
.loc-action-btn--tel:focus {
	color: var(--wp--preset--color--primary, #bca443);
}

.loc-action-btn--booking {
	background-color: var(--wp--preset--color--primary, #bca443);
	color: #fff;
}

.loc-action-btn--booking:hover,
.loc-action-btn--booking:focus {
	color: #fff;
}

@media (max-width: 768px) {
	.loc-detail__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.loc-detail__map {
		min-height: 240px;
	}
}

/* "Dokter di Lokasi Ini" — derived from inverse schedule query */
.loc-doctors-section {
	margin-top: 0;
}

.loc-doctors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 1rem;
}

.loc-doctor-card {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 16px;
	background: #fff;
	border: 1px solid rgba(140, 115, 50, 0.10);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(140, 115, 50, 0.04);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.loc-doctor-card:hover,
.loc-doctor-card:focus {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(140, 115, 50, 0.10);
	transform: translateY(-2px);
	color: inherit;
}

.loc-doctor-card__photo {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(140, 115, 50, 0.12);
}

.loc-doctor-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.loc-doctor-card__name {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--heading, #262626);
	margin: 0;
	line-height: 1.25;
}

.loc-doctor-card__role {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--body, #3f4948);
	margin: 0;
	line-height: 1.4;
}

.loc-doctor-card__cta {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #bca443);
	margin-top: 4px;
}

/* ==========================================================================
   Doctor archive cards (archive-doctor.html via clinic/doctor-archive-card)
   ========================================================================== */

/* Doctor filter — Cari + Lokasi → Hari → Waktu (clinic/doctor-location-filter).
   A slim search toolbar sits above a card panel; inside the panel the Hari/Waktu
   rows are revealed by doctor-location-filter.js once a location is picked. */
.doctor-filter {
	margin-bottom: 28px;
}

/* Slim, always-visible name search above the filter card. */
.doctor-filter__search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--border, #ece9df);
	border-radius: 999px;
	padding: 0 16px;
	margin-bottom: 14px;
	transition: border-color 0.15s ease;
}

.doctor-filter__search:focus-within {
	border-color: var(--wp--preset--color--primary, #bca443);
}

.doctor-filter__search svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--wp--preset--color--gold-dark, #8c7332);
}

.doctor-filter__search-input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--heading, #2a2a2a);
	padding: 12px 0;
}

/* Card panel holding Lokasi (always shown) + the revealed Hari/Waktu rows. */
.doctor-filter__panel {
	border: 1px solid var(--wp--preset--color--border, #ece9df);
	border-radius: 16px;
	background: var(--wp--preset--color--primary-surface, #faf7ee);
	padding: 18px 20px;
}

.doctor-filter__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* A divider above every row after the first visible one. The hint sits between
   row 1 and row 2 when no location is picked, so it carries the divider then. */
.doctor-filter__row + .doctor-filter__row,
.doctor-filter__hint + .doctor-filter__row {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--border, #ece9df);
}

.doctor-filter__row[hidden] {
	display: none;
}

@keyframes doctor-filter-reveal {
	from { opacity: 0; transform: translateY(-5px); }
	to   { opacity: 1; transform: none; }
}

/* Plays when a row transitions from hidden → shown (location picked). */
.doctor-filter__row--reveal:not([hidden]) {
	animation: doctor-filter-reveal 0.22s ease;
}

.doctor-filter__label {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 104px;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.3px;
	color: var(--wp--preset--color--heading, #2a2a2a);
}

.doctor-filter__hint {
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--border, #ece9df);
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--wp--preset--color--gold-dark, #8c7332);
}

.doctor-filter__hint[hidden] {
	display: none;
}

/* Day chips share a flex row; the location buttons keep their own .doctor-loc-filter. */
.doctor-filter .doctor-loc-filter {
	margin-bottom: 0;
}

.doctor-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Day chip — same pill look as the location button, without the icon. */
.doctor-filter__chip {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--body, #555);
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--border, #ece9df);
	border-radius: 999px;
	padding: 9px 16px;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.doctor-filter__chip:hover,
.doctor-filter__chip:focus-visible {
	border-color: var(--wp--preset--color--primary, #bca443);
}

.doctor-filter__chip.is-active {
	background: var(--wp--preset--color--primary, #bca443);
	border-color: var(--wp--preset--color--primary, #bca443);
	color: #fff;
}

/* Waktu — segmented Pagi / Siang–Sore control. */
.doctor-filter__period-group {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.doctor-filter__period {
	display: inline-flex;
	border: 1.5px solid var(--wp--preset--color--border, #ece9df);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
	transition: opacity 0.2s ease;
}

.doctor-filter__period button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	font-family: var(--wp--preset--font-family--body);
	line-height: 1.2;
	color: var(--wp--preset--color--body, #555);
	background: transparent;
	border: 0;
	padding: 7px 16px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.doctor-filter__period-label {
	font-weight: 700;
	font-size: 0.875rem;
}

.doctor-filter__period-range {
	font-size: 0.66rem;
	font-weight: 400;
	opacity: 0.65;
}

.doctor-filter__period button + button {
	border-left: 1.5px solid var(--wp--preset--color--border, #ece9df);
}

.doctor-filter__period button.is-active {
	background: var(--wp--preset--color--primary, #bca443);
	color: #fff;
}

.doctor-filter__period button.is-active .doctor-filter__period-range {
	opacity: 0.85;
}

/* Disabled until a day is picked. */
.doctor-filter__period[aria-disabled="true"] {
	opacity: 0.45;
	filter: grayscale(0.4);
}

.doctor-filter__period[aria-disabled="true"] button {
	cursor: not-allowed;
	pointer-events: none;
}

.doctor-filter__period-hint {
	font-size: 0.78rem;
	font-style: italic;
	color: var(--wp--preset--color--gold-dark, #8c7332);
}

.doctor-filter__period-hint[hidden] {
	display: none;
}

.doctor-filter__reset {
	margin-left: auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--gold-dark, #8c7332);
	background: none;
	border: 0;
	padding: 8px 4px;
	cursor: pointer;
	text-decoration: underline;
}

.doctor-filter__reset[hidden] {
	display: none;
}

.doctor-filter__count {
	margin: 16px 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--body, #555);
}

.doctor-filter__count:empty {
	display: none;
}

@media (max-width: 600px) {
	.doctor-filter {
		margin-bottom: 20px;
	}
	.doctor-filter__panel {
		padding: 16px 14px;
	}
	/* Stack each control under its label so chips get the full width to wrap. */
	.doctor-filter__row {
		align-items: flex-start;
	}
	.doctor-filter__label {
		min-width: 0;
		width: 100%;
		margin-bottom: 2px;
	}
	.doctor-filter__chips,
	.doctor-filter__period-group,
	.doctor-filter .doctor-loc-filter {
		width: 100%;
	}
	/* Full-width equal-thirds segmented control for big tap targets. */
	.doctor-filter__period {
		width: 100%;
	}
	.doctor-filter__period button {
		flex: 1;
		padding: 8px 6px;
		text-align: center;
	}
	.doctor-filter__period-range {
		font-size: 0.62rem;
	}
	.doctor-filter__reset {
		margin: 4px 0 0;
	}
}

/* Doctor archive — location filter bar (clinic/doctor-location-filter) */
.doctor-loc-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

.doctor-loc-filter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--primary, #bca443);
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--border, #ece9df);
	border-radius: 999px;
	padding: 12px 22px;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.doctor-loc-filter__btn svg {
	flex-shrink: 0;
	opacity: 0.65;
}

.doctor-loc-filter__btn:hover,
.doctor-loc-filter__btn:focus-visible {
	border-color: var(--wp--preset--color--primary, #bca443);
}

.doctor-loc-filter__btn.is-active {
	background: var(--wp--preset--color--primary, #bca443);
	border-color: var(--wp--preset--color--primary, #bca443);
	color: #fff;
}

.doctor-loc-filter__btn.is-active svg {
	opacity: 1;
}

@media (max-width: 600px) {
	.doctor-loc-filter {
		gap: 10px;
		margin-bottom: 20px;
	}
	/* Two equal-width buttons fill the row for big, thumb-friendly tap targets. */
	.doctor-loc-filter__btn {
		flex: 1 1 0;
		padding: 13px 12px;
		font-size: 0.875rem;
		min-height: 46px;
	}
}

.wp-block-query .doctor-archive-grid {
	gap: 24px;
}

.wp-block-query .doctor-archive-grid > li,
.wp-block-query .doctor-archive-grid > * {
	margin: 0;
}

/* Make each grid cell a flex column so the card stretches to the row's height
   for equal-height cards. This replaces height/min-height:100% on the card,
   which tied the card to the auto-sized row track and made taller content
   overflow into the next row (the cards-overlap bug). */
.wp-block-query .doctor-archive-grid > li {
	display: flex;
	flex-direction: column;
}

/* The location filter (doctor-location-filter.js) hides non-matching cells via
   the [hidden] attribute. The display:flex above would otherwise win over the
   UA [hidden]{display:none}, so re-assert it at higher specificity. */
.wp-block-query .doctor-archive-grid > li[hidden] {
	display: none;
}

.doctor-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #ece9df);
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	/* Grow to fill the flex-column <li> (set above) for equal-height cards,
	   sized from real content — no percentage height tied to the grid track. */
	flex: 1 1 auto;
	transition: border-color 0.2s ease;
}

.doctor-card:hover,
.doctor-card:focus-visible {
	color: inherit;
	border-color: var(--wp--preset--color--primary, #bca443);
}

.doctor-card__photo-wrap {
	margin: 0;
	display: flex;
	justify-content: center;
}

.doctor-card__photo {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--border, #ece9df);
}

.doctor-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	text-align: left;
}

.doctor-card__name {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--heading, #262626);
	margin: 0;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.doctor-card:hover .doctor-card__name,
.doctor-card:focus-visible .doctor-card__name {
	color: var(--wp--preset--color--primary, #bca443);
}

.doctor-card__role {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	color: var(--wp--preset--color--body, #3f4948);
	margin: 0;
	line-height: 1.45;
}

.doctor-card__locations {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

.doctor-card__cta {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #bca443);
	margin-top: auto;
	padding-top: 4px;
}

@media (max-width: 600px) {
	.doctor-card {
		flex-direction: row;
		align-items: center;
		padding: 16px;
		gap: 16px;
	}
	.doctor-card__photo {
		width: 96px;
		height: 96px;
	}
	.doctor-card__body {
		flex: 1;
		min-width: 0;
	}
}

/* Transparency notice on profile pages for doctors who reviewed articles
   but no longer practice here. Soft fill, no left-border accent. */
.doctor-former-notice {
	background: var(--wp--preset--color--primary-surface, #f0f7f7);
	color: var(--wp--preset--color--body, #2a2a2a);
	border-radius: 12px;
	padding: 14px 18px;
	margin: 0 0 24px;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.doctor-former-notice strong {
	color: var(--wp--preset--color--primary, #bca443);
	font-weight: 700;
	margin-right: 4px;
}

/* Suppress booking CTAs on non-active doctor profiles. The dynamic
   placeholders (locations, schedule, booking) are already empty for these
   doctors via inc/doctor/render-*; this hides the static WhatsApp CTAs and
   the bottom consultation CTA group baked into single-doctor.html. */
body.doctor-status-reviewer-only .cderma-wa-btn,
body.doctor-status-reviewer-only .cderma-wa-btn-gold,
body.doctor-status-archived .cderma-wa-btn,
body.doctor-status-archived .cderma-wa-btn-gold,
body.doctor-status-reviewer-only .cderma-doctor-cta,
body.doctor-status-archived .cderma-doctor-cta {
	display: none !important;
}

/* Collapse the empty schedule column (its placeholder renders blank for
   reviewer_only/archived) and let the profile column take the full width
   so the layout doesn't read as "broken". Uses :has() — supported in all
   evergreen browsers as of 2024. */
body.doctor-status-reviewer-only .cderma-doctor-body .wp-block-column:has(#doctor-schedule-placeholder),
body.doctor-status-archived .cderma-doctor-body .wp-block-column:has(#doctor-schedule-placeholder) {
	display: none;
}
body.doctor-status-reviewer-only .cderma-doctor-body .wp-block-column:not(:has(#doctor-schedule-placeholder)),
body.doctor-status-archived .cderma-doctor-body .wp-block-column:not(:has(#doctor-schedule-placeholder)) {
	flex-basis: 100% !important;
}

/* Doctor sidebar schedule */
.cderma-sidebar-schedule {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 80px;
}

.cderma-schedule-section {
	margin-top: var(--wp--preset--spacing--60, 3rem);
}

.cderma-schedule-card {
	background: #fff;
	border: 1px solid rgba(140, 115, 50, 0.1);
	border-radius: 20px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(140, 115, 50, 0.06);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cderma-schedule-card:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(140, 115, 50, 0.1);
	transform: translateY(-2px);
}

.cderma-schedule-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 20px 24px;
	background: var(--wp--preset--color--primary-surface, #f0fafa);
	border-bottom: 1px solid rgba(140, 115, 50, 0.08);
}

.cderma-schedule-card__pin {
	display: flex;
	color: var(--wp--preset--color--primary, #bca443);
	flex-shrink: 0;
	opacity: 0.7;
}

.cderma-schedule-card__location {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #bca443);
	margin: 0;
	letter-spacing: -0.01em;
}

.cderma-schedule-card__grid {
	padding: 8px 24px;
}

.cderma-schedule-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.cderma-schedule-row:last-child {
	border-bottom: none;
}

.cderma-schedule-day {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--heading, #3a3833);
}

.cderma-schedule-row--off .cderma-schedule-day {
	color: #b0b8b4;
}

.cderma-schedule-time {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #bca443);
	background: rgba(140, 115, 50, 0.07);
	padding: 5px 14px;
	border-radius: 20px;
	letter-spacing: 0.02em;
}

.cderma-schedule-time--off {
	background: transparent;
	color: #ccc;
	font-weight: 400;
}

a.cderma-schedule-card__cta,
a.cderma-schedule-card__cta:hover,
a.cderma-schedule-card__cta:visited {
	display: block;
	margin: 8px 24px 24px;
	padding: 14px 24px;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff !important;
	background: linear-gradient(135deg, #bca443, #008486) !important;
	border-radius: 14px;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.15s ease;
}

a.cderma-schedule-card__cta:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

/* Doctor hero — mobile adjustments */
@media (max-width: 768px) {
	.cderma-doctor-hero {
		padding-top: 32px !important;
		padding-bottom: 48px !important;
	}

	.cderma-schedule-cards {
		grid-template-columns: 1fr;
	}

	.cderma-schedule-card__grid {
		padding: 8px 20px;
	}

	.cderma-schedule-card__header {
		padding: 16px 20px;
	}

	.cderma-schedule-card__cta {
		margin: 8px 20px 20px;
	}
}

/* ==========================================================================
   Page Template — Service/Generic Page Content
   ========================================================================== */

/* Collapse empty WPBakery migration artifacts (empty groups/columns) */
.cderma-page-content .wp-block-group:empty,
.cderma-page-content .wp-block-columns:empty,
.cderma-page-content .wp-block-group:not(:has(img, p, h1, h2, h3, h4, h5, h6, ul, ol, table, figure, iframe, a)),
.cderma-page-content .wp-block-columns:not(:has(img, p, h1, h2, h3, h4, h5, h6, ul, ol, table, figure, iframe, a)) {
	display: none;
}

/* Content typography and spacing */
:where(.cderma-page-content) h2 {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 700;
	color: var(--wp--preset--color--primary, #bca443);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	padding-top: 0;
}

:where(.cderma-page-content) h3 {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 700;
	color: var(--wp--preset--color--primary, #bca443);
	line-height: 1.3;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

:where(.cderma-page-content) h4 {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--primary, #bca443);
}

.cderma-page-content h2:first-child,
.cderma-page-content h3:first-child,
.cderma-page-content .wp-block-group:first-child h2:first-child,
.cderma-page-content .wp-block-group:first-child h3:first-child {
	margin-top: 0;
	padding-top: 0;
}

/* Paragraphs */
:where(.cderma-page-content, .wp-block-post-content) p {
	font-family: var(--wp--preset--font-family--body, 'Lato', 'Lato Fallback', sans-serif);
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--wp--preset--color--body, #3f4948);
	margin-bottom: 1.375rem;
}

/* Lists */
.cderma-page-content ul,
.cderma-page-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol {
	font-family: var(--wp--preset--font-family--body, 'Lato', 'Lato Fallback', sans-serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body, #3f4948);
	margin-bottom: 1.375rem;
	padding-left: 1.5rem;
}

.cderma-page-content li,
.wp-block-post-content li {
	margin-bottom: 0.25rem;
}

/* Override WordPress flow-layout gap on list items */
.cderma-page-content ul > li,
.cderma-page-content ol > li,
.wp-block-post-content ul > li,
.wp-block-post-content ol > li {
	margin-block-start: 0.25rem;
}

/* Collapse gap between consecutive list blocks (authored as separate blocks) */
.cderma-page-content .wp-block-list + .wp-block-list,
.wp-block-post-content .wp-block-list + .wp-block-list {
	margin-block-start: 0 !important;
}

.cderma-page-content .wp-block-list:has(+ .wp-block-list),
.wp-block-post-content .wp-block-list:has(+ .wp-block-list) {
	margin-block-end: 0 !important;
}

.cderma-page-content li::marker,
.wp-block-post-content li::marker {
	color: var(--wp--preset--color--primary, #bca443);
}

/* Links */
:where(.cderma-page-content a:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--wp--preset--color--primary, #bca443);
	text-decoration: underline;
	text-decoration-color: rgba(140, 115, 50, 0.3);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

:where(.cderma-page-content a:not(.wp-element-button):not(.wp-block-button__link):hover) {
	text-decoration-color: var(--wp--preset--color--primary, #bca443);
}

/* Images — rounded corners, full-width within content */
.cderma-page-content .wp-block-image img {
	border-radius: 20px;
	height: auto;
}

.cderma-page-content .wp-block-image {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* Team member cards — horizontal photo + text layout */
.cderma-team-card > .wp-block-image {
	flex-shrink: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.cderma-team-card > .wp-block-image img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 9999px !important;
}

.cderma-team-card > .wp-block-group {
	flex: 1;
	min-width: 0;
}

@media (max-width: 600px) {
	.cderma-team-card {
		gap: 20px !important;
	}
	.cderma-team-card > .wp-block-image {
		width: 100%;
		display: flex;
		justify-content: center;
	}
}

/* Columns — spacing */
.cderma-page-content .wp-block-columns {
	margin-top: 2rem;
	margin-bottom: 2rem;
	gap: 2rem;
}

@media (max-width: 768px) {
	.cderma-page-content .wp-block-columns {
		flex-direction: column;
	}
}

/* Groups — vertical spacing between content sections */
.cderma-page-content > .wp-block-post-content > .wp-block-group + .wp-block-group {
	margin-top: 1rem;
}

/* Clean up Word/Office paste artifacts (inline spans) */
.cderma-page-content span[data-contrast],
.cderma-page-content span[data-ccp-props] {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
}

/* Latest Posts block (sometimes embedded in service content) */
.cderma-page-content .wp-block-latest-posts {
	list-style: none;
	padding-left: 0;
	margin-top: 2rem;
}

.cderma-page-content .wp-block-latest-posts__post-title {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-weight: 700;
	color: var(--wp--preset--color--heading, #262626);
	text-decoration: none;
}

.cderma-page-content .wp-block-latest-posts__post-title:hover {
	color: var(--wp--preset--color--primary, #bca443);
}

/* ==========================================================================
   Layanan Terkait — Cross-link card at end of service pages
   ========================================================================== */

/* The heading — top of the unified card */
.cderma-page-content .layanan-terkait-heading {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #bca443);
	line-height: 1;
	background: var(--wp--preset--color--primary-surface, #f7f3e8);
	border: 1px solid rgba(140, 115, 50, 0.10);
	border-bottom: none;
	border-radius: 16px 16px 0 0;
	margin: 3rem 0 0;
	padding: 20px 24px 0;
	position: relative;
}

/* Top separator line before the card */
.cderma-page-content .layanan-terkait-heading::before {
	content: "";
	position: absolute;
	top: -1.5rem;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right, var(--wp--preset--color--border, #ece9df), transparent 80%);
}

/* The paragraph — bottom of the unified card */
.cderma-page-content .layanan-terkait-heading + p {
	background: var(--wp--preset--color--primary-surface, #f7f3e8);
	border: 1px solid rgba(140, 115, 50, 0.10);
	border-top: none;
	border-radius: 0 0 16px 16px;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--preset--color--body, #3f4948);
	padding: 6px 24px 20px;
	margin-top: 0 !important;
	margin-bottom: 0;
}

/* Links inside the card — bolder, with arrow hint */
.cderma-page-content .layanan-terkait-heading + p a {
	color: var(--wp--preset--color--primary, #bca443);
	font-weight: 600;
	text-decoration: none;
	background: rgba(140, 115, 50, 0.07);
	padding: 2px 8px;
	border-radius: 6px;
	transition: background 0.2s ease, color 0.15s ease;
	white-space: nowrap;
}

.cderma-page-content .layanan-terkait-heading + p a:hover {
	background: rgba(140, 115, 50, 0.14);
	text-decoration: none;
}

@media (max-width: 768px) {
	.cderma-page-content .layanan-terkait-heading {
		margin-top: 2rem;
		padding: 16px 18px 10px;
		border-radius: 12px 12px 0 0;
	}
	.cderma-page-content .layanan-terkait-heading + p {
		padding: 0 18px 16px;
		font-size: 0.875rem;
		border-radius: 0 0 12px 12px;
	}
	.cderma-page-content .layanan-terkait-heading + p a {
		white-space: normal;
	}
}

/* ==========================================================================
   Content Visual Enhancements — D1/D2
   Applied to .cderma-page-content on all service detail pages.
   This entire section can be removed to revert the visual changes.
   Figma ref: "Service Detail — Content Styling (D1/D2)" in IVF-Design-v1
   ========================================================================== */

/* --- H2 Section Dividers ---
   Adds a top border + gradient accent bar before each H2 for visual rhythm.
   Skips the first H2 (already close to the hero). */
.cderma-page-content h2:not(:first-child) {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--wp--preset--color--border, #ece9df);
	position: relative;
}

.cderma-page-content h2:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	left: 0;
	width: 40px;
	height: 4px;
	border-radius: 9999px;
	background: linear-gradient(to right, var(--wp--preset--color--primary, #bca443), var(--wp--preset--color--primary-light, #d8c98a));
}

/* Also target H2 inside first-child groups (WP wraps content in groups) */
.cderma-page-content > .wp-block-post-content > .wp-block-group + .wp-block-group > h2:first-child {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--wp--preset--color--border, #ece9df);
	position: relative;
}

.cderma-page-content > .wp-block-post-content > .wp-block-group + .wp-block-group > h2:first-child::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	left: 0;
	width: 40px;
	height: 4px;
	border-radius: 9999px;
	background: linear-gradient(to right, var(--wp--preset--color--primary, #bca443), var(--wp--preset--color--primary-light, #d8c98a));
}

/* --- Ordered Lists → Step Cards ---
   Turns <ol> into visually distinct step cards with teal numbered circles. */
.cderma-page-content ol {
	list-style: none;
	padding-left: 0;
	counter-reset: step-counter;
}

.cderma-page-content ol > li {
	counter-increment: step-counter;
	position: relative;
	padding: 16px 20px 16px 56px;
	margin-bottom: 12px;
	background: var(--wp--preset--color--surface, #f8fafc);
	border-radius: 16px;
	border-left: 3px solid var(--wp--preset--color--primary-light, #d8c98a);
}

.cderma-page-content ol > li::before {
	content: counter(step-counter);
	position: absolute;
	left: 16px;
	top: 16px;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: var(--wp--preset--color--primary, #bca443);
	color: #fff;
	font-family: var(--wp--preset--font-family--body, 'Lato', 'Lato Fallback', sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* --- Unordered Lists → Teal Checkmarks --- */
.cderma-page-content ul {
	list-style: none;
	padding-left: 0;
}

.cderma-page-content ul > li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 0.5rem;
}

.cderma-page-content ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.45em;
	width: 14px;
	height: 14px;
	background: var(--wp--preset--color--primary, #bca443);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5L6.5 12L13 4' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5L6.5 12L13 4' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* --- Blockquotes → Callout Boxes --- */
.cderma-page-content blockquote {
	border-left: 4px solid var(--wp--preset--color--primary, #bca443);
	background: var(--wp--preset--color--primary-surface, #f7f3e8);
	padding: 20px 24px;
	border-radius: 0 16px 16px 0;
	margin: 1.5rem 0;
	font-style: normal;
}

.cderma-page-content blockquote p {
	margin-bottom: 0;
}

.cderma-page-content blockquote p:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--primary, #bca443);
}

/* --- Tables → Rounded with Header Stripe --- */
.cderma-page-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wp--preset--color--border, #ece9df);
	border-radius: 12px;
	overflow: hidden;
	margin: 1.5rem 0;
}

.cderma-page-content table thead th,
.cderma-page-content table th {
	background: var(--wp--preset--color--primary-surface, #f7f3e8);
	font-weight: 700;
	color: var(--wp--preset--color--primary, #bca443);
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border, #ece9df);
}

.cderma-page-content table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--wp--preset--color--border, #ece9df);
}

.cderma-page-content table tr:last-child td {
	border-bottom: none;
}

.cderma-page-content table tbody tr:nth-child(even) td {
	background: var(--wp--preset--color--surface, #f8fafc);
}

/* --- Figcaptions --- */
.cderma-page-content figcaption {
	text-align: center;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--body-muted, #8a8472);
	margin-top: 8px;
}

/* --- Stat / Cost Callout Cards (Bayi Tabung) --- */
.cderma-stat-callout {
	background: var(--wp--preset--color--primary-surface, #f7f3e8);
	border: 1px solid rgba(140, 115, 50, 0.12);
	border-radius: 20px;
	padding: 28px;
	margin: 1.5rem 0;
}

.cderma-stat-callout .stat-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--body, #3f4948);
	margin-bottom: 4px;
}

.cderma-stat-callout .stat-value {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: 2rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary, #bca443);
	line-height: 1.2;
	margin-bottom: 8px;
}

.cderma-stat-callout p {
	font-size: 0.875rem;
	line-height: 1.6;
	margin-bottom: 0;
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
	.cderma-page-content ol > li {
		padding: 14px 16px 14px 48px;
	}

	.cderma-page-content ol > li::before {
		left: 12px;
		top: 14px;
		width: 24px;
		height: 24px;
		font-size: 0.75rem;
	}

	.cderma-stat-callout {
		padding: 20px;
	}

	.cderma-stat-callout .stat-value {
		font-size: 1.5rem;
	}
}

/* --- Transparency Checklist Card --- */
.cderma-transparency-card {
	background: linear-gradient(135deg, #f2fafa 0%, #f5fbfb 100%);
	border: 1px solid rgba(140, 115, 50, 0.1);
	border-radius: 24px;
	padding: 32px 36px;
	margin: 2rem 0;
}

.cderma-transparency-card .card-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.cderma-transparency-card .card-heading .heart-icon {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(140, 115, 50, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 18px;
	line-height: 1;
}

.cderma-transparency-card .card-heading h3 {
	font-family: var(--wp--preset--font-family--heading, 'Ubuntu', 'Ubuntu Fallback', sans-serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #bca443);
	margin: 0;
	line-height: 1.3;
}

.cderma-transparency-card .card-intro {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--preset--color--body, #3f4948);
	margin-bottom: 20px;
}

.cderma-transparency-card .card-transition {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--body, #3f4948);
	margin-bottom: 16px;
}

.cderma-transparency-card .checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cderma-transparency-card .checklist li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--body, #3f4948);
	padding: 0;
	margin: 0;
}

.cderma-transparency-card .checklist li::before {
	content: "";
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: 1.5px solid rgba(140, 115, 50, 0.35);
	background: #fff;
	flex-shrink: 0;
	position: static;
	-webkit-mask-image: none;
	mask-image: none;
}

.cderma-transparency-card .card-punchline {
	font-size: 0.875rem;
	font-weight: 600;
	color: #8c2619;
	line-height: 1.6;
	margin-bottom: 20px;
}

.cderma-transparency-card .card-divider {
	height: 1px;
	background: rgba(140, 115, 50, 0.12);
	margin-bottom: 20px;
}

.cderma-transparency-card .card-closing {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--preset--color--body, #3f4948);
	margin: 0;
}

@media (max-width: 768px) {
	.cderma-transparency-card {
		padding: 24px 20px;
		border-radius: 20px;
	}

	.cderma-transparency-card .card-heading h3 {
		font-size: 1.125rem;
	}
}

/* === End D1/D2 Content Visual Enhancements === */

/* ==========================================================================
   Quiz CTA Section
   ========================================================================== */

.cderma-quiz-cta {
	background: var(--wp--preset--color--primary, #bca443);
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(0, 64, 65, 0.25);
	padding: 48px 40px;
	text-align: center;
	margin-top: 20px;
	position: relative;
	overflow: hidden;
}

.cderma-quiz-cta::before {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 200px;
	height: 200px;
	border-radius: 9999px;
	background: rgba(154, 241, 243, 0.12);
	filter: blur(60px);
	pointer-events: none;
}

.cderma-quiz-cta h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--wp--preset--color--heading, #262626);
	margin: 0 0 8px;
	line-height: 1.3;
	position: relative;
}

.cderma-quiz-cta > p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	color: #3a3833;
	margin: 0 0 24px;
	line-height: 1.6;
	position: relative;
}

/* Option A button: white pill on the gold card, gold-dark label (WCAG AA) */
.cderma-quiz-cta .wp-block-button__link,
.cderma-quiz-cta .wp-block-button__link:link,
.cderma-quiz-cta .wp-block-button__link:visited {
	background: #fff;
	color: var(--wp--preset--color--gold-dark, #8c7332);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.cderma-quiz-cta .wp-block-button__link:hover,
.cderma-quiz-cta .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary-surface, #f7f3e8);
	color: var(--wp--preset--color--gold-dark, #8c7332);
}

#ciputra-quiz {
	min-height: 320px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	position: relative;
}

#ciputra-quiz iframe {
	border-radius: 14px;
}

@media (max-width: 600px) {
	.cderma-quiz-cta {
		padding: 36px 20px;
		border-radius: 16px;
	}

	.cderma-quiz-cta h2 {
		font-size: 1.25rem;
	}
}

.cderma-quiz-cta--hero {
	padding: 64px 24px;
}

.cderma-quiz-cta--hero > h2,
.cderma-quiz-cta--hero > p {
	display: none;
}

@media (max-width: 600px) {
	.cderma-quiz-cta--hero {
		padding: 40px 20px;
	}
}

.cderma-quiz-cta--inline {
	max-width: calc((1080px - 48px) * 0.6666);
	margin: 0;
	padding: 28px 24px;
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(0, 64, 65, 0.18);
}

.cderma-quiz-cta--inline h2 {
	font-size: 1.125rem;
	margin-bottom: 4px;
}

.cderma-quiz-cta--inline > p {
	font-size: 0.8125rem;
	margin-bottom: 16px;
}

.cderma-quiz-cta--inline #ciputra-quiz {
	min-height: 240px;
	max-width: 100%;
	border-radius: 10px;
}

@media (max-width: 600px) {
	.cderma-quiz-cta--inline {
		max-width: 100%;
		padding: 24px 16px;
	}
}

/* ==========================================================================
   Article Metadata Footer
   ========================================================================== */

.medrev-article-meta {
    margin-top: 24px;
    padding: 16px 24px;
    border-radius: 16px;
    background: var(--wp--preset--color--primary-surface, #f7f3e8);
    border: 1px solid rgba(140, 115, 50, 0.12);
    font-family: var(--wp--preset--font-family--body);
    font-size: 13px;
    color: var(--wp--preset--color--body);
    line-height: 1.5;
}

.medrev-article-meta__reviewer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.medrev-article-meta__reviewer svg {
    flex-shrink: 0;
    color: var(--wp--preset--color--primary);
    transform: translateY(2px);
}

.medrev-article-meta__reviewer span {
    font-size: 14px;
    color: var(--wp--preset--color--body);
}

.medrev-article-meta__reviewer strong {
    color: var(--wp--preset--color--heading);
    font-weight: 700;
}

.medrev-article-meta__reviewer a {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
    text-decoration-color: rgba(140, 115, 50, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}

.medrev-article-meta__reviewer a:hover {
    text-decoration-color: var(--wp--preset--color--primary);
}

/* Mini-card variant — when the reviewer is a doctor CPT with featured image,
   the byline upgrades to avatar + name + role + review date. Used when
   _reviewed_by_page_id resolves to a doctor post with a featured image. */
.medrev-article-meta__reviewer--card {
    align-items: center;
    gap: 12px;
}

.medrev-reviewer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(140, 115, 50, 0.12);
}

.medrev-reviewer-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.4;
}

.medrev-reviewer-prefix {
    font-size: 12px;
    color: var(--wp--preset--color--body);
    opacity: 0.85;
}

.medrev-reviewer-role {
    font-size: 12px;
    color: var(--wp--preset--color--body);
    opacity: 0.8;
}

.medrev-reviewer-date {
    font-size: 12px;
    color: var(--wp--preset--color--body);
    opacity: 0.7;
    margin-top: 2px;
}

.medrev-article-meta__dates {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--wp--preset--color--body);
}

.medrev-article-meta__author {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    font-weight: 600;
}

.medrev-article-meta__separator {
    color: rgba(190, 201, 200, 0.5);
    user-select: none;
}

.medrev-article-meta__sources {
    margin-top: 6px;
    border-top: 1px solid rgba(190, 201, 200, 0.15);
    padding-top: 0;
}

.medrev-article-meta__sources summary {
    padding: 6px 0;
    font-weight: 600;
    font-size: 13px;
    color: var(--wp--preset--color--primary);
    cursor: pointer;
    list-style: none;
}

.medrev-article-meta__sources summary::-webkit-details-marker {
    display: none;
}

.medrev-article-meta__sources summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 8px;
    vertical-align: 1px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    transition: transform 0.15s ease;
}

.medrev-article-meta__sources[open] summary::before {
    transform: rotate(90deg);
}

.medrev-article-meta__sources summary:focus-visible,
.medrev-article-meta__reviewer a:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 3px;
    border-radius: 2px;
}

.medrev-article-meta__sources ol {
    margin: 0;
    padding: 0 0 4px 20px;
    font-size: 12px;
    line-height: 1.7;
}

.medrev-article-meta__sources ol li {
    color: var(--wp--preset--color--body);
    padding: 2px 0;
}

.medrev-article-meta__sources ol a {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(140, 115, 50, 0.3);
}

.medrev-article-meta__sources ol a:hover {
    text-decoration-color: var(--wp--preset--color--primary);
}

.medrev-article-meta__external-icon {
    display: inline-block;
    margin-left: 3px;
    vertical-align: baseline;
    opacity: 0.75;
}

.medrev-source-id {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(140, 115, 50, 0.07);
    color: var(--wp--preset--color--primary);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.3px;
    vertical-align: baseline;
}

@media (max-width: 600px) {
    .medrev-article-meta {
        margin-top: 16px;
        padding: 16px 20px;
    }

    .medrev-article-meta__dates {
        gap: 4px 6px;
    }
}

/* Medical Review System — V2 byline additions */

/* Service-page byline placement. The byline renders twice: as the first card in
   the right sidebar (desktop) and inline at the end of the service copy (mobile).
   Each variant is shown only at its breakpoint; the outer Content+Sidebar columns
   stack at <=781px (core columns default), so that is the toggle point. */
.medrev-article-meta--inline-mobile {
    display: none;
    margin-top: 28px;
}

/* Sidebar card: top of the sticky CTA stack — no above-content separator/margin. */
.medrev-article-meta--sidebar {
    margin-top: 0;
}

@media (max-width: 781px) {
    .medrev-article-meta--sidebar {
        display: none;
    }
    .medrev-article-meta--inline-mobile {
        display: block;
    }
}

/* Status badges (reused in admin columns) — derived from theme palette */
.medrev-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.medrev-badge--re { background: #d8ecec; color: #004e4f; }
.medrev-badge--legacy { background: #fdf3e4; color: #6b4a00; }
.medrev-badge--unatt { background: #f1efe8; color: #4a5352; }

/* ==========================================================================
   Page Template — Mobile Hero Adjustments
   ========================================================================== */

@media (max-width: 781px) {
	.cderma-page-hero {
		padding-top: 32px !important;
	}
}

/* ── Floating Quiz CTA (SJC-473) ── */
.floating-cta {
	position: fixed;
	bottom: 28px;
	right: 16px;
	z-index: 9999;
}

.floating-cta__card {
	display: inline-flex;
	align-items: stretch;
	background: #fff;
	border-radius: 12px;
	border: 1px solid rgba(140, 115, 50, 0.15);
	box-shadow:
		0 6px 20px -4px rgba(0, 64, 65, 0.12),
		0 2px 4px rgba(0, 64, 65, 0.06);
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	transform: translateX(0);
	opacity: 1;
}

.floating-cta--dismissed .floating-cta__card {
	transform: translateX(calc(100% + 32px));
	opacity: 0;
	pointer-events: none;
}

.floating-cta--pending .floating-cta__card {
	transform: translateY(20px);
	opacity: 0;
	pointer-events: none;
}

.floating-cta__content {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 4px 10px 12px;
}

.floating-cta__header {
	display: flex;
	align-items: center;
	gap: 6px;
}

.floating-cta__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #bca443;
	flex-shrink: 0;
}

.floating-cta__title {
	font-size: 13px;
	font-weight: 700;
	color: #bca443;
	line-height: 1.2;
}

.floating-cta__subtitle {
	font-size: 11px;
	font-weight: 500;
	color: #6b7280;
}

.floating-cta__btn {
	display: inline-block;
	padding: 7px 12px;
	background: #bca443;
	color: #fff !important;
	font-size: 12px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	text-align: center;
	transition: background 0.2s;
	align-self: flex-start;
	white-space: nowrap;
}

.floating-cta__btn:hover {
	background: #005153;
}

.floating-cta__handle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	padding: 0;
	border: 0;
	background: #f3f4f4;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.2s;
}

.floating-cta__handle:hover {
	background: #e5e7e7;
}

.floating-cta__chevron {
	font-size: 16px;
	color: #9ca3af;
	line-height: 1;
}

.floating-cta__tab {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 36px;
	height: 72px;
	padding: 0;
	border: 0;
	background: #bca443;
	border-radius: 12px 0 0 12px;
	cursor: pointer;
	box-shadow: -2px 2px 10px rgba(0, 64, 65, 0.2);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-cta--dismissed .floating-cta__tab {
	opacity: 1;
	pointer-events: auto;
}

.floating-cta__tab:hover {
	background: #005153;
}

.floating-cta__tab-chevron {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
}

.floating-cta__tab-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d6c422;
}

@media (max-width: 480px) {
	.floating-cta {
		right: 8px;
		bottom: 16px;
	}
}

/* Accessibility: visually hidden but screen-reader accessible */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Lead capture form (sidebar) */
.cderma-lead-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cderma-lead-form input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background-color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--heading);
	outline: none;
	box-sizing: border-box;
}
.cderma-lead-form input::placeholder {
	color: #6b7280;
}
.cderma-lead-form input:focus {
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
	outline: 2px solid transparent;
}
@media (forced-colors: active) {
	.cderma-lead-form input:focus {
		outline: 2px solid ButtonText;
	}
}
.cderma-lead-form button {
	width: 100%;
	padding: 14px 24px;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 12px;
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s;
}
.cderma-lead-form button:hover {
	background-color: #005153;
}
.cderma-lead-form button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.cderma-lead-form__hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}
.cderma-lead-form__success {
	text-align: center;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: 14px;
	padding: 12px 0;
	margin: 0;
}

/* Cek Kesuburan engagement block (sidebar) */
.cderma-kesuburan-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cderma-kesuburan-btn {
	display: block;
	text-align: center;
	padding: 12px 16px;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s;
}
.cderma-kesuburan-btn--primary {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
}
.cderma-kesuburan-btn--primary:hover {
	background-color: #005153;
}
.cderma-kesuburan-btn--outline {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	border: 1.5px solid rgba(140, 115, 50, 0.3);
}
.cderma-kesuburan-btn--outline:hover {
	background-color: var(--wp--preset--color--primary-surface);
	border-color: var(--wp--preset--color--primary);
}

/* Sidebar: force top-alignment with content column on desktop */
@media (min-width: 783px) {
	.cderma-sidebar {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	.cderma-sidebar-cta {
		position: sticky;
		top: 100px;
	}
}

/* Mobile sidebar reorder: show lead form, kesuburan, testimonial before pillar articles */
@media (max-width: 781px) {
	.cderma-sidebar {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}
	.cderma-sidebar-pillar {
		order: 4;
	}
}

/* ==========================================================================
   Kesuburan Section
   ========================================================================== */

/* Desktop: horizontal card layout */
@media (min-width: 783px) {
	.cderma-kesuburan-section .cderma-tool-card {
		display: grid !important;
		grid-template-columns: 56px 1fr;
		grid-template-rows: auto auto auto auto;
		column-gap: 20px;
		row-gap: 0;
		align-items: start;
		padding: 32px 36px !important;
		border-radius: 28px !important;
	}
	/* Accent bar spans full width */
	.cderma-kesuburan-section .cderma-tool-card > div:first-child {
		grid-column: 1 / -1;
		margin-bottom: 16px;
	}
	/* Icon in left column, spanning title + desc rows */
	.cderma-kesuburan-section .cderma-tool-card > div:nth-child(2) {
		grid-column: 1;
		grid-row: 2 / 4;
		margin-top: 2px;
	}
	/* Title */
	.cderma-kesuburan-section .cderma-tool-card > h3 {
		grid-column: 2;
		grid-row: 2;
		margin: 0 !important;
	}
	/* Description */
	.cderma-kesuburan-section .cderma-tool-card > p {
		grid-column: 2;
		grid-row: 3;
		margin: 6px 0 0 !important;
	}
	/* Button spans full width below */
	.cderma-kesuburan-section .cderma-tool-card > .wp-block-buttons {
		grid-column: 1 / -1;
		grid-row: 4;
		margin-top: 20px !important;
	}
}

/* Mobile */
@media (max-width: 782px) {
	.cderma-kesuburan-section {
		border-radius: 0 !important;
		padding: 40px 20px 32px !important;
	}
	.cderma-kesuburan-section > .wp-block-group[style*="max-width"] {
		margin-bottom: 24px !important;
	}
	.cderma-kesuburan-section .wp-block-columns {
		gap: 16px !important;
	}
	.cderma-kesuburan-section .cderma-tool-card {
		border-radius: 20px !important;
		padding: 24px 20px !important;
		gap: 16px !important;
	}
}

/* ==========================================================================
   Location Page — mobile spacing
   ========================================================================== */

@media (max-width: 781px) {
	.cderma-location-hero {
		min-height: auto !important;
		padding-top: 32px !important;
		padding-bottom: 16px !important;
	}
	.cderma-location-cards {
		padding-top: 16px !important;
	}
}

/* ==========================================================================
   Services Page — tighter spacing on mobile
   ========================================================================== */

@media (max-width: 781px) {
	/* Hero: tight padding on mobile */
	.page-template-page-services main > .wp-block-cover {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	/* Hero inner: reduce blockGap and side padding */
	.page-template-page-services main > .wp-block-cover .wp-block-cover__inner-container > .wp-block-group {
		padding-left: 20px !important;
		padding-right: 20px !important;
		gap: 12px !important;
	}

	/* Hero description: smaller on mobile (exclude badge text) */
	.page-template-page-services main > .wp-block-cover .wp-block-cover__inner-container > .wp-block-group > p {
		font-size: 16px !important;
	}

	/* Section padding on mobile */
	.page-template-page-services main > .wp-block-group {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	/* Card padding on mobile */
	.page-template-page-services .wp-block-column > .wp-block-group[style*="border-radius"] {
		padding: 16px !important;
	}

	/* Column stacking gap on mobile */
	.page-template-page-services .wp-block-columns {
		gap: 12px !important;
	}

	/* Section header to content gap */
	.page-template-page-services .wp-block-group[style*="margin-bottom"] {
		margin-bottom: 12px !important;
	}

	/* Reduce icon container size on mobile */
	.page-template-page-services .wp-block-column > .wp-block-group[style*="border-radius"] div[style*="56px"] {
		width: 44px !important;
		height: 44px !important;
		border-radius: 10px !important;
	}

	/* Reduce icon SVG size on mobile */
	.page-template-page-services .wp-block-column > .wp-block-group[style*="border-radius"] div[style*="56px"] svg {
		width: 24px !important;
		height: 24px !important;
	}

	/* Reduce title margin-top on mobile */
	.page-template-page-services .wp-block-column > .wp-block-group[style*="border-radius"] h3 {
		margin-top: 4px !important;
	}

	/* Tighten card internal blockGap on mobile */
	.page-template-page-services .wp-block-column > .wp-block-group[style*="border-radius"] > * + * {
		margin-top: 6px !important;
	}

	/* Remove extra padding on "Pelajari Selengkapnya" link */
	.page-template-page-services .wp-block-column > .wp-block-group[style*="border-radius"] p[style*="padding-top"] {
		padding-top: 0 !important;
	}

	/* Tighter section header blockGap */
	.page-template-page-services main > .wp-block-group > .wp-block-group[style*="max-width"] {
		gap: 6px !important;
	}

	/* Smaller section headings on mobile */
	.page-template-page-services main h2.has-heading-2-font-size {
		font-size: 24px !important;
	}

	/* Smaller hero heading on mobile */
	.page-template-page-services main .wp-block-cover h1 {
		font-size: 32px !important;
	}

	/* Process step columns: tighter */
	.page-template-page-services .wp-block-columns[style*="48px"] {
		gap: 24px !important;
	}
}

/* ==========================================================================
   Tentang Kami — Team / Specialist Cards (clinic/doctor-team-card)
   ========================================================================== */

.doctor-team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.doctor-team-grid > li {
	display: flex;
	margin: 0;
}

.doctor-team-card {
	display: flex;
	flex-direction: column;
	flex: 1;
	background: #fff;
	border: 1px solid rgba(140, 115, 50, 0.12);
	border-radius: 40px;
	box-shadow: var(--wp--preset--shadow--card);
	padding: 25px;
}

.doctor-team-card__photo-wrap {
	margin: 0 auto;
	width: 65%;
}

.doctor-team-card__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.doctor-team-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--wp--preset--spacing--30, 16px) 8px 0;
}

.doctor-team-card__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--heading);
	margin: 0 0 8px;
}

.doctor-team-card__name a {
	color: inherit;
	text-decoration: none;
}

.doctor-team-card__name a:hover {
	color: var(--wp--preset--color--primary);
}

.doctor-team-card__role {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.doctor-team-card__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--primary);
}

.doctor-team-card__blurb {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	line-height: 1.625;
	color: var(--wp--preset--color--body);
	margin: 0;
	padding: 15px 0 24px;
}

.doctor-team-card__cta {
	display: block;
	margin-top: auto;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	border: 2px solid rgba(140, 115, 50, 0.2);
	border-radius: 16px;
	padding: 16px;
	box-shadow: var(--wp--preset--shadow--soft);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.doctor-team-card__cta:hover {
	background: rgba(140, 115, 50, 0.04);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
	.doctor-team-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Compact horizontal card with a much smaller photo on mobile */
	.doctor-team-card {
		flex-direction: row;
		align-items: flex-start;
		gap: 14px;
		padding: 14px;
		border-radius: 24px;
	}

	.doctor-team-card__photo-wrap {
		flex: 0 0 76px;
		width: 76px;
		height: 76px;
		margin: 0;
	}

	.doctor-team-card__photo {
		width: 76px;
		height: 76px;
		aspect-ratio: auto;
		border-radius: 50%;
	}

	.doctor-team-card__body {
		padding: 0;
	}

	.doctor-team-card__name {
		font-size: 17px;
		margin-bottom: 4px;
	}

	.doctor-team-card__blurb {
		display: none;
	}

	.doctor-team-card__cta {
		margin-top: 12px;
		padding: 10px 14px;
		border-radius: 12px;
		font-size: 13px;
	}
}

/* ==========================================================================
   Buat Janji — Appointment Cards
   ========================================================================== */

.doctor-appointment-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.doctor-appointment-grid > li {
	display: flex;
	margin: 0;
}

/* The location filter (doctor-location-filter.js) hides non-matching cells via
   the [hidden] attribute. The display:flex above would otherwise win over the
   UA [hidden]{display:none}, so re-assert it at higher specificity. */
.doctor-appointment-grid > li[hidden] {
	display: none;
}

.doctor-appointment-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
	border-radius: 16px;
	border: 1px solid var(--wp--preset--color--border);
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	flex: 1;
}

.doctor-appointment-card p {
	margin-top: 0;
	margin-bottom: 0;
}

.doctor-appointment-card h3 {
	margin-top: 0;
	margin-bottom: 0;
}

.doctor-appointment-card__photo {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 14px;
	box-shadow: 0 4px 12px rgba(140, 115, 50, 0.12);
}

.doctor-appointment-card__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--heading);
	margin: 0 0 8px !important;
	min-height: 47px;
}

.doctor-appointment-card__specialty {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
	margin: 0 0 24px !important;
	min-height: 40px;
}

.doctor-appointment-card__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	padding: 12px;
	border-radius: 8px;
	margin-top: auto;
	transition: opacity 0.2s ease;
	text-align: center;
	align-self: stretch;
}

.doctor-appointment-card__btn:hover {
	opacity: 0.88;
	color: #fff;
}

.doctor-appointment-card__btn-location {
	font-size: 11px;
	font-weight: 400;
	opacity: 0.7;
}

.doctor-appointment-card__btn-group {
	display: flex;
	gap: 8px;
	margin-top: auto;
	width: 100%;
}

.doctor-appointment-card > .doctor-appointment-card__btn {
	height: 86px;
}

.doctor-appointment-card__btn-group .doctor-appointment-card__btn {
	margin-top: 0;
	flex: 1;
	height: 86px;
}

/* Footer that pins booking + profile actions to the bottom of the card. */
.doctor-appointment-card__actions {
	margin-top: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.doctor-appointment-card__actions .doctor-appointment-card__btn-group {
	margin-top: 0;
}

/* Secondary outline button: links to the doctor's full profile page. */
.doctor-appointment-card__profile-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	/* border-box so width:100% + padding + 1px border still matches the booking
	   group width; without it the button overflows ~26px past the card padding. */
	box-sizing: border-box;
	padding: 11px 12px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	transition: background 0.2s ease, color 0.2s ease;
}

.doctor-appointment-card__profile-btn:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* Mobile: vertical card layout */
@media (max-width: 781px) {
	.doctor-appointment-grid {
		grid-template-columns: 1fr;
	}

	.doctor-appointment-card {
		flex-direction: column;
		align-items: center;
		padding: 20px 16px;
		border-radius: 12px;
		text-align: center;
	}

	.doctor-appointment-card__photo {
		width: 72px;
		height: 72px;
		margin-bottom: 12px;
	}

	.doctor-appointment-card__name {
		font-size: 15px;
		margin-bottom: 4px !important;
		min-height: 0;
	}

	.doctor-appointment-card__specialty {
		font-size: 12px;
		margin-bottom: 16px !important;
		min-height: 0;
	}

	.doctor-appointment-card__btn {
		font-size: 12px;
		padding: 10px 12px;
		border-radius: 6px;
		height: auto;
		min-height: 0;
		align-self: stretch;
	}

	.doctor-appointment-card > .doctor-appointment-card__btn {
		height: auto;
	}

	.doctor-appointment-card__btn-group {
		width: 100%;
		gap: 8px;
	}

	.doctor-appointment-card__btn-group .doctor-appointment-card__btn {
		font-size: 12px;
		padding: 10px 8px;
		height: auto;
	}

	.doctor-appointment-card__profile-btn {
		font-size: 12px;
		padding: 9px 12px;
		border-radius: 6px;
	}

	.doctor-appointment-card__btn-location {
		font-size: 10px;
	}
}

/* ==========================================================================
   Medical Disclaimer Card (F2)
   ========================================================================== */

.cderma-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 24px;
	background: #E6F5F5;
	border-radius: 10px;
	margin-top: 32px;
	margin-bottom: 8px;
}

.cderma-disclaimer__icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(140, 115, 50, 0.10);
}

.cderma-disclaimer__icon svg {
	width: 16px;
	height: 16px;
	color: #bca443;
}

.cderma-disclaimer__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cderma-disclaimer .cderma-disclaimer__title {
	font-size: 13px;
	font-weight: 600;
	color: #bca443;
	letter-spacing: 0.01em;
}

.cderma-disclaimer p.cderma-disclaimer__text {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: #5C6868;
	margin: 0;
}

@media (max-width: 600px) {
	.cderma-disclaimer {
		padding: 16px;
		gap: 12px;
	}

	.cderma-disclaimer .cderma-disclaimer__title {
		font-size: 12.5px;
	}

	.cderma-disclaimer p.cderma-disclaimer__text {
		font-size: 14px;
		line-height: 1.6;
	}
}

/* ==========================================================================
   About page — prevent stat badge overflow on mobile
   ========================================================================== */

.page-template-page-about .has-surface-background-color {
	overflow: hidden;
}

/* ==========================================================================
   Tim Konten Medis page — doctor profile cards
   ========================================================================== */

/* Profile photo: centered circle with subtle shadow */
.page-id-22320 .entry-content > .wp-block-group > p > .alignleft {
	float: none !important;
	display: block;
	margin: 0 auto 16px !important;
	border-radius: 50%;
	width: 120px !important;
	height: 120px !important;
	object-fit: cover;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* The paragraph containing image + name: center everything */
.page-id-22320 .entry-content > .wp-block-group > p:has(> .alignleft) {
	text-align: center;
	padding: 32px 0 0;
}

/* Name/role span wrapper: block layout, hide underscore overflow */
.page-id-22320 .entry-content > .wp-block-group > p > span[style*="font-size"] {
	display: block;
	text-align: center;
	font-weight: 600;
	line-height: 1.3;
	font-size: 17px !important;
	overflow: hidden;
	max-height: 3.6em;
}

/* Role label (Editor Medis / Editor Konten / Penulis Konten): force own line */
.page-id-22320 .entry-content > .wp-block-group > p > span[style*="font-size"] > span[style*="color"] {
	display: block;
	font-size: 13px !important;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-top: 4px;
}

/* Bio paragraphs: cleaner spacing */
.page-id-22320 .entry-content > .wp-block-group > p[style*="justify"] {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

/* Mobile adjustments */
@media (max-width: 600px) {
	.page-id-22320 .entry-content > .wp-block-group > p > .alignleft {
		width: 100px !important;
		height: 100px !important;
	}

	.page-id-22320 .entry-content > .wp-block-group > p > span[style*="font-size"] {
		font-size: 15px !important;
	}
}

/* ==========================================================================
   Contact Us Popup — header CTA + modal
   ========================================================================== */

.contact-popup-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: 0;
	border-radius: 12px;
	padding: 10px 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
	line-height: 1.2;
}

.contact-popup-trigger:hover,
.contact-popup-trigger:focus-visible {
	background: #00474a;
}

.contact-popup-trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.contact-popup-trigger svg {
	flex-shrink: 0;
}

body.contact-popup-open {
	overflow: hidden;
}

.contact-popup {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.contact-popup[hidden] {
	display: none;
}

.contact-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 25, 0.5);
	backdrop-filter: blur(2px);
}

.contact-popup__card {
	position: relative;
	width: 100%;
	max-width: 380px;
	background: #fff;
	border-radius: 20px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow:
		0 1px 2px rgba(15, 23, 25, 0.08),
		0 24px 48px -12px rgba(15, 23, 25, 0.22);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	animation: contact-popup-card-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.contact-popup__backdrop {
	animation: contact-popup-fade-in 180ms ease-out both;
}

@keyframes contact-popup-card-in {
	from { opacity: 0; transform: translateY(8px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes contact-popup-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes contact-popup-module-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.contact-popup__card > .contact-module,
.contact-popup__card > .contact-module-wrap {
	animation: contact-popup-module-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.contact-popup__card > .contact-module:nth-of-type(1),
.contact-popup__card > .contact-module-wrap:nth-of-type(1) { animation-delay: 60ms; }
.contact-popup__card > .contact-module:nth-of-type(2),
.contact-popup__card > .contact-module-wrap:nth-of-type(2) { animation-delay: 110ms; }
.contact-popup__card > .contact-module:nth-of-type(3),
.contact-popup__card > .contact-module-wrap:nth-of-type(3) { animation-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
	.contact-popup__card,
	.contact-popup__backdrop,
	.contact-popup__card > .contact-module,
	.contact-popup__card > .contact-module-wrap {
		animation: none !important;
	}
}

.contact-popup__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.contact-popup__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	line-height: 1.2;
}

.contact-popup__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #f7f8f8);
	color: var(--wp--preset--color--body, #3f4948);
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.contact-popup__close:hover,
.contact-popup__close:focus-visible {
	background: #e6e9e9;
}

/* Module rows (anchor or button) */
.contact-module {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--body);
	border: 1px solid transparent;
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	cursor: pointer;
	text-align: left;
}

.contact-module--wa,
.contact-module--wa:link,
.contact-module--wa:visited,
.contact-module--wa .contact-module__title {
	color: var(--wp--preset--color--heading, #262626);
}

.contact-module--wa {
	background: #f8f6ec;
	border-color: #efe7cf;
}

.contact-module--wa:hover,
.contact-module--wa:focus-visible {
	background: #f3eeda;
}

.contact-module--janji,
.contact-module--janji:link,
.contact-module--janji:visited,
.contact-module--janji .contact-module__title {
	color: var(--wp--preset--color--heading, #262626);
}

.contact-module--janji {
	background: #f8f6ec;
	border-color: #efe7cf;
	padding: 18px 18px;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
}

.contact-module--janji::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 100% 0%, rgba(188, 164, 67, 0.10), transparent 55%);
	pointer-events: none;
	z-index: 0;
}

.contact-module--janji > * { position: relative; z-index: 1; }

.contact-module--janji .contact-module__title {
	font-size: 17px;
	letter-spacing: -0.01em;
}

.contact-module--janji .contact-module__icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
}

.contact-module--janji:hover,
.contact-module--janji:focus-visible {
	background: #f3eeda;
	transform: translateY(-1px);
}

.contact-module--janji {
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.contact-module__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, #bca443);
	color: #fff;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.contact-module--janji:hover .contact-module__arrow {
	transform: translateX(2px);
}

.contact-module--telepon-head {
	background: #f8f6ec;
	border-color: #efe7cf;
	color: var(--wp--preset--color--heading);
}

.contact-module--telepon-head:hover,
.contact-module--telepon-head:focus-visible {
	background: #f3eeda;
}

.contact-module__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	flex-shrink: 0;
}

.contact-module--janji .contact-module__icon {
	background: var(--wp--preset--color--primary, #bca443);
	color: #fff;
}

.contact-module--wa .contact-module__icon {
	background: var(--wp--preset--color--primary, #bca443);
	color: #fff;
}

.contact-module--telepon-head .contact-module__icon {
	background: var(--wp--preset--color--primary, #bca443);
	color: #fff;
}

.contact-module__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.contact-module__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.contact-module__sub {
	font-size: 12px;
	font-weight: 400;
	color: #6b6450;
	opacity: 1;
	line-height: 1.3;
}

.contact-module--telepon-head .contact-module__sub {
	color: #6b6450;
	opacity: 1;
}

.contact-module__chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
	opacity: 0.7;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.contact-module--telepon-head:hover .contact-module__chev,
.contact-module--telepon-head:focus-visible .contact-module__chev {
	opacity: 1;
}

.contact-module--telepon-head[aria-expanded="true"] .contact-module__chev {
	transform: rotate(180deg);
	opacity: 1;
}

/* Telepon container groups header + expandable list */
.contact-module-wrap.contact-module--telepon {
	border: 1px solid #efe7cf;
	border-radius: 14px;
	overflow: hidden;
}

.contact-module-wrap .contact-module--telepon-head {
	border: 0;
	border-radius: 0;
}

.contact-locations {
	display: grid;
	grid-template-rows: 1fr;
	background: var(--wp--preset--color--surface, #f7f8f8);
	transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.contact-locations > div { overflow: hidden; padding: 4px 16px 12px; }

/* When [hidden], collapse via grid rows so it animates in/out */
.contact-locations[hidden] {
	display: grid;
	grid-template-rows: 0fr;
}

.contact-locations[hidden] > div { padding-top: 0; padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.contact-locations { transition: none; }
}

.contact-location {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
}

.contact-location + .contact-location {
	border-top: 1px solid var(--wp--preset--color--border, #e1e3e3);
}

.contact-location__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.contact-location__city {
	font-size: 10px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.contact-location__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	line-height: 1.3;
}

.contact-location__phone {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.contact-location__phone:hover {
	text-decoration: underline;
}

.contact-location__call,
.contact-location__call:link,
.contact-location__call:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 10px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	flex-shrink: 0;
}

.contact-location__call:hover,
.contact-location__call:focus-visible {
	background: #00474a;
	color: #fff;
}

/* Mobile tweaks for the trigger button */
@media (max-width: 1199px) {
	.contact-popup-trigger {
		padding: 8px 14px;
		font-size: 13px;
	}

	.contact-popup-trigger svg {
		width: 14px;
		height: 14px;
	}
}

@media (max-width: 480px) {
	.contact-popup-trigger {
		padding: 7px 12px;
		font-size: 12px;
		gap: 6px;
	}
	.contact-popup-trigger svg {
		width: 13px;
		height: 13px;
	}
}

/* === Article card (used in Artikel Pilihan sidebar + Artikel Terkait) === */
.cderma-article-card-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cderma-article-card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.cderma-article-card__thumb {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	border-radius: 10px;
	overflow: hidden;
	background: #f2f4f4;
	display: block;
}

.cderma-article-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cderma-article-card__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

/* wpautop injects <p> tags into shortcode output — neutralise them */
.cderma-article-card__body > p {
	margin: 0;
	padding: 0;
}

.cderma-article-card__body > p:empty {
	display: none;
}

.cderma-article-card__pill {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--body);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 9999px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold-dark);
	text-decoration: none;
}

.cderma-article-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.cderma-article-card__title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.cderma-article-card__title a:hover {
	text-decoration: underline;
}

/* Reduce bottom padding of the Artikel Pilihan sidebar widget */
.cderma-sidebar-pillar {
	padding-bottom: 16px !important;
}

/* Space between "Artikel Pilihan" heading and first card */
.cderma-sidebar-pillar .cderma-article-card-list {
	margin-top: 20px;
}

/* Sidebar "Lainnya di {Category}" — heading row + accent bar
   Replicates the styling that previously lived as static block markup in single.html. */
.cderma-sidebar-pillar__title-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.cderma-sidebar-pillar__accent {
	display: block;
	width: 6px;
	height: 24px;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--primary);
	flex: 0 0 6px;
}

.cderma-sidebar-pillar__heading {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

/* Mobile: hide the sidebar related-articles widget entirely.
   The footer "Artikel Terkait" carries all related-article internal links on mobile. */
@media (max-width: 640px) {
	.cderma-sidebar-pillar {
		display: none !important;
	}
}

/* End-of-article related block — 1 hero card + 4 secondaries
   Desktop: hero left, list right (2-col). Tablet: stacked, list as horizontal rows.
   Mobile: stacked, list collapses to 2x2 thumb-on-top grid (excerpt hidden). */
.cderma-related-posts {
	margin-top: 16px;
	padding-top: 0;
}

/* wpautop wraps shortcode output in stray <p> tags — neutralise them */
.cderma-related-posts > p,
.cderma-related-posts__hero > p,
.cderma-related-posts__hero-body > p,
.cderma-related-posts__item-body > p {
	margin: 0;
	padding: 0;
}
.cderma-related-posts > p:empty,
.cderma-related-posts__hero > p:empty,
.cderma-related-posts__hero-body > p:empty,
.cderma-related-posts__item-body > p:empty {
	display: none;
}

.cderma-related-posts__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 24px;
}

.cderma-related-posts__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 1200px) {
	.cderma-related-posts__layout {
		grid-template-columns: 1fr 1fr;
		gap: 4px;
	}
}

/* Hero card */
.cderma-related-posts__hero {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.cderma-related-posts__hero-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 16px;
	overflow: hidden;
	background: #f2f4f4;
}

.cderma-related-posts__hero-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cderma-related-posts__hero-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cderma-related-posts__hero-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.cderma-related-posts__hero-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-color: rgba(140, 115, 50, 0.3);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.2s ease;
}

.cderma-related-posts__hero-title a:hover {
	text-decoration-color: var(--wp--preset--color--primary);
}

.cderma-related-posts__hero-excerpt {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.6;
	color: #3f4948;
}

/* Secondary list — vertical stack of horizontal rows */
.cderma-related-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cderma-related-posts__item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.cderma-related-posts__list > .cderma-related-posts__item {
	padding-left: 0;
	margin-bottom: 0;
}

.cderma-related-posts__list > .cderma-related-posts__item::before {
	content: none;
}

.cderma-related-posts__item-thumb {
	flex: 0 0 110px;
	width: 110px;
	height: 110px;
	border-radius: 12px;
	overflow: hidden;
	background: #f2f4f4;
	display: block;
}

.cderma-related-posts__item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cderma-related-posts__item-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cderma-related-posts__item-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.cderma-related-posts__item-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-color: rgba(140, 115, 50, 0.3);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.2s ease;
}

.cderma-related-posts__item-title a:hover {
	text-decoration-color: var(--wp--preset--color--primary);
}

.cderma-related-posts__item-excerpt {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	line-height: 1.5;
	color: #8a8472;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Mobile: secondaries collapse to a 2x2 grid with thumb on top, title only */
@media (max-width: 640px) {
	.cderma-related-posts__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px 16px;
	}
	.cderma-related-posts__item {
		flex-direction: column;
		gap: 10px;
	}
	.cderma-related-posts__item-thumb {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	.cderma-related-posts__item-title {
		font-size: 14px;
	}
	.cderma-related-posts__item-excerpt {
		display: none;
	}
}

.cderma-related-posts > .cderma-related-posts__pillar-link {
	margin: 44px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	text-align: right;
}

.cderma-related-posts__pillar-link a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-color: rgba(140, 115, 50, 0.3);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.2s ease;
}

.cderma-related-posts__pillar-link a:hover {
	text-decoration-color: var(--wp--preset--color--primary);
}

/* === Layanan Terkait — article→service reverse-link card === */

.cderma-related-service {
	margin: 32px 0 0;
	padding: 16px;
	background: rgba(140, 115, 50, 0.04);
	border-radius: 12px;
}

/* Section label is rendered as <h3>; reset to look like an eyebrow label */
.cderma-related-service__label {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11px;
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cderma-related-service__card {
	display: flex;
	flex-direction: row;
	gap: 14px;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.cderma-related-service__card:hover,
.cderma-related-service__card:focus-visible {
	color: inherit;
	text-decoration: none;
}

.cderma-related-service__card:hover .cderma-related-service__heading,
.cderma-related-service__card:focus-visible .cderma-related-service__heading {
	text-decoration-color: var(--wp--preset--color--primary);
}

.cderma-related-service__media {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	border-radius: 10px;
	overflow: hidden;
	background: #ebedf0;
	display: block;
}

.cderma-related-service__media img,
.cderma-related-service__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cderma-related-service__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: #ebedf0;
}

.cderma-related-service__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cderma-related-service__eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 9px;
	font-weight: 700;
	color: #737d7b;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Card title is rendered as <h4>; reset browser margins */
.cderma-related-service__heading {
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-color: rgba(140, 115, 50, 0.3);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.2s ease;
}

/* Description hidden on mobile to keep the row tight; revealed at desktop */
.cderma-related-service__desc {
	display: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	line-height: 1.5;
	color: #3f4948;
}

.cderma-related-service__cta {
	margin-top: 2px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* Desktop layout — slightly larger thumb + show description */
@media (min-width: 768px) {
	.cderma-related-service {
		padding: 20px 24px;
	}
	.cderma-related-service__label {
		font-size: 12px;
		letter-spacing: 0.08em;
		margin-bottom: 14px;
	}
	.cderma-related-service__card {
		gap: 20px;
	}
	.cderma-related-service__media {
		flex: 0 0 120px;
		width: 120px;
		height: 120px;
		border-radius: 12px;
	}
	.cderma-related-service__eyebrow {
		font-size: 10px;
		letter-spacing: 0.1em;
	}
	.cderma-related-service__heading {
		font-size: 18px;
	}
	.cderma-related-service__desc {
		display: block;
	}
	.cderma-related-service__cta {
		font-size: 13px;
		margin-top: 4px;
	}
}

/* === Category Archive: Featured + Sorted List === */

/* Section label ("UNGGULAN") + headings */
.cderma-featured-section__header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.cderma-section-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #ffffff;
	background: var(--wp--preset--color--primary);
	padding: 6px 14px;
	border-radius: 9999px;
}

.cderma-section-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.cderma-section-heading--plain {
	margin: 0 0 24px;
}

/* Article grid (shared by featured + list) */
.cderma-article-grid {
	display: grid;
	gap: 24px;
}

.cderma-article-grid--1 { grid-template-columns: minmax(0, 1fr); }
.cderma-article-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cderma-article-grid--3,
.cderma-featured-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cderma-featured-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cderma-featured-grid--1 { grid-template-columns: minmax(0, 720px); }

.cderma-article-grid__empty {
	grid-column: 1 / -1;
	color: var(--wp--preset--color--body);
	font-family: var(--wp--preset--font-family--body);
}

/* Large vertical card (featured row + desktop list) */
.cderma-article-card-large {
	background: #ffffff;
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.cderma-article-card-large__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f2f4f4;
}

.cderma-article-card-large__thumb img,
.cderma-article-card-large__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cderma-article-card-large__body {
	padding: 14px 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.cderma-article-card-large__pill {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 9999px;
	text-decoration: none;
	line-height: 1.2;
}

.cderma-article-card-large--featured .cderma-article-card-large__pill {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
}

.cderma-article-card-large--list .cderma-article-card-large__pill {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold-dark);
}

.cderma-article-card-large__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.375;
	margin: 0;
}

.cderma-article-card-large__title a {
	color: var(--wp--preset--color--nav-active);
	text-decoration: none;
}

.cderma-article-card-large__title a:hover {
	text-decoration: underline;
}

.cderma-article-card-large__excerpt {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--body);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* E-E-A-T reviewer byline on hub grid cards (injected after the excerpt) */
.cderma-card-byline {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--wp--preset--color--gold-dark);
}

.cderma-card-byline svg {
	flex: none;
	color: var(--wp--preset--color--primary);
}

.cderma-card-byline strong {
	font-weight: 700;
}

.cderma-article-card-large__footer {
	margin-top: auto;
	padding-top: 4px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.cderma-article-card-large__more {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
}

.cderma-article-card-large__more:hover {
	text-decoration: underline;
}

/* Pagination */
.cderma-pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
}

.cderma-pagination .page-numbers {
	display: inline-flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.cderma-pagination .page-numbers li .page-numbers,
.cderma-pagination .page-numbers > .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--border-muted);
	background: #ffffff;
	color: var(--wp--preset--color--body);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	text-decoration: none;
	line-height: 1;
}

.cderma-pagination .page-numbers li .page-numbers.current,
.cderma-pagination .page-numbers > .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #ffffff;
	font-weight: 700;
}

.cderma-pagination .page-numbers li .page-numbers:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.cderma-pagination .page-numbers .dots {
	border: none;
	background: transparent;
}

/* Mobile: list cards collapse to compact horizontal (featured stays vertical) */
@media (max-width: 767px) {
	.cderma-article-grid--3,
	.cderma-article-grid--2,
	.cderma-featured-grid--3,
	.cderma-featured-grid--2,
	.cderma-featured-grid--1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.cderma-article-card-large--list {
		flex-direction: row;
		gap: 10px;
		border-radius: 10px;
		padding: 8px;
		align-items: flex-start;
	}

	.cderma-article-card-large--list .cderma-article-card-large__thumb {
		flex: 0 0 96px;
		width: 96px;
		height: 96px;
		aspect-ratio: 1 / 1;
		border-radius: 8px;
		overflow: hidden;
	}

	.cderma-article-card-large--list .cderma-article-card-large__thumb img {
		object-position: center 40%;
	}

	.cderma-article-card-large--list .cderma-article-card-large__body {
		padding: 0;
		gap: 6px;
		flex: 1;
		min-width: 0;
		justify-content: flex-start;
	}

	.cderma-article-card-large--list .cderma-article-card-large__excerpt,
	.cderma-article-card-large--list .cderma-article-card-large__footer {
		display: none;
	}

	.cderma-article-card-large--list .cderma-article-card-large__title {
		font-size: 15px;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.cderma-article-card-large--list .cderma-article-card-large__pill {
		font-size: 10px;
		padding: 3px 9px;
	}

	/* Tighten grid gap between stacked list cards */
	.cderma-list-section .cderma-article-grid {
		gap: 6px;
	}
}

/* === Category Archive: Hub Layout (hero + list) ===
   Featured section as hero card on the left + compact list on the right.
   Replaces the previous 1/2/3-up grid for curated articles. */

.cderma-hub-section__intro {
	max-width: 68ch;
	margin: 0 0 24px;
	color: var(--wp--preset--color--body, #3a3833);
	line-height: 1.6;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
}

.cderma-hub-section__intro p:first-child { margin-top: 0; }
.cderma-hub-section__intro p:last-child  { margin-bottom: 0; }

.cderma-hub-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.cderma-hub-section__grid > .cderma-article-card-large {
	max-width: 600px;
}

.cderma-hub-section__list {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cderma-hub-section__list-items {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--border, #ece9df);
}

.cderma-hub-section__list-items > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cderma-hub-section__list-items > li::marker {
	content: "";
}

.cderma-hub-listrow {
	border-bottom: 1px solid var(--wp--preset--color--border, #ece9df);
}

.cderma-hub-listrow__link {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 14px 0;
	color: inherit;
	text-decoration: none;
	transition: color 160ms ease;
}

.cderma-hub-listrow__link:hover .cderma-hub-listrow__title {
	color: var(--wp--preset--color--primary, #bca443);
}

.cderma-hub-listrow__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #bca443);
	outline-offset: 2px;
	border-radius: 4px;
}

.cderma-hub-listrow__thumb {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wp--preset--color--primary-surface, #f7f3e8);
}

.cderma-hub-listrow__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cderma-hub-listrow__thumb-img--placeholder {
	background: var(--wp--preset--color--primary-surface, #f7f3e8);
}

.cderma-hub-listrow__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cderma-hub-listrow__pill {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--body);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 9999px;
	background: var(--wp--preset--color--gold, #f5e6c8);
	color: var(--wp--preset--color--gold-dark, #7a5a1f);
	line-height: 1.2;
}

.cderma-hub-listrow__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--heading, #262626);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 160ms ease;
}

.cderma-hub-listrow__excerpt {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted, #8a8472);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 899px) {
	.cderma-hub-section__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.cderma-hub-listrow--desktop-only { display: none; }

	.cderma-hub-listrow__link {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 12px;
	}

	.cderma-hub-listrow__thumb {
		width: 72px;
		height: 72px;
	}
}

/* ──────────────────────────────────────────────────────────────────────
   Condition Router — /artikel/ entry block above the article grid.
   Four condition-framed cards routing into category hubs.
   ────────────────────────────────────────────────────────────────────── */

.cderma-condition-router {
	background: var(--wp--preset--color--surface, #faf9f6);
	padding: 64px var(--wp--preset--spacing--40, 32px) 72px;
}

.cderma-condition-router__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.cderma-condition-router__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	max-width: 640px;
}

.cderma-condition-router__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 4vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.cderma-condition-router__lede {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--body);
	margin: 0;
}

.cderma-condition-router__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

@media (max-width: 1024px) {
	.cderma-condition-router__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.cderma-condition-router__grid { grid-template-columns: 1fr; }
}

.cderma-condition-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 24px;
	background: #ffffff;
	border-radius: 24px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cderma-condition-card:hover,
.cderma-condition-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	outline: none;
}

.cderma-condition-card__badge {
	width: 56px;
	height: 56px;
	border-radius: 9999px;
	background: rgba(140, 115, 50, 0.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

.cderma-condition-card__badge svg {
	width: 24px;
	height: 24px;
}

.cderma-condition-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.cderma-condition-card__body {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--body);
	margin: 0;
	flex: 1;
}

.cderma-condition-card__cta {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-top: auto;
}

.cderma-condition-router__fallback {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	border-radius: 9999px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: border-color 0.18s ease;
}

.cderma-condition-router__fallback:hover,
.cderma-condition-router__fallback:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}

.cderma-condition-router__fallback-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d8c98a;
	flex-shrink: 0;
}

.cderma-condition-router__fallback-cta {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* Booking fallback below the article-hub condition_index grid (home.html). */
.cderma-condition-router__fallback-wrap {
	text-align: center;
	padding: 0 var(--wp--preset--spacing--40, 24px) 8px;
	margin-top: -16px;
}

@media (max-width: 600px) {
	.cderma-condition-router { padding: 48px var(--wp--preset--spacing--40, 24px) 56px; }
	.cderma-condition-router__inner { gap: 32px; }
	.cderma-condition-router__fallback { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* Condition Index — "Telusuri berdasarkan kondisi" hub section
   (portable subsystem: inc/condition-index/). Contained surface panel with a
   3-up anchor card grid; equal-height cards with a hairline footer CTA so the
   bottom region reads as an intentional footer, not dead space. */
.condition-index {
	background: var(--wp--preset--color--surface, #faf9f6);
	border-radius: 24px;
	padding: 20px clamp(18px, 3.5vw, 48px) 44px;
}

.condition-index__inner {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.condition-index__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
	max-width: 600px;
}

.cderma-page-content .condition-index .condition-index__label + .condition-index__heading,
.condition-index .condition-index__label + .condition-index__heading {
	margin-top: 6px;
}

.condition-index__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #ffffff;
	background: var(--wp--preset--color--primary);
	padding: 6px 14px;
	border-radius: 9999px;
}

.condition-index__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.condition-index__lede {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--body);
	margin: 0;
}

.condition-index__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
}

@media (max-width: 980px) {
	.condition-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.condition-index__grid { grid-template-columns: 1fr; }
}

.condition-index__card {
	display: flex;
	flex-direction: column;
	padding: 20px 22px;
	background: #ffffff;
	border: 1px solid rgba(140, 115, 50, 0.10);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(16, 40, 40, 0.04);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.condition-index__card:hover,
.condition-index__card:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(140, 115, 50, 0.30);
	box-shadow: 0 14px 30px rgba(16, 40, 40, 0.10);
	outline: none;
}

.condition-index__badge {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(140, 115, 50, 0.10);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
	margin-bottom: 14px;
}

.condition-index__badge svg {
	width: 24px;
	height: 24px;
}

.condition-index__card-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--primary);
	margin: 0 0 6px;
}

.condition-index__card-body {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--body);
	margin: 0 0 14px;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.condition-index__card-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 13px;
	border-top: 1px solid rgba(16, 40, 40, 0.08);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.condition-index__card-cta-arrow {
	transition: transform 0.2s ease;
}

.condition-index__card:hover .condition-index__card-cta-arrow {
	transform: translateX(4px);
}

@media (max-width: 600px) {
	.condition-index { border-radius: 20px; padding: 16px 14px 36px; }
	.condition-index__inner { gap: 26px; }
	.condition-index__header { gap: 0; }
	.condition-index__grid { gap: 10px; }

	/* Compact horizontal row: icon left, title + 2-line blurb center, arrow right. */
	.condition-index__card {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"badge title arrow"
			"badge body  arrow";
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		padding: 14px 16px;
		border-radius: 16px;
	}
	.condition-index__card:hover { transform: none; }
	.condition-index__badge {
		grid-area: badge;
		width: 44px;
		height: 44px;
		margin: 0;
		align-self: center;
	}
	.condition-index__badge svg { width: 22px; height: 22px; }
	.condition-index__card-title {
		grid-area: title;
		margin: 0;
		font-size: 15.5px;
	}
	.condition-index__card-body {
		grid-area: body;
		margin: 0;
		font-size: 13px;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.condition-index__card-cta {
		grid-area: arrow;
		border-top: 0;
		padding: 0;
		margin: 0;
		align-self: center;
	}
	.condition-index__card-cta-label { display: none; }
	.condition-index__card-cta-arrow { font-size: 20px; line-height: 1; }
}

/* ==========================================================================
   Terima Kasih — post-LP confirmation page (/terima-kasih/)
   (.cderma-tk2-* class names retained from the v2 build; renaming them would
    break existing GTM triggers and the tk2_lead_landed dataLayer event.)
   ========================================================================== */

.cderma-tk2 {
	--tk2-primary: var(--wp--preset--color--primary, #bca443);
	--tk2-primary-surface: var(--wp--preset--color--primary-surface, #f7f3e8);
	--tk2-heading: var(--wp--preset--color--heading, #262626);
	--tk2-body: #3f4948;
	--tk2-muted: #6e7877;
	--tk2-border: #dce8e8;
	--tk2-wa: #25d366;
	--tk2-wa-dark: #19af50;
	--tk2-success: #16a34a;
	--tk2-success-bg: #dcfce7;
	--tk2-success-dark: #15803d;
	--tk2-star: #f0b429;
	--tk2-cream: #faf4ea;
	--tk2-mint: #e9f3ee;
}

/* Soft tinted section backgrounds — alternating cream / mint for visual rhythm.
   Overrides theme white/background presets within the tk2 page only. */
.cderma-tk2 .cderma-tk2-hero.has-background { background-color: var(--tk2-cream) !important; }
.cderma-tk2 .cderma-tk2-steps.has-background { background-color: var(--tk2-mint) !important; }
.cderma-tk2 .cderma-tk2-trust.has-background { background-color: var(--tk2-cream) !important; }
.cderma-tk2 .cderma-tk2-articles.has-background { background-color: var(--tk2-mint) !important; }

/* Crisper card borders on tinted backgrounds */
.cderma-tk2 .cderma-tk2-step,
.cderma-tk2 .cderma-tk2-stats-card,
.cderma-tk2 .cderma-tk2-loc-card,
.cderma-tk2 .cderma-tk2-article-card {
	border-color: #e6ddc7;
	box-shadow: 0 1px 2px rgba(60, 50, 30, 0.04);
}
.cderma-tk2 .cderma-tk2-steps .cderma-tk2-step,
.cderma-tk2 .cderma-tk2-articles .cderma-tk2-article-card {
	border-color: #d4e6da;
	box-shadow: 0 1px 2px rgba(0, 80, 60, 0.04);
}

/* Bottom quiz card: lift to white so it pops on the mint section */
.cderma-tk2 .cderma-tk2-quiz-card {
	background: #ffffff;
	border-color: #d4e6da;
	box-shadow: 0 4px 14px rgba(0, 80, 60, 0.06);
}

/* ---- 1. Hero ---- */
.cderma-tk2-hero { text-align: center; }

.cderma-tk2-success-badge {
	width: 72px; height: 72px; border-radius: 50%;
	background: var(--tk2-success-bg); color: var(--tk2-success);
	display: inline-flex; align-items: center; justify-content: center;
	margin: 0 auto;
}

.cderma-tk2-eyebrow-wrap { text-align: center; }
.cderma-tk2-eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--tk2-success-bg); color: var(--tk2-success-dark);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
	padding: 6px 14px; border-radius: 999px;
}
.cderma-tk2-eyebrow__dot {
	width: 8px; height: 8px; border-radius: 50%; background: var(--tk2-success);
}

.cderma-tk2-subhead { max-width: 640px; margin-left: auto; margin-right: auto; }
.cderma-tk2-emphasis { color: var(--tk2-primary); font-weight: 700; }

/* WhatsApp primary CTA */
.cderma-tk2-primary-cta { display: flex; justify-content: center; margin-top: 4px; }
.cderma-tk2-wa-btn {
	display: inline-flex; align-items: center; gap: 12px;
	background: var(--tk2-wa); color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 18px; font-weight: 700;
	padding: 18px 32px; border-radius: 12px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(37,211,102,0.28);
	transition: background 150ms ease, transform 150ms ease;
}
.cderma-tk2-wa-btn:hover { background: var(--tk2-wa-dark); transform: translateY(-1px); color: #fff; }
.cderma-tk2-wa-btn__icon { flex: 0 0 auto; }

/* Phone chips */
.cderma-tk2-phones {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center;
}
.cderma-tk2-phones__or { color: var(--tk2-body); font-size: 14px; font-weight: 500; }
.cderma-tk2-phone-chip {
	display: inline-flex; align-items: baseline; gap: 6px;
	background: var(--tk2-primary-surface); color: var(--tk2-body);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	padding: 8px 14px; border-radius: 8px;
	text-decoration: none;
	transition: background 150ms ease;
}
.cderma-tk2-phone-chip:hover { background: #e6f4f4; }
.cderma-tk2-phone-chip__city { color: var(--tk2-body); font-weight: 500; }
.cderma-tk2-phone-chip__num { color: var(--tk2-primary); font-weight: 700; }

/* AI Quiz tertiary link */
.cderma-tk2-quiz-link-wrap {
	margin: 0; text-align: center; font-size: 14px; color: var(--tk2-muted);
	font-family: var(--wp--preset--font-family--body);
}
.cderma-tk2-quiz-link {
	color: var(--tk2-primary); font-weight: 700; text-decoration: underline;
}
.cderma-tk2-quiz-link:hover { text-decoration: none; }

/* ---- 2. What Happens Next ---- */
.cderma-tk2-step-grid { align-items: stretch; }
.cderma-tk2-step {
	background: #fff; border: 1px solid var(--tk2-border); border-radius: 16px;
	padding: 28px 24px; height: 100%;
	display: flex; flex-direction: column; gap: 12px;
	font-family: var(--wp--preset--font-family--body);
}
.cderma-tk2-step__num {
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--tk2-primary-surface); color: var(--tk2-primary);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800; font-size: 18px;
}
.cderma-tk2-step__badge {
	display: inline-block; align-self: flex-start;
	background: var(--tk2-primary-surface); color: var(--tk2-primary);
	font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
	padding: 4px 10px; border-radius: 999px;
}
.cderma-tk2-step__title {
	margin: 0; color: var(--tk2-heading);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 20px; line-height: 1.3;
}
.cderma-tk2-step__body { margin: 0; color: var(--tk2-body); font-size: 15px; line-height: 1.55; }

/* ---- 3. Social Proof + Clinic Visit ---- */
.cderma-tk2-trust-grid { align-items: stretch; }
.cderma-tk2-stats-card {
	background: #fff; border: 1px solid var(--tk2-border); border-radius: 16px;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--body);
	display: flex; flex-direction: column;
	padding: 32px; gap: 24px;
}
.cderma-tk2-stats { display: flex; justify-content: space-between; gap: 16px; }
.cderma-tk2-stat { display: flex; flex-direction: column; gap: 2px; }
.cderma-tk2-stat__num {
	color: var(--tk2-primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800; font-size: 32px;
}
.cderma-tk2-stat__lbl { color: var(--tk2-body); font-size: 13px; font-weight: 500; }
.cderma-tk2-stat__rating { display: inline-flex; align-items: baseline; gap: 6px; }
.cderma-tk2-stat__stars { color: var(--tk2-star); font-size: 16px; font-weight: 700; }
.cderma-tk2-divider { border: 0; border-top: 1px solid var(--tk2-border); margin: 0; }

/* Lead-doctor card — sibling of stats-card. Replaces the v2 logo-as-avatar
   "doctor-mini" with a real named doctor + supporting team chips. */
.cderma-tk2-lead-doctor {
	margin-top: 20px;
	background: #fff;
	border: 1px solid var(--tk2-border);
	border-radius: 16px;
	overflow: hidden;
}
.cderma-tk2-lead-doctor__band {
	background: #8c7332;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	padding: 8px 20px;
}
/* Each row links to the doctor's profile. Two rows stack inside the card,
   separated by a hairline divider. */
.cderma-tk2-lead-doctor__row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	color: inherit;
	text-decoration: none;
	border-top: 1px solid var(--tk2-border);
	transition: background-color .15s ease;
}
.cderma-tk2-lead-doctor__row--first { border-top: 0; }
.cderma-tk2-lead-doctor__row:hover { background: var(--tk2-primary-surface); }
.cderma-tk2-lead-doctor__avatar {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--tk2-primary-surface);
	border: 2px solid var(--tk2-primary);
	color: #8c7332;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 20px;
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
}
/* Photo variant — same circular footprint; cover-crop hides the gray frame
   that's baked into the source files (real fix: re-export the photos). */
.cderma-tk2-lead-doctor__avatar--photo {
	object-fit: cover;
	display: block;
	box-shadow: 0 2px 6px rgba(140, 115, 50, 0.12);
}
.cderma-tk2-lead-doctor__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cderma-tk2-lead-doctor__name {
	margin: 0; color: var(--tk2-heading);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 16px; line-height: 1.25;
}
.cderma-tk2-lead-doctor__creds {
	margin: 0; color: var(--tk2-body);
	font-size: 12px; font-weight: 500; line-height: 1.4;
}
.cderma-tk2-lead-doctor__role { margin: 0; color: var(--tk2-muted); font-size: 12px; line-height: 1.4; }
.cderma-tk2-lead-doctor__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 20px;
	background: var(--tk2-primary-surface);
	color: #8c7332;
	font-size: 13px; font-weight: 600;
	text-decoration: none;
	border-top: 1px solid var(--tk2-border);
	transition: background-color .15s ease;
}
.cderma-tk2-lead-doctor__footer:hover { background: #efe7cf; }
.cderma-tk2-lead-doctor__footer-arrow { font-weight: 700; }

/* Google reviews block (inside stats card) — honest 5,0 made credible via
   verified badge + per-location counts that link to the live Google listings. */
.cderma-tk2-reviews { display: flex; flex-direction: column; gap: 12px; }
.cderma-tk2-reviews__hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.cderma-tk2-reviews__stars { color: var(--tk2-star); font-size: 18px; letter-spacing: 1px; }
.cderma-tk2-reviews__score {
	color: var(--tk2-heading); font-family: var(--wp--preset--font-family--heading);
	font-weight: 800; font-size: 22px; line-height: 1;
}
.cderma-tk2-reviews__src { color: var(--tk2-body); font-size: 14px; font-weight: 600; }
.cderma-tk2-reviews__verified {
	display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
	background: var(--tk2-success-bg); color: var(--tk2-success-dark);
	font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.cderma-tk2-reviews__locs { display: flex; flex-direction: column; gap: 8px; }
.cderma-tk2-review-loc {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px; border: 1px solid var(--tk2-border); border-radius: 10px;
	background: #fff; text-decoration: none;
	transition: background 150ms ease, border-color 150ms ease;
}
.cderma-tk2-review-loc:hover { background: var(--tk2-primary-surface); border-color: var(--tk2-primary); }
.cderma-tk2-review-loc__city {
	color: var(--tk2-heading);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 14px;
}
.cderma-tk2-review-loc__meta {
	margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
	color: var(--tk2-body); font-size: 13px; font-weight: 600;
}
.cderma-tk2-review-loc__star { color: var(--tk2-star); }
.cderma-tk2-review-loc__arrow { color: var(--tk2-muted); flex: 0 0 auto; }
.cderma-tk2-review-loc:hover .cderma-tk2-review-loc__arrow { color: var(--tk2-primary); }

/* Clinic location cards — two clinics, stacked in the right column */
.cderma-tk2-loc-stack { display: flex; flex-direction: column; gap: 20px; height: 100%; }
.cderma-tk2-loc-card {
	background: #fff; border: 1px solid var(--tk2-border); border-radius: 16px;
	padding: 22px 24px; flex: 1;
	display: flex; flex-direction: column; gap: 10px;
	font-family: var(--wp--preset--font-family--body);
}
.cderma-tk2-loc-card__head { display: flex; align-items: center; gap: 8px; }
.cderma-tk2-loc-card__pin { color: var(--tk2-primary); flex: 0 0 auto; display: inline-flex; }
.cderma-tk2-loc-card__city {
	color: var(--tk2-heading);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 18px;
}
.cderma-tk2-loc-card__addr { margin: 0; color: var(--tk2-body); font-size: 14px; line-height: 1.55; }
.cderma-tk2-loc-card__hours { margin: 0; color: var(--tk2-muted); font-size: 13px; }
.cderma-tk2-loc-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.cderma-tk2-loc-card__btn {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--tk2-primary); color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700; font-size: 14px;
	padding: 11px 18px; border-radius: 10px;
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease;
}
.cderma-tk2-loc-card__btn:hover { background: #00595b; color: #fff; }
.cderma-tk2-loc-card__btn--ghost {
	background: transparent; color: var(--tk2-primary);
	border: 1px solid var(--tk2-primary);
}
.cderma-tk2-loc-card__btn--ghost:hover { background: var(--tk2-primary-surface); color: var(--tk2-primary); }

/* ---- 4. Articles + AI Quiz ---- */
.cderma-tk2-articles__hdr { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.cderma-tk2-articles__eyebrow {
	display: block; color: var(--tk2-primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
}
.cderma-tk2-articles__title {
	margin: 0; color: var(--tk2-heading);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 26px; line-height: 1.3;
}

.cderma-tk2-article-grid { align-items: stretch; }
.cderma-tk2-article-card {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--tk2-border); border-radius: 16px;
	overflow: hidden; text-decoration: none; color: inherit;
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.cderma-tk2-article-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.cderma-tk2-article-card__img {
	height: 160px;
	background-color: var(--tk2-primary-surface);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.cderma-tk2-article-card__img--biaya {
	background-color: #dcfce7;
}
.cderma-tk2-article-card__img--persiapan {
	background-color: #e0e7ff;
}
.cderma-tk2-article-card__img--keberhasilan {
	background-color: #fee2e2;
}
.cderma-tk2-article-card__body {
	padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1;
	font-family: var(--wp--preset--font-family--body);
}
.cderma-tk2-article-card__eyebrow {
	display: inline-block; align-self: flex-start;
	background: var(--tk2-primary-surface); color: var(--tk2-primary);
	font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
	padding: 3px 8px; border-radius: 999px;
}
.cderma-tk2-article-card__title {
	margin: 0; color: var(--tk2-heading);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 17px; line-height: 1.35;
}
.cderma-tk2-article-card__meta { margin: 0; color: var(--tk2-muted); font-size: 12px; font-weight: 500; }

/* AI Quiz card */
.cderma-tk2-quiz-card {
	display: flex; align-items: center; gap: 24px;
	background: #f7fbfb; border: 1px solid var(--tk2-border); border-radius: 16px;
	padding: 28px 32px;
	font-family: var(--wp--preset--font-family--body);
}
.cderma-tk2-quiz-card__icon {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--tk2-primary); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800; font-size: 28px;
	flex: 0 0 auto;
}
.cderma-tk2-quiz-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cderma-tk2-quiz-card__title {
	margin: 0; color: var(--tk2-heading);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 18px;
}
.cderma-tk2-quiz-card__sub { margin: 0; color: var(--tk2-body); font-size: 14px; line-height: 1.55; }
.cderma-tk2-quiz-card__sub strong { color: var(--tk2-primary); font-weight: 700; }
.cderma-tk2-quiz-card__btn {
	display: inline-flex; align-items: center; justify-content: center;
	border: 2px solid var(--tk2-primary); color: var(--tk2-primary); background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700; font-size: 15px;
	padding: 12px 22px; border-radius: 12px;
	text-decoration: none; flex: 0 0 auto;
	transition: background 150ms ease, color 150ms ease;
}
.cderma-tk2-quiz-card__btn:hover { background: var(--tk2-primary); color: #fff; }

.cderma-tk2-disclaimer {
	margin: 0; text-align: center;
	color: var(--tk2-muted); font-size: 13px;
	font-family: var(--wp--preset--font-family--body);
}

/* ---- Sticky mobile bottom CTA: removed per design (was duplicative of hero WA button) ---- */
.cderma-tk2-sticky { display: none !important; }

/* ---- Responsive (≤768px) — compressed vertical rhythm ---- */
@media (max-width: 768px) {
	.cderma-tk2-hero { padding-top: 20px !important; padding-bottom: 20px !important; }
	.cderma-tk2-steps { padding-top: 24px !important; padding-bottom: 24px !important; }
	.cderma-tk2-trust { padding-top: 24px !important; padding-bottom: 24px !important; }
	.cderma-tk2-articles { padding-top: 24px !important; padding-bottom: 28px !important; }

	/* Tighten column stacking gap (WP defaults to 32px row-gap when stacked) */
	.cderma-tk2 .wp-block-columns { gap: 12px !important; }
	.cderma-tk2-steps,
	.cderma-tk2-trust,
	.cderma-tk2-articles { row-gap: 18px; }
	.cderma-tk2-hero { gap: 10px !important; }

	.cderma-tk2-success-badge { width: 48px; height: 48px; }
	.cderma-tk2-success-badge svg { width: 28px; height: 28px; }
	.cderma-tk2-eyebrow { font-size: 11px; padding: 4px 10px; }
	.cderma-tk2 h1.wp-block-heading { font-size: 28px !important; line-height: 1.15 !important; }
	.cderma-tk2-subhead { font-size: 15px !important; line-height: 1.45 !important; }
	.cderma-tk2-wa-btn { font-size: 16px; padding: 13px 22px; width: 100%; justify-content: center; }
	.cderma-tk2-primary-cta { padding: 0 4px; margin-top: 2px; }

	.cderma-tk2-phones { flex-direction: column; align-items: stretch; gap: 6px; }
	.cderma-tk2-phones__or { display: none; }
	.cderma-tk2-phone-chip { justify-content: center; padding: 8px 14px; }
	.cderma-tk2-quiz-link-wrap { font-size: 13px; margin-top: 2px; }

	/* Section headings — compress */
	.cderma-tk2 h2.wp-block-heading { font-size: 19px !important; line-height: 1.25 !important; }

	/* Steps — compact horizontal-ish cards */
	.cderma-tk2-step { padding: 14px 16px; gap: 6px; }
	.cderma-tk2-step__num { width: 28px; height: 28px; font-size: 14px; }
	.cderma-tk2-step__badge { font-size: 10px; padding: 3px 8px; }
	.cderma-tk2-step__title { font-size: 16px; }
	.cderma-tk2-step__body { font-size: 14px; line-height: 1.5; }

	/* Trust — slimmer cards */
	.cderma-tk2-stats { flex-wrap: wrap; gap: 8px 16px; }
	.cderma-tk2-stat__num { font-size: 20px; }
	.cderma-tk2-stats-card { padding: 16px; gap: 12px; }
	.cderma-tk2-lead-doctor__row { padding: 14px 16px; gap: 14px; }
	.cderma-tk2-lead-doctor__avatar { width: 48px; height: 48px; font-size: 16px; }
	.cderma-tk2-lead-doctor__name { font-size: 15px; }
	.cderma-tk2-lead-doctor__creds,
	.cderma-tk2-lead-doctor__role { font-size: 12px; }
	.cderma-tk2-lead-doctor__footer { padding: 10px 16px; font-size: 12px; }

	.cderma-tk2-reviews__score { font-size: 19px; }
	.cderma-tk2-reviews__verified { margin-left: 0; }
	.cderma-tk2-review-loc { padding: 9px 12px; }
	.cderma-tk2-loc-stack { gap: 12px; }
	.cderma-tk2-loc-card { padding: 14px 16px; gap: 8px; }
	.cderma-tk2-loc-card__city { font-size: 16px; }
	.cderma-tk2-loc-card__addr { font-size: 13px; line-height: 1.45; }
	.cderma-tk2-loc-card__hours { font-size: 12px; }
	.cderma-tk2-loc-card__actions { gap: 8px; }
	.cderma-tk2-loc-card__btn { padding: 10px 14px; font-size: 13px; flex: 1; }

	/* Articles — horizontal cards on mobile (thumb left, text right) */
	.cderma-tk2-article-card { flex-direction: row; align-items: stretch; min-height: 92px; }
	.cderma-tk2-article-card__img { height: auto; width: 110px; flex: 0 0 110px; }
	.cderma-tk2-article-card__body { padding: 10px 12px; gap: 4px; }
	.cderma-tk2-article-card__eyebrow { font-size: 9px; padding: 2px 7px; }
	.cderma-tk2-article-card__title { font-size: 14px; line-height: 1.3; }
	.cderma-tk2-article-card__meta { font-size: 11px; }

	.cderma-tk2-quiz-card { flex-direction: column; text-align: center; padding: 16px 16px; gap: 10px; }
	.cderma-tk2-quiz-card__icon { width: 44px; height: 44px; font-size: 22px; }
	.cderma-tk2-quiz-card__title { font-size: 16px; }
	.cderma-tk2-quiz-card__sub { font-size: 13px; }
	.cderma-tk2-quiz-card__body { align-items: center; gap: 2px; }
	.cderma-tk2-quiz-card__btn { width: 100%; padding: 11px 18px; font-size: 14px; }

	.cderma-tk2-disclaimer { font-size: 12px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Homepage — "Warm Editorial" (photo-led front page)
   Pattern: patterns/homepage.php. Full-bleed <section>s (post-content layout is
   "default", so each section spans the viewport). BEM under .cderma-home-*,
   theme CSS-vars only. Breakpoints: 1024px (tablet), 600px (mobile).
   ────────────────────────────────────────────────────────────────────────── */

/* Shared buttons (HTML sections — mirror the wp:button styling) */
.cderma-home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 14px 30px;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.cderma-home-btn:focus-visible { outline: 2px solid var(--wp--preset--color--gold-dark); outline-offset: 2px; }
.cderma-home-btn--primary { background: var(--wp--preset--color--primary); color: #fff; }
.cderma-home-btn--primary:hover { background: var(--wp--preset--color--nav-active); color: #fff; }
.cderma-home-btn--outline { background: transparent; color: var(--wp--preset--color--gold-dark); border-color: var(--wp--preset--color--gold-dark); }
.cderma-home-btn--outline:hover { background: var(--wp--preset--color--gold-dark); color: #fff; }
.cderma-home-btn--white { background: #fff; color: var(--wp--preset--color--gold-dark); }
.cderma-home-btn--white:hover { background: rgba(255, 255, 255, 0.88); color: var(--wp--preset--color--gold-dark); }
.cderma-home-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.cderma-home-btn--ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: #fff; }

/* Shared section scaffolding */
.cderma-home-section {
	padding-block: clamp(56px, 7vw, 88px);
	padding-inline: var(--wp--preset--spacing--40, 32px);
}
.cderma-home-section--bg { background: var(--wp--preset--color--background, #faf9f6); }
.cderma-home-section--bg2 { background: var(--wp--preset--color--background, #faf9f6); }
.cderma-home-section--surface { background: var(--wp--preset--color--surface, #f1efe8); }
.cderma-home-section__inner { max-width: 1216px; margin-inline: auto; }

.cderma-home-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
	margin: 0 0 12px;
}
.cderma-home-h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 4vw, 36px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--primary);
	margin: 0;
}
.cderma-home-lede {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--body);
	margin: 12px 0 0;
}
.cderma-home-section__head { max-width: 660px; margin-bottom: clamp(32px, 4vw, 48px); }
.cderma-home-section__head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	max-width: none;
}
.cderma-home-headlink {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}
.cderma-home-headlink:hover { color: var(--wp--preset--color--nav-active); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.cderma-home-hero {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--wp--preset--color--primary-surface, #f7f3e8);
}
.cderma-home-hero__text {
	align-self: center;
	padding: clamp(40px, 6vw, 84px) clamp(24px, 4vw, 56px);
	max-width: 720px;
}
.cderma-home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
	margin: 0 0 18px;
}
.cderma-home-hero__dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--wp--preset--color--primary); }
.cderma-home-hero__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(34px, 4.6vw, 54px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--heading);
	margin: 0 0 20px;
}
.cderma-home-hero__lede {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.7;
	color: var(--wp--preset--color--body);
	margin: 0 0 28px;
	max-width: 560px;
}
.cderma-home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.cderma-home-hero__rating {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--nav, #57534a);
	margin: 0;
}
.cderma-home-hero__stars { color: var(--wp--preset--color--primary); letter-spacing: 1px; }
.cderma-home-hero__media { position: relative; min-height: 320px; }
.cderma-home-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cderma-home-hero__stat {
	position: absolute;
	left: clamp(16px, 4%, 28px);
	bottom: clamp(16px, 4%, 28px);
	display: flex;
	gap: 22px;
	padding: 16px 22px;
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--card, 0 12px 40px rgba(25, 28, 29, 0.06));
}
.cderma-home-hero__stat-item { display: flex; flex-direction: column; gap: 2px; }
.cderma-home-hero__stat-item + .cderma-home-hero__stat-item { padding-left: 22px; border-left: 1px solid var(--wp--preset--color--border, #ece9df); }
.cderma-home-hero__stat-num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}
.cderma-home-hero__stat-label { font-family: var(--wp--preset--font-family--body); font-size: 12px; color: var(--wp--preset--color--nav, #57534a); }

@media (min-width: 901px) {
	.cderma-home-hero { grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); min-height: clamp(540px, 43vw, 620px); }
	/* align the hero copy with the centred 1216px content grid */
	.cderma-home-hero__text { padding-left: max(var(--wp--preset--spacing--40, 32px), calc((100vw - 1216px) / 2)); }
}

/* ── Layanan: 3 photo cards ───────────────────────────────────────────── */
.cderma-home-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cderma-home-svc {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #ece9df);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--soft, 0 1px 2px rgba(0, 0, 0, 0.05));
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cderma-home-svc:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--card, 0 12px 40px rgba(25, 28, 29, 0.08)); }
.cderma-home-svc__media { display: block; aspect-ratio: 1.85 / 1; overflow: hidden; }
.cderma-home-svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.cderma-home-svc:hover .cderma-home-svc__media img { transform: scale(1.04); }
.cderma-home-svc__body { display: flex; flex-direction: column; gap: 16px; padding: 26px; flex: 1; }
.cderma-home-svc__title { font-family: var(--wp--preset--font-family--heading); font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; }
.cderma-home-svc__title a { color: var(--wp--preset--color--primary); text-decoration: none; }
.cderma-home-svc__title a:hover { color: var(--wp--preset--color--nav-active); }
.cderma-home-svc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cderma-home-svc__list li {
	position: relative;
	margin: 0; /* reset the theme's base li margin (4px) so only the flex gap spaces items */
	padding-left: 16px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--body);
}
.cderma-home-svc__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 9999px; background: var(--wp--preset--color--primary); }
.cderma-home-svc__list a { color: var(--wp--preset--color--body); text-decoration: none; }
.cderma-home-svc__list a:hover { color: var(--wp--preset--color--gold-dark); text-decoration: underline; }
/* The homepage renders inside .wp-block-post-content, whose base rule
   `ul > li { margin-block-start: .25rem }` (0,1,2) outranks the list rules
   above; re-assert zero li margin with a higher-specificity selector so only
   the flex `gap` controls spacing. */
.cderma-home-svc .cderma-home-svc__list > li,
.cderma-home-why .cderma-home-reasons > li { margin: 0; }
.cderma-home-svc__link { margin-top: auto; font-family: var(--wp--preset--font-family--heading); font-size: 14px; font-weight: 700; color: var(--wp--preset--color--primary); text-decoration: none; }
.cderma-home-svc__link:hover { color: var(--wp--preset--color--nav-active); }

/* ── Mengapa: split image + reasons ───────────────────────────────────── */
.cderma-home-why { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.cderma-home-why__media { border-radius: 24px; overflow: hidden; box-shadow: var(--wp--preset--shadow--card, 0 12px 40px rgba(25, 28, 29, 0.06)); }
.cderma-home-why__media img { display: block; width: 100%; height: 100%; max-height: 440px; object-fit: cover; }
.cderma-home-why__content .cderma-home-h2 { margin-bottom: 28px; }
.cderma-home-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.cderma-home-reason { display: flex; gap: 16px; margin: 0; /* reset inherited base li margin */ }
.cderma-home-reason__badge {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(140, 115, 50, 0.1);
	color: var(--wp--preset--color--gold-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
}
.cderma-home-reason__text h3 { font-family: var(--wp--preset--font-family--heading); font-size: 17px; font-weight: 700; color: var(--wp--preset--color--primary); margin: 0 0 4px; }
.cderma-home-reason__text p { font-family: var(--wp--preset--font-family--body); font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--body); margin: 0; }

/* ── Dokter: 4 portrait cards ─────────────────────────────────────────── */
.cderma-home-cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cderma-home-doc {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #ece9df);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--soft, 0 1px 2px rgba(0, 0, 0, 0.05));
	text-decoration: none;
	color: inherit;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
.cderma-home-doc:hover,
.cderma-home-doc:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--wp--preset--shadow--card, 0 18px 44px rgba(25, 28, 29, 0.14));
	border-color: var(--wp--preset--color--gold-bright, #d6c422);
}
.cderma-home-doc:focus-visible { outline: 2px solid var(--wp--preset--color--gold-dark, #8c7332); outline-offset: 3px; }
.cderma-home-doc__media { aspect-ratio: 286 / 250; overflow: hidden; background: var(--wp--preset--color--surface, #f1efe8); }
.cderma-home-doc__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.cderma-home-doc:hover .cderma-home-doc__media img,
.cderma-home-doc:focus-visible .cderma-home-doc__media img { transform: scale(1.05); }
.cderma-home-doc__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.cderma-home-doc__name { font-family: var(--wp--preset--font-family--heading); font-size: 17px; font-weight: 700; color: var(--wp--preset--color--primary); margin: 0; line-height: 1.25; transition: color .25s ease; }
.cderma-home-doc:hover .cderma-home-doc__name,
.cderma-home-doc:focus-visible .cderma-home-doc__name { color: var(--wp--preset--color--gold-dark, #8c7332); }
.cderma-home-doc__cred { font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 700; color: var(--wp--preset--color--gold-dark); margin: 6px 0 0; }
.cderma-home-doc__role { font-family: var(--wp--preset--font-family--body); font-size: 13px; color: var(--wp--preset--color--nav, #57534a); margin: 4px 0 0; }
.cderma-home-doc__more {
	margin-top: auto;
	padding-top: 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--gold-dark, #8c7332);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .3s ease, transform .3s ease, gap .3s ease;
}
.cderma-home-doc:hover .cderma-home-doc__more,
.cderma-home-doc:focus-visible .cderma-home-doc__more { opacity: 1; transform: translateY(0); }
.cderma-home-doc:hover .cderma-home-doc__more { gap: 10px; }
/* Touch devices have no hover — keep the affordance visible. */
@media (hover: none) {
	.cderma-home-doc__more { opacity: 1; transform: none; }
}

/* ── Hasil nyata: before/after split ──────────────────────────────────── */
.cderma-home-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.cderma-home-result__media { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: var(--wp--preset--shadow--card, 0 12px 40px rgba(25, 28, 29, 0.06)); }
.cderma-home-result__media img { display: block; width: 100%; aspect-ratio: 1.9 / 1; object-fit: cover; object-position: center; }
.cderma-home-result__content .cderma-home-h2 { margin-bottom: 16px; }
.cderma-home-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 24px;
	padding: 8px 16px;
	border-radius: 9999px;
	background: var(--wp--preset--color--primary-surface, #f7f3e8);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--gold-dark);
}
.cderma-home-chip__dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--wp--preset--color--primary); }
.cderma-home-result__caption { font-family: var(--wp--preset--font-family--body); font-size: 14px; font-weight: 700; color: var(--wp--preset--color--body); margin: 22px 0 0; }
.cderma-home-result__disclaimer { font-family: var(--wp--preset--font-family--body); font-size: 12px; font-style: italic; color: var(--wp--preset--color--muted, #8a8472); margin: 8px 0 0; }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.cderma-home-cta {
	padding: clamp(56px, 7vw, 96px) var(--wp--preset--spacing--40, 32px);
	background: var(--wp--preset--gradient--cta-gradient, linear-gradient(162deg, #bca443 0%, #d8c98a 100%));
}
.cderma-home-cta__inner { max-width: 780px; margin-inline: auto; text-align: center; }
.cderma-home-cta__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 16px;
}
.cderma-home-cta__lede { font-family: var(--wp--preset--font-family--body); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: rgba(255, 255, 255, 0.92); margin: 0 auto 28px; max-width: 620px; }
.cderma-home-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.cderma-home-cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cderma-home-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cderma-home-why { grid-template-columns: 1fr; }
	.cderma-home-why__media img { max-height: 360px; }
	.cderma-home-result { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.cderma-home-hero__media { min-height: 360px; max-height: 460px; }
}

@media (max-width: 600px) {
	.cderma-home-cards3 { grid-template-columns: 1fr; }
	.cderma-home-section__head--row { flex-direction: column; align-items: flex-start; gap: 12px; }
	.cderma-home-hero__actions .cderma-home-btn,
	.cderma-home-cta__actions .cderma-home-btn { flex: 1 1 auto; }
	.cderma-home-hero__stat { left: 16px; right: 16px; }

	/* Doctors stay 2-up (never one giant card per row) and tighten to suit. */
	.cderma-home-cards4 { gap: 12px; }
	.cderma-home-doc { border-radius: 18px; }
	.cderma-home-doc__body { padding: 12px 13px 14px; }
	.cderma-home-doc__name { font-size: 14px; }
	.cderma-home-doc__cred { font-size: 11.5px; margin-top: 4px; }
	.cderma-home-doc__role { font-size: 11.5px; }
	.cderma-home-doc__more { font-size: 11.5px; padding-top: 10px; }
}

/* ==========================================================================
   Promo bar — dismissable bottom slide-up voucher popover (A/B tested).
   Controller: assets/js/promo-bar.js · Config: inc/promo/config.php
   Replaces the retired floating "Buat Janji" CTA.
   ========================================================================== */
.promo-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.promo-bar__inner {
	pointer-events: auto;
	position: relative;
	width: 100%;
	max-width: 760px;
	padding: 16px 46px 16px 20px;
	background: #fff;
	border-top: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 -8px 30px -8px rgba(0, 0, 0, 0.18);
	box-sizing: border-box;
	transform: translateY(0);
	opacity: 1;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
/* Hidden states: card slides down out of view (the reopen tab stays). */
.promo-bar--pending .promo-bar__inner,
.promo-bar--collapsed .promo-bar__inner,
.promo-bar--converted .promo-bar__inner {
	transform: translateY(160%);
	opacity: 0;
	pointer-events: none;
}

/* Collapse control (does not dismiss — slides the card to the reopen tab). */
.promo-bar__collapse {
	position: absolute;
	top: 6px;
	right: 10px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: currentColor;
	font-size: 24px;
	line-height: 1;
	opacity: 0.55;
	border-radius: 50%;
	cursor: pointer;
	transition: opacity 0.2s;
}
.promo-bar__collapse:hover {
	opacity: 1;
}

/* Reopen tab — bottom-right pill, visible only while collapsed. */
.promo-bar__tab {
	position: fixed;
	right: 16px;
	bottom: 16px;
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 26px -6px rgba(0, 64, 65, 0.38);
	opacity: 0;
	transform: translateY(24px) scale(0.92);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.promo-bar--collapsed .promo-bar__tab {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}
.promo-bar__tab:hover {
	filter: brightness(1.05);
}
.promo-bar__tab-gift {
	font-size: 16px;
	line-height: 1;
}

.promo-bar__body {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 20px;
}
.promo-bar__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 280px;
	min-width: 0;
}
.promo-bar__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}
.promo-bar__headline {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}
.promo-bar__subtext {
	font-size: 13px;
	line-height: 1.4;
	opacity: 0.85;
}

.promo-bar__cta,
.promo-bar__submit {
	flex: 0 0 auto;
	padding: 12px 22px;
	border: 0;
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s, filter 0.15s;
}
.promo-bar__cta:hover,
.promo-bar__submit:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
}
.promo-bar__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* ── Inline form ── */
.promo-bar__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}
.promo-bar__form-title {
	margin: 0;
	padding-right: 24px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}
.promo-bar__form-intro {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	opacity: 0.9;
}
.promo-bar__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}
.promo-bar__trust li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	opacity: 0.92;
}
.promo-bar__trust li::before {
	content: "✓";
	font-weight: 800;
	color: currentColor;
}
.promo-bar__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.promo-bar__input {
	flex: 1 1 160px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 10px;
	background: #fff;
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	box-sizing: border-box;
}
.promo-bar__input::placeholder {
	color: #8a8472;
}
.promo-bar__input:focus {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
}
.promo-bar__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}
.promo-bar__error {
	font-size: 12.5px;
	font-weight: 600;
	color: #e74c3c;
}
.promo-bar__consent {
	font-size: 11px;
	line-height: 1.4;
	opacity: 0.7;
}
.promo-bar__success {
	margin: 0;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

/* ── Skins ── */
.promo-bar--gold-solid .promo-bar__inner {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-color: rgba(0, 0, 0, 0.08);
}
.promo-bar--gold-solid .promo-bar__cta,
.promo-bar--gold-solid .promo-bar__submit {
	background: #fff;
	color: var(--wp--preset--color--gold-dark);
}

.promo-bar--dark-elegant .promo-bar__inner {
	background: var(--wp--preset--color--footer-dark);
	color: #f1ece0;
	border-color: rgba(214, 196, 34, 0.25);
}
.promo-bar--dark-elegant .promo-bar__eyebrow,
.promo-bar--dark-elegant .promo-bar__headline {
	color: var(--wp--preset--color--primary);
}
.promo-bar--dark-elegant .promo-bar__cta,
.promo-bar--dark-elegant .promo-bar__submit {
	background: var(--wp--preset--color--primary);
	color: #1b1b1b;
}

.promo-bar--light-card .promo-bar__inner {
	background: var(--wp--preset--color--primary-surface);
	color: var(--wp--preset--color--body);
	border-color: var(--wp--preset--color--border-muted);
}
.promo-bar--light-card .promo-bar__eyebrow {
	color: var(--wp--preset--color--gold-dark);
}
.promo-bar--light-card .promo-bar__headline {
	color: var(--wp--preset--color--heading);
}
.promo-bar--light-card .promo-bar__cta,
.promo-bar--light-card .promo-bar__submit {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.promo-bar--minimal-strip .promo-bar__inner {
	background: #fff;
	color: var(--wp--preset--color--body);
	padding-top: 12px;
	padding-bottom: 12px;
}
.promo-bar--minimal-strip .promo-bar__headline {
	font-size: 15px;
}
.promo-bar--minimal-strip .promo-bar__subtext {
	font-size: 12.5px;
}
.promo-bar--minimal-strip .promo-bar__cta,
.promo-bar--minimal-strip .promo-bar__submit {
	background: var(--wp--preset--color--primary);
	color: #fff;
	padding: 9px 18px;
	font-size: 13px;
}

/* Get out of the way of the mobile nav overlay and the header contact popup. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .promo-bar,
body.contact-popup-open .promo-bar {
	opacity: 0;
	pointer-events: none;
}

/* Desktop: float the bar with a gutter + rounded card instead of full-bleed. */
@media (min-width: 768px) {
	.promo-bar {
		padding: 0 16px 18px;
	}
	.promo-bar__inner {
		border: 1px solid rgba(140, 115, 50, 0.18);
		border-radius: 14px;
		box-shadow: 0 12px 40px -10px rgba(0, 64, 65, 0.22);
	}
}

@media (max-width: 560px) {
	.promo-bar__cta,
	.promo-bar__submit {
		width: 100%;
	}
	/* Collapsed state: shrink the reopen tab to a compact icon button so it
	   doesn't hog the screen on phones. */
	.promo-bar__tab {
		right: 12px;
		bottom: 12px;
		width: 48px;
		height: 48px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
	}
	.promo-bar__tab-label {
		display: none;
	}
	.promo-bar__tab-gift {
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.promo-bar {
		transition: none;
	}
	.promo-bar__cta:hover,
	.promo-bar__submit:hover {
		transform: none;
	}
}

/* Remove the trx_addons "scroll to top" button site-wide. It floats bottom-right
   and overlaps the promo reopen tab; not wanted. !important overrides the
   plugin's inline show/hide. */
.trx_addons_scroll_to_top {
	display: none !important;
}