/* ==========================================================================
   Quality Page
   ========================================================================== */

.wwp-quality-hero { padding: 70px 0 60px; background-size: cover; background-position: center; }
.wwp-quality-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.wwp-quality-hero-text .wwp-eyebrow { display: block; margin-bottom: 14px; }
.wwp-quality-hero-desc { color: var(--wwp-color-text-muted); font-size: 17px; max-width: 460px; margin: 18px 0 28px; }
.wwp-quality-rou-note {
	display: flex; align-items: center; gap: 8px; margin-top: 24px;
	font-size: 13px; font-weight: 600; color: var(--wwp-color-text-muted);
}
.wwp-quality-rou-note svg { color: var(--wwp-color-accent); }

.wwp-quality-hero-visual img,
.wwp-quality-image-placeholder {
	width: 100%; aspect-ratio: 4/3; object-fit: cover;
	border-radius: var(--wwp-radius-card);
}
.wwp-quality-image-placeholder {
	background: var(--wwp-color-bg-alt); display: flex; align-items: center; justify-content: center;
	color: var(--wwp-color-accent); opacity: .5;
}
.wwp-quality-image-placeholder svg { width: 48px; height: 48px; }

/* Trust strip + Standards grid reuse .wwp-icon-box / .wwp-icon-circle from
   components.css — just center the text here, matching the reference. */
.wwp-quality-trust-item,
.wwp-quality-trust .wwp-icon-box,
#standards .wwp-icon-box {
	text-align: center; align-items: center;
}
.wwp-quality-trust-item .wwp-icon-circle,
#standards .wwp-icon-circle { margin: 0 auto 16px; }
.wwp-quality-trust-item h5,
#standards h5 { margin: 0 0 8px; }
.wwp-quality-trust-item p,
#standards p { margin: 0; font-size: 13px; color: var(--wwp-color-text-muted); }

/* Alternating image/text split sections (Testing & Purity, Certificates,
   Manufacturing) */
.wwp-quality-split-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; }
.wwp-quality-split--reverse .wwp-quality-split-grid { grid-template-columns: 1.15fr 1fr; }
.wwp-quality-split-image img,
.wwp-quality-split-image .wwp-quality-image-placeholder {
	width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--wwp-radius-card);
}
.wwp-quality-split-text .wwp-eyebrow { display: block; margin-bottom: 12px; }
.wwp-quality-split-text > p { color: var(--wwp-color-text-muted); margin: 16px 0 24px; max-width: 460px; }

.wwp-quality-checklist { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.wwp-quality-checklist li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.wwp-quality-checklist svg { color: var(--wwp-color-accent); flex-shrink: 0; }

.wwp-quality-side-note {
	display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px;
	border-top: 1px solid var(--wwp-color-border);
}
.wwp-quality-side-note svg { color: var(--wwp-color-accent); flex-shrink: 0; width: 28px; height: 28px; }
.wwp-quality-side-note span { font-size: 14px; font-style: italic; color: var(--wwp-color-text-muted); }

/* Promise banner (accent-colored strip near the bottom) */
.wwp-quality-promise-bar { background: var(--wwp-color-bg); color: var(--wwp-color-text); padding: 60px 0; }
.wwp-quality-promise-inner {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}
.wwp-quality-promise-inner > .wwp-icon-circle {
	background: var(--wwp-color-accent); color: #fff; width: 64px; height: 64px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.wwp-quality-promise-inner .wwp-eyebrow { color: var(--wwp-color-accent); display: block; margin-bottom: 6px; }
.wwp-quality-promise-heading { color: var(--wwp-color-text); margin: 0 0 6px; font-size: 30px; }
.wwp-quality-promise-heading .wwp-heading-accent { color: var(--wwp-color-accent); }
.wwp-quality-promise-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 6px 0 0; padding: 0; }
.wwp-quality-promise-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--wwp-color-text); }
.wwp-quality-promise-list svg { color: var(--wwp-color-accent); }

@media (max-width: 992px) {
	.wwp-quality-hero-grid,
	.wwp-quality-split-grid,
	.wwp-quality-split--reverse .wwp-quality-split-grid {
		grid-template-columns: 1fr; gap: 32px;
	}
	.wwp-quality-split--reverse .wwp-quality-split-image { order: -1; }
	.wwp-quality-checklist { grid-template-columns: 1fr; }
	.wwp-quality-promise-inner { flex-direction: column; text-align: center; }
}