/**
 * MooTon — Certification Row Alignment
 *
 * Centers the certification logo columns inside Spectrum containers.
 * Applied to both /about/ QCS section and homepage cert-* rows.
 */

/* Horizontal + vertical centering — counter WP core `align-items: normal !important` */
[data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns,
[data-spectra-id^="cert-"] .wp-block-columns {
	justify-content: center !important;
	align-items: center !important;
}

/* Prevent columns from stretching so justify-content can work */
[data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-column,
[data-spectra-id^="cert-"] .wp-block-column {
	flex-grow: 0 !important;
}

/* Vertically center images inside columns */
[data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-column img,
[data-spectra-id^="cert-"] .wp-block-column img {
	vertical-align: middle;
	display: block;
}

/* Product sub-pages: 2-row layout with larger 90px logos and row gap */
.page-id-4165 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns,
.page-id-4463 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns,
.page-id-4678 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns {
	gap: 20px;
}

/* Add vertical gap between the two rows */
.page-id-4165 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns + .wp-block-columns,
.page-id-4463 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns + .wp-block-columns,
.page-id-4678 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns + .wp-block-columns {
	margin-top: 20px;
}

/* Product pages: images fill their column width */
.page-id-4165 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-image img,
.page-id-4463 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-image img,
.page-id-4678 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-image img {
	width: 100% !important;
	height: auto !important;
}

/*
 * Mobile: certification logos wrap in a row instead of stacking vertically.
 *
 * WP core forces flex-basis:100% on .wp-block-column below 782px with
 * a high-specificity selector, which turns the 11-logo row into an 11-row
 * stack (2500+px tall). We use body-prefixed selectors to beat WP's
 * specificity and restore auto-width so the logos sit side by side and
 * wrap naturally — 4 per row at 60px on a 375px screen.
 *
 * Three sites covered:
 *   cert-f02029b115  — Homepage mobile-only cert section
 *   spectra-moublpye  — About (page-id-1393) + Our Capabilities (page-id-3576)
 *                        Scoped with page-id to avoid affecting the homepage
 *                        desktop cert that reuses the same container ID.
 */
@media (max-width: 781px) {
	/* Homepage mobile cert section */
	body [data-spectra-id="cert-f02029b115"] .wp-block-columns {
		flex-wrap: wrap !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 15px !important;
	}

	body [data-spectra-id="cert-f02029b115"] .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		flex-grow: 0 !important;
		width: auto !important;
	}

	[data-spectra-id="cert-f02029b115"] .wp-block-image img {
		width: 60px !important;
		height: auto !important;
		max-width: 60px !important;
	}

	/* About + Our Capabilities: 60px icons, 4-per-row with 15px gap */
	.page-id-1393 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns,
	.page-id-3576 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns {
		flex-wrap: wrap !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 15px !important;
	}

	/* Product sub-pages: grid on parent, display:contents on columns wrappers → unified 4-4-3 */
	body.page-id-4165 [data-spectra-id="spectra-moublpye-o5oq7w"],
	body.page-id-4463 [data-spectra-id="spectra-moublpye-o5oq7w"],
	body.page-id-4678 [data-spectra-id="spectra-moublpye-o5oq7w"] {
		display: grid !important;
		grid-template-columns: repeat(4, 65px) !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
	}

	/* Let grid see all .wp-block-column children directly */
	body.page-id-4165 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns,
	body.page-id-4463 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns,
	body.page-id-4678 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns {
		display: contents !important;
	}

	/* Reset columns so grid sizing wins */
	body.page-id-4165 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-column,
	body.page-id-4463 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-column,
	body.page-id-4678 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-column {
		flex-basis: auto !important;
		flex-grow: 0 !important;
		width: auto !important;
		max-width: none !important;
	}

	/* Remove desktop -60px pull-up on mobile */
	body.page-id-4165 [data-spectra-id="spectra-a7a7964c-7966-7c79-2d7d-337a61cdac2a"],
	body.page-id-4463 [data-spectra-id="spectra-a7a7964c-7966-7c79-2d7d-337a61cdac2a"],
	body.page-id-4678 [data-spectra-id="spectra-a7a7964c-7966-7c79-2d7d-337a61cdac2a"] {
		margin-top: 0 !important;
	}

	/* About + Our Capabilities: reset column flex for wrap */
	.page-id-1393 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns > .wp-block-column,
	.page-id-3576 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		flex-grow: 0 !important;
		width: auto !important;
	}

	/* About + Our Capabilities: 60px single row */
	.page-id-1393 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-image img,
	.page-id-3576 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-image img {
		width: 60px !important;
		height: auto !important;
		max-width: 60px !important;
	}

	/* Product sub-pages: 65px for 4-per-row on mobile (~284px) */
	.page-id-4165 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-image img,
	.page-id-4463 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-image img,
	.page-id-4678 [data-spectra-id="spectra-moublpye-o5oq7w"] .wp-block-image img {
		width: 65px !important;
		height: auto !important;
		max-width: 65px !important;
	}
}

/* 5-star rating via CSS pseudo-element */
.mooton-five-stars::before {
	content: "\2605\2605\2605\2605\2605";
	font-size: 16px;
	color: var(--ast-global-color-1, #d75179);
	letter-spacing: 2px;
	display: block;
	margin-bottom: 8px;
}