/* =========================================================================
 * CatalogoSorriso — SEO / a11y / Core Web Vitals fix layer.
 *
 * Resolves issues flagged in 2026-05-20 audit:
 *   - Mobile font under 16px (Google Mobile-Friendly violation)
 *   - Touch targets under 48x48px (Google accessibility minimum)
 *   - Horizontal viewport overflow on mobile (~15px)
 *   - CLS from unsized hero / slider containers
 *   - CLS from cookie banner injection
 *
 * Loaded last so it overrides parent + earlier child layers.
 * Scoped where possible (body.cs-classic) to avoid global side-effects.
 * ========================================================================= */

/* ===== Horizontal scroll containment ===== */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* ===== Mobile typography: 16px minimum ===== */
@media (max-width: 600px) {
	html {
		font-size: 16px;
	}
	body,
	body.cs-classic,
	body p,
	body li,
	body span,
	body a,
	body td,
	body th,
	body input,
	body textarea,
	body select,
	body button {
		font-size: 16px;
		line-height: 1.5;
	}
	/* Smaller helper text still legible (12px floor → 14px) */
	body small,
	body .small,
	body .price del,
	body .cs-fc-contact-prefix {
		font-size: 14px;
	}
}

/* ===== Touch target minimum (Google: 48x48 CSS pixels) ===== */
@media (max-width: 900px) {
	body a,
	body button,
	body input[type="button"],
	body input[type="submit"],
	body .button,
	body .cs-bc-home,
	body .cs-mobile-only,
	body .woocommerce-pagination a,
	body .woocommerce-pagination span {
		min-height: 48px;
		min-width: 48px;
		/* Center inline text inside the larger hit area without changing visual height */
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	/* Restore inline behavior for in-prose anchors (no min-height) */
	body p a,
	body li a,
	body .cs-bc-current ~ a,
	body .cs-legal-inner a,
	body .cs-fc-contact a {
		display: inline;
		min-height: 0;
		min-width: 0;
	}
	/* Spacing between adjacent tap targets (8px gap recommendation) */
	body nav a + a,
	body .menu a + a {
		margin-left: 4px;
	}
}

/* ===== CLS: hero carousel aspect-ratio ===== */
.cs-hero,
.cs-slider,
#cs-hero-banner,
.rev_slider,
.cs-slide-wrap {
	aspect-ratio: 1920 / 728;
	width: 100%;
	overflow: hidden;
}

@media (max-width: 600px) {
	.cs-hero,
	.cs-slider,
	#cs-hero-banner,
	.cs-slide-wrap {
		aspect-ratio: 4 / 3;
	}
}

/* CLS: reserve space for slider revolution containers before init */
.rev_slider_wrapper,
.forcefullwidth_wrapper_tp_banner {
	min-height: 280px;
}

@media (min-width: 901px) {
	.rev_slider_wrapper,
	.forcefullwidth_wrapper_tp_banner {
		min-height: 480px;
	}
}

/* ===== CLS: WC product card images reserve space ===== */
.products li.product img,
.cs-brand-tile img,
.cs-subcat-tile-img img,
.cs-archive-thumb img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* ===== CLS: Complianz cookie banner reserved space ===== */
.cmplz-cookiebanner,
#cmplz-cookiebanner-container {
	min-height: 0; /* hide before init */
}
body.cmplz-loaded .cmplz-cookiebanner {
	min-height: 220px;
}

/* ===== CLS: font-display swap for web fonts (prevent FOIT) ===== */
@font-face {
	font-display: swap !important;
}

/* ===== A11y: focus ring restored where reset killed it ===== */
:focus-visible {
	outline: 2px solid #008833;
	outline-offset: 2px;
}

/* ===== A11y: skip-link visible on keyboard focus ===== */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #008833;
	color: #fff;
	padding: 8px 16px;
	z-index: 10000;
	text-decoration: none;
}
.skip-link:focus {
	top: 0;
}

/* ===== Visually-hidden H1 for homepage SEO (semantic, not visual) ===== */
.cs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}