/**
 * Home page refinement layer.
 *
 * Loaded only on the front page (see mdh_theme_scripts in functions.php), after
 * style.css. Every rule is scoped to `#primary.site-main.mdh-front-home` to match
 * the specificity of the existing home rules and to guarantee nothing here can
 * reach another template — the product slider and .btn classes are shared with
 * single-product pages.
 *
 * Values come from css/tokens.css. No raw colors, sizes, radii or shadows.
 * No !important: specificity is matched deliberately instead.
 */

/* ===============================================================
 * 1. Section rhythm
 * A consistent vertical beat is most of what reads as "considered".
 * =============================================================== */

#primary.site-main.mdh-front-home .hero-section,
#primary.site-main.mdh-front-home .features-checkmarks,
#primary.site-main.mdh-front-home .product-portfolio,
#primary.site-main.mdh-front-home .about-section,
#primary.site-main.mdh-front-home .strength-section,
#primary.site-main.mdh-front-home .mercos-section,
#primary.site-main.mdh-front-home .media-section,
#primary.site-main.mdh-front-home .enquiry-cta {
	position: relative;
	z-index: var(--z-base);
}

/* The `> section` qualifier is deliberate, not decoration. Existing home rules
   in style.css use `> section.about-section` (1,3,1) and
   `.icon-features.strength-section` (1,4,0); a bare (1,3,0) selector here loses
   to both regardless of source order. Matching their shape — rather than
   reaching for !important — is what keeps this layer predictable. */
#primary.site-main.mdh-front-home > section.product-portfolio,
#primary.site-main.mdh-front-home > section.about-section,
#primary.site-main.mdh-front-home > section.icon-features.strength-section,
#primary.site-main.mdh-front-home > section.media-section {
	padding-block: var(--space-24);
	/* Existing rules set a `padding` shorthand, which also pads the inline
	   axis on top of .container's own padding. Zero it so the container alone
	   controls horizontal gutters. */
	padding-inline: 0;
}

#primary.site-main.mdh-front-home .container {
	max-width: var(--container-max);
	padding-inline: var(--container-pad);
}

/* Alternating surfaces separate sections without drawing rules between them:
   white → wash → white → band → wash → dark. */
#primary.site-main.mdh-front-home > section.about-section,
#primary.site-main.mdh-front-home > section.media-section {
	background: var(--surface-wash);
}

#primary.site-main.mdh-front-home > section.product-portfolio,
#primary.site-main.mdh-front-home > section.icon-features.strength-section {
	background: var(--color-surface);
}

/* ===============================================================
 * 2. Shared section headers
 * =============================================================== */

#primary.site-main.mdh-front-home .product-portfolio__header,
#primary.site-main.mdh-front-home .mdh-home-media__header {
	max-width: var(--container-narrow);
	margin-inline: auto;
	margin-bottom: var(--space-12);
	text-align: center;
}

#primary.site-main.mdh-front-home .product-portfolio__title,
#primary.site-main.mdh-front-home .mdh-home-media__header h2,
#primary.site-main.mdh-front-home .about-text h2 {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-strong);
}

/* The media header already carried an accent bar and the portfolio header did
   not. Two section headers styled differently on one page reads as an
   oversight, so both get it. */
#primary.site-main.mdh-front-home .product-portfolio__header h2::after,
#primary.site-main.mdh-front-home .mdh-home-media__header h2::after {
	content: "";
	display: block;
	width: var(--space-10);
	height: 3px;
	margin: var(--space-4) auto 0;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
}

#primary.site-main.mdh-front-home .product-portfolio__lead,
#primary.site-main.mdh-front-home .mdh-home-media__lead,
#primary.site-main.mdh-front-home .about-text p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-text-muted);
}

/* ===============================================================
 * 3. Hero
 * =============================================================== */

#primary.site-main.mdh-front-home .hero-section {
	display: flex;
	align-items: center;
	min-height: min(78vh, 680px);
	padding-block: var(--space-24);
	overflow: hidden;
}

#primary.site-main.mdh-front-home .hero-section__bg {
	background-size: cover;
	background-position: center;
	transform: scale(1.04);
}

/* A directional scrim keeps the headline legible over any photo while leaving
   the right side of the image visible — a flat overlay would flatten both. */
#primary.site-main.mdh-front-home .hero-section__scrim {
	background: var(--scrim-hero);
}

#primary.site-main.mdh-front-home .hero-section__panel {
	max-width: 98%;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	backdrop-filter: none;
	text-align: center;
}

#primary.site-main.mdh-front-home .hero-title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-heading);
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	font-weight: var(--fw-bold);
	line-height: 1.08;
	letter-spacing: var(--ls-tight);
	color: var(--color-text-invert);
	text-wrap: balance;
}

#primary.site-main.mdh-front-home .hero-subtitle {
	max-width: 34rem;
	margin: 0 auto var(--space-8);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	font-weight: var(--fw-regular);
	line-height: var(--lh-relaxed);
	color: var(--color-on-dark-muted);
}

/* ── Hero search bar wrap + live-search drawer ── */
.hero-search-wrap {
	position: relative;
	width: 100%;
	max-width: 46rem;
	margin: 0 auto var(--space-6);  /* auto left/right = centred */
}

/* The form row */
.hero-searchform {
	display: flex;
	align-items: stretch;
	width: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-white);
	box-shadow: var(--shadow-search-bar);
}

.hero-searchform input[type="text"] {
	flex: 1;
	min-width: 0;
	padding: 0 1.1rem;
	height: var(--control-height-lg);
	border: none;
	outline: none;
	font-size: var(--fs-base);
	color: var(--color-text);
	background: transparent;
}

.hero-searchform input[type="text"]::placeholder {
	color: var(--color-text-placeholder);
}

.hero-searchform__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0 1.4rem;
	height: var(--control-height-lg);
	background: var(--color-primary);
	color: var(--color-white);
	border: none;
	cursor: pointer;
	font-size: var(--fs-ui);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	transition: background-color var(--duration-base) var(--ease);
	flex-shrink: 0;
}

.hero-searchform__btn:hover {
	background: var(--color-primary-hover);
}

/* ── Live-search drawer ── */
/* position:fixed escapes all overflow:hidden/clip containers.
   top/left/width are set dynamically by hero-search.js. */
.hero-search-drawer {
	position: fixed;
	z-index: 99999;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-drawer);
	animation: mdh-drawer-in var(--duration-fast) var(--ease) both;
}

@keyframes mdh-drawer-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0);    }
}

/* ── Loading state ── */
.hero-search-drawer__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.2rem 1rem;
}

.hero-search-drawer__loading-text {
	font-size: var(--fs-sm);
	color: var(--color-text-subtle);
}

.hero-search-drawer__spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid var(--color-primary-ring);
	border-top-color: var(--color-primary);
	border-radius: var(--radius-circle);
	animation: mdh-spin 0.65s linear infinite;
	flex-shrink: 0;
}

@keyframes mdh-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-search-drawer__spinner {
		animation: none;
		border-top-color: var(--color-primary);
	}
}

/* ── Empty state ── */
.hero-search-drawer__empty {
	padding: 1.25rem 1.1rem;
	margin: 0;
	font-size: var(--fs-ui);
	color: var(--color-text-subtle);
	text-align: center;
}

.hero-search-drawer__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 1rem;
	text-decoration: none;
	color: inherit;
	transition: background-color var(--duration-fast) var(--ease);
	border-bottom: 1px solid var(--color-border-ghost);
}

.hero-search-drawer__item:last-child {
	border-bottom: none;
}

.hero-search-drawer__item:hover,
.hero-search-drawer__item.is-active,
.hero-search-drawer__item:focus {
	background: var(--color-primary-subtle);
	outline: none;
}

.hero-search-drawer__item:focus-visible {
	box-shadow: var(--shadow-focus-inset);
}

/* Thumbnail */
.hero-search-drawer__thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface-sunk);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-search-drawer__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-search-drawer__thumb--placeholder {
	width: 24px;
	height: 24px;
	background: var(--color-border-strong);
	border-radius: var(--radius-circle);
}

/* Text */
.hero-search-drawer__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.hero-search-drawer__name {
	font-size: var(--fs-ui);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hero-search-drawer__meta {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--fs-xs);
	color: var(--color-text-subtle);
}

.hero-search-drawer__dot {
	color: var(--color-border-strong);
}

/* Arrow chevron */
.hero-search-drawer__arrow {
	flex-shrink: 0;
	color: var(--color-text-placeholder);
	transition: color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}

.hero-search-drawer__item:hover .hero-search-drawer__arrow,
.hero-search-drawer__item.is-active .hero-search-drawer__arrow {
	color: var(--color-primary);
	transform: translateX(3px);
}

/* Mobile — single-row bar, icon-only button */
@media (max-width: 640px) {
	.hero-search-wrap {
		max-width: 100%;
	}

	/* Keep form as a single flex row — no stacking */
	.hero-searchform {
		flex-direction: row;
	}

	.hero-searchform input[type="text"] {
		height: 48px;
		font-size: var(--fs-ui);
	}

	/* Square icon-only button: hide the label text */
	.hero-searchform__btn {
		height: 48px;
		width: 48px;
		padding: 0;
		flex-shrink: 0;
		justify-content: center;
	}

	.hero-searchform__btn span {
		display: none;
	}

	.hero-search-drawer {
		border-radius: var(--radius-md);
	}
}

#primary.site-main.mdh-front-home .hero-buttons {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin: 0;
}

#primary.site-main.mdh-front-home .hero-buttons .btn {
	white-space: nowrap; /* button text never wraps */
}

@media (max-width: 640px) {
	#primary.site-main.mdh-front-home .hero-buttons {
		gap: var(--space-3);
	}
	#primary.site-main.mdh-front-home .hero-buttons .btn {
		padding: var(--space-2) var(--space-4);
		font-size: 0.875rem;
	}
}

@media (max-width: 400px) {
	#primary.site-main.mdh-front-home .hero-buttons {
		gap: var(--space-2);
	}
	#primary.site-main.mdh-front-home .hero-buttons .btn {
		padding: var(--space-2) var(--space-3);
		font-size: 0.8125rem;
	}
}

/* ===============================================================
 * 4. Buttons (home scope only — .btn is shared site-wide)
 * =============================================================== */

#primary.site-main.mdh-front-home .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--control-height);
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--duration-base) var(--ease),
		border-color var(--duration-base) var(--ease),
		color var(--duration-base) var(--ease),
		box-shadow var(--duration-base) var(--ease),
		transform var(--duration-base) var(--ease);
}

#primary.site-main.mdh-front-home .btn:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

#primary.site-main.mdh-front-home .btn.primary,
#primary.site-main.mdh-front-home .btn.btn-primary {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-invert);
	box-shadow: var(--shadow-sm);
}

#primary.site-main.mdh-front-home .btn.primary:hover,
#primary.site-main.mdh-front-home .btn.btn-primary:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* Secondary sits on the hero photo, so it is a light-on-dark outline. */
#primary.site-main.mdh-front-home .btn.secondary {
	background: var(--color-on-dark-surface);
	border-color: var(--color-on-dark-border);
	color: var(--color-text-invert);
	backdrop-filter: blur(6px);
}

#primary.site-main.mdh-front-home .btn.secondary:hover {
	background: var(--color-on-dark-surface-hover);
	border-color: var(--color-white);
	transform: translateY(-1px);
}

/* ===============================================================
 * 5. Checkmark strip
 * Sits directly under the hero as a trust bar.
 * =============================================================== */

#primary.site-main.mdh-front-home .features-checkmarks {
	padding-block: var(--space-6);
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

#primary.site-main.mdh-front-home .features-checkmarks ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

#primary.site-main.mdh-front-home .features-checkmarks li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	margin: 0;
	padding-inline: var(--space-4);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--color-text-muted);
	text-align: start;
}

#primary.site-main.mdh-front-home .features-checkmarks li + li {
	border-inline-start: 1px solid var(--color-border);
}

#primary.site-main.mdh-front-home .features-checkmarks a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-base) var(--ease);
}

#primary.site-main.mdh-front-home .features-checkmarks a:hover {
	color: var(--color-primary);
}

#primary.site-main.mdh-front-home .features-checkmarks svg {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--color-accent);
}

#primary.site-main.mdh-front-home .features-checkmarks .mercos {
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
}

/* ===============================================================
 * 6. Product cards
 * Fixes two logged defects: no aspect-ratio on the media well, and
 * Playfair (a display serif) used for 16px drug names.
 * =============================================================== */

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
	transition:
		box-shadow var(--duration-base) var(--ease),
		border-color var(--duration-base) var(--ease),
		transform var(--duration-base) var(--ease);
}

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	height: auto;
	background: var(--color-surface-sunk);
	overflow: hidden;
}

/* A product with neither a listing image nor a featured image renders an empty
   media well — six flat grey boxes read as broken rather than as "no image
   yet". Give the empty case a branded wash and a capsule glyph so the card
   still looks finished. Purely presentational: the template is untouched, and
   this stops applying the moment an image exists.
   The glyph is a mask, not a background-image, so its color stays a token. */
#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card__media:not(:has(img)) {
	background: var(--surface-wash);
}

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card__media:not(:has(img))::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-primary);
	opacity: 0.22;
	-webkit-mask: var(--glyph-capsule) center / 2.75rem no-repeat;
	mask: var(--glyph-capsule) center / 2.75rem no-repeat;
}

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--space-4);
	transition: transform var(--duration-slow) var(--ease);
}

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card:hover .product-card__media img {
	transform: scale(1.04);
}

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
}

/* Body font, not the display serif — these are drug names and must be scanned. */
#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
	color: var(--color-text);
}

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card__meta {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	color: var(--color-text-subtle);
}

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card__actions {
	margin-top: auto;
	padding-top: var(--space-4);
}

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card__actions .btn {
	width: 100%;
	min-height: var(--control-height-sm);
	border-radius: var(--radius-md);
	background: transparent;
	border-color: var(--color-border-strong);
	color: var(--color-primary);
	box-shadow: none;
}

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card__actions .btn:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-invert);
	transform: none;
}

/* Equal-height slides so cards line up regardless of title wrapping. */
#primary.site-main:is(.mdh-front-home, .single-product-page) .product-swiper .swiper-slide {
	height: auto;
	display: flex;
}

#primary.site-main:is(.mdh-front-home, .single-product-page) .product-swiper {
	padding-block: var(--space-2) var(--space-10);
}

#primary.site-main.mdh-front-home .swiper-pagination-bullet {
	width: 6px;
	height: 6px;
	background: var(--color-border-strong);
	opacity: 1;
	transition: width var(--duration-base) var(--ease),
		background-color var(--duration-base) var(--ease);
}

#primary.site-main.mdh-front-home .swiper-pagination-bullet-active {
	width: 22px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
}

/* ===============================================================
 * 7. About
 * =============================================================== */

#primary.site-main.mdh-front-home .about-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--space-16);
}

#primary.site-main.mdh-front-home .about-text {
	max-width: 34rem;
}

#primary.site-main.mdh-front-home .about-text p {
	margin-bottom: var(--space-8);
}

#primary.site-main.mdh-front-home .about-image {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

#primary.site-main.mdh-front-home .about-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ===============================================================
 * 8. Strengths
 * =============================================================== */

#primary.site-main.mdh-front-home .strength-section__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
}

#primary.site-main.mdh-front-home .strength-section .strength-section__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-10) var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	text-align: center;
	transition:
		box-shadow var(--duration-base) var(--ease),
		border-color var(--duration-base) var(--ease),
		transform var(--duration-base) var(--ease);
}

#primary.site-main.mdh-front-home .strength-section .strength-section__col:hover {
	border-color: var(--color-primary-ring);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

#primary.site-main.mdh-front-home .strength-section__icon {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--radius-circle);
	background: var(--color-primary-subtle);
	color: var(--color-primary);
}

#primary.site-main.mdh-front-home .strength-section__svg {
	width: 2.25rem;
	height: 2.25rem;
}

#primary.site-main.mdh-front-home .strength-section .strength-section__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
	color: var(--color-text);
}

/* ===============================================================
 * 9. Mercos + enquiry bands
 * Two full-bleed accent bands. Mercos carries the brand gradient;
 * the enquiry CTA is the single green moment on the page.
 * =============================================================== */

#primary.site-main.mdh-front-home .mercos-section,
#primary.site-main.mdh-front-home .enquiry-cta {
	padding-block: var(--space-16);
}

#primary.site-main.mdh-front-home .mercos-section {
	background: linear-gradient(
		100deg,
		var(--color-primary-active) 0%,
		var(--color-primary) 55%,
		var(--color-teal) 100%
	);
}

#primary.site-main.mdh-front-home .enquiry-cta {
	background: var(--color-slate-800);
}

#primary.site-main.mdh-front-home .mercos-section__inner,
#primary.site-main.mdh-front-home .enquiry-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
}

#primary.site-main.mdh-front-home .mercos-section__title,
#primary.site-main.mdh-front-home .enquiry-cta__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-invert);
	text-wrap: balance;
}

#primary.site-main.mdh-front-home .mercos-section__lead {
	margin: var(--space-2) 0 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--color-on-dark-muted);
}

#primary.site-main.mdh-front-home .mercos-section .mercos {
	color: var(--color-text-invert);
}

#primary.site-main.mdh-front-home .mercos-section__btn {
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

#primary.site-main.mdh-front-home .mercos-section__btn:hover {
	background: var(--color-surface-alt);
	border-color: var(--color-surface-alt);
	transform: translateY(-1px);
}

#primary.site-main.mdh-front-home .enquiry-cta__btn {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-invert);
	box-shadow: var(--shadow-sm);
}

#primary.site-main.mdh-front-home .enquiry-cta__btn:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* ===============================================================
 * 10. Media cards
 * =============================================================== */

#primary.site-main.mdh-front-home .mdh-home-media__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-8);
}

#primary.site-main.mdh-front-home .mdh-home-media__card {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
	transition:
		box-shadow var(--duration-base) var(--ease),
		border-color var(--duration-base) var(--ease),
		transform var(--duration-base) var(--ease);
}

#primary.site-main.mdh-front-home .mdh-home-media__card:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

/* The whole card is a link (an absolutely-positioned overlay anchor), so the
   lift on hover is honest — and the focus ring must show on the card itself. */
#primary.site-main.mdh-front-home .mdh-home-media__card:focus-within {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-focus);
}

#primary.site-main.mdh-front-home .mdh-home-media__thumb {
	margin: 0;
	aspect-ratio: 16 / 10;
	background: var(--color-surface-sunk);
	overflow: hidden;
}

#primary.site-main.mdh-front-home .mdh-home-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease);
}

#primary.site-main.mdh-front-home .mdh-home-media__card:hover .mdh-home-media__img {
	transform: scale(1.04);
}

#primary.site-main.mdh-front-home .mdh-home-media__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		135deg,
		var(--color-surface-sunk) 0%,
		var(--color-border) 100%
	);
}

#primary.site-main.mdh-front-home .mdh-home-media__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6);
}

#primary.site-main.mdh-front-home .mdh-home-media__date {
	font-family: var(--font-body);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-text-subtle);
}

#primary.site-main.mdh-front-home .mdh-home-media__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--color-text-strong);
}

#primary.site-main.mdh-front-home .mdh-home-media__excerpt {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: var(--color-text-muted);
}

#primary.site-main.mdh-front-home .mdh-home-media__read {
	margin-top: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
}

#primary.site-main.mdh-front-home .mdh-home-media__actions {
	margin-top: var(--space-12);
	text-align: center;
}

/* ===============================================================
 * 11. Ambient backdrop
 * The decoration was competing with the content. Restraint is most of
 * what separates "modern" from "busy" — so it is dialled well back
 * rather than removed.
 * =============================================================== */

#primary.site-main.mdh-front-home .mdh-front-home__ambient-grid,
#primary.site-main.mdh-front-home .mdh-front-home__ambient-diagonals,
#primary.site-main.mdh-front-home .mdh-front-home__ambient-rings,
#primary.site-main.mdh-front-home .mdh-front-home__ambient-geo {
	opacity: 0.25;
}

#primary.site-main.mdh-front-home .mdh-front-home__ambient-orb {
	opacity: 0.4;
	filter: blur(80px);
}

/* ===============================================================
 * 12. Responsive
 * =============================================================== */

@media (max-width: 992px) {
	#primary.site-main.mdh-front-home .about-container {
		gap: var(--space-10);
	}

	#primary.site-main.mdh-front-home .strength-section__grid {
		gap: var(--space-5);
	}

	#primary.site-main.mdh-front-home .strength-section .strength-section__col {
		padding: var(--space-8) var(--space-4);
	}
}

@media (max-width: 768px) {
	#primary.site-main.mdh-front-home > section.product-portfolio,
	#primary.site-main.mdh-front-home > section.about-section,
	#primary.site-main.mdh-front-home > section.icon-features.strength-section,
	#primary.site-main.mdh-front-home > section.media-section {
		padding-block: var(--space-16);
		padding-inline: 0;
	}

	#primary.site-main.mdh-front-home .hero-section {
		min-height: auto;
		padding-block: var(--space-16);
	}

	#primary.site-main.mdh-front-home .product-portfolio__header,
	#primary.site-main.mdh-front-home .mdh-home-media__header {
		margin-bottom: var(--space-8);
	}

	#primary.site-main.mdh-front-home .product-portfolio__title,
	#primary.site-main.mdh-front-home .mdh-home-media__header h2,
	#primary.site-main.mdh-front-home .about-text h2 {
		font-size: var(--fs-2xl);
	}

	/* Stack the trust bar; vertical dividers become horizontal ones. */
	#primary.site-main.mdh-front-home .features-checkmarks ul {
		grid-template-columns: 1fr;
		gap: 0;
	}

	#primary.site-main.mdh-front-home .features-checkmarks li {
		justify-content: flex-start;
		padding-block: var(--space-3);
		padding-inline: 0;
	}

	#primary.site-main.mdh-front-home .features-checkmarks li + li {
		border-inline-start: 0;
		border-top: 1px solid var(--color-border);
	}

	#primary.site-main.mdh-front-home .about-container {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	/* Image first reads better than a wall of text on a small screen. */
	#primary.site-main.mdh-front-home .about-image {
		order: -1;
	}

	#primary.site-main.mdh-front-home .strength-section__grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	#primary.site-main.mdh-front-home .strength-section .strength-section__col {
		flex-direction: row;
		align-items: center;
		gap: var(--space-4);
		padding: var(--space-5);
		text-align: start;
	}

	#primary.site-main.mdh-front-home .strength-section__icon {
		flex: 0 0 auto;
		width: 3.25rem;
		height: 3.25rem;
	}

	#primary.site-main.mdh-front-home .strength-section__svg {
		width: 1.75rem;
		height: 1.75rem;
	}

	#primary.site-main.mdh-front-home .mercos-section,
	#primary.site-main.mdh-front-home .enquiry-cta {
		padding-block: var(--space-12);
	}

	#primary.site-main.mdh-front-home .mercos-section__inner,
	#primary.site-main.mdh-front-home .enquiry-cta__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-6);
	}

	#primary.site-main.mdh-front-home .mercos-section__title,
	#primary.site-main.mdh-front-home .enquiry-cta__title {
		font-size: var(--fs-xl);
	}

	#primary.site-main.mdh-front-home .mdh-home-media__grid {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}

	#primary.site-main.mdh-front-home .hero-buttons .btn {
		flex: 1 1 auto;
	}
}

@media (max-width: 480px) {

	#primary.site-main.mdh-front-home .about-image,
	#primary.site-main.mdh-front-home .mdh-home-media__card,
	#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card {
		border-radius: var(--radius-md);
	}
}

/* Honour the reduced-motion preference: no lifts, no image pans. */
@media (prefers-reduced-motion: reduce) {
	#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card:hover,
	#primary.site-main.mdh-front-home .mdh-home-media__card:hover,
	#primary.site-main.mdh-front-home .strength-section .strength-section__col:hover,
	#primary.site-main.mdh-front-home .btn:hover {
		transform: none;
	}

	#primary.site-main:is(.mdh-front-home, .single-product-page) .product-card:hover .product-card__media img,
	#primary.site-main.mdh-front-home .mdh-home-media__card:hover .mdh-home-media__img {
		transform: none;
	}
}