/**
 * Mobile spacing fixes — aesthetics team, 2026-06-29 (kimans-mobile-spacing-fixes.md).
 * Loaded site-wide AFTER redesign-base + home so it wins on equal specificity.
 * Each rule is scoped + commented so it can be tuned/reverted independently.
 */

/* ISSUE 1 (P0) — hero eyebrow too close to the sticky header.
   The hero inner carries an inline `padding:0 40px`, which zeroes the vertical padding
   (inline left/right read as the gutter, top/bottom as 0). A stylesheet !important beats
   the non-important inline values, restoring fluid vertical breathing room. */
body.kx-redesign .kx-home-hero > .kx-hero-inner {
	padding-top: clamp(48px, 8vw, 112px) !important;
	padding-bottom: clamp(48px, 8vw, 112px) !important;
}

/* ISSUE 2 (P0) — first/last product card flush to the viewport edge.
   The horizontal rail uses scroll-snap with no scroll-padding, so the first card snapped
   to x=0 instead of respecting the 40px gutter. */
.kx-scroll-x {
	scroll-padding-left: 40px;
	scroll-padding-right: 40px;
}

/* P1 — standardize the inconsistent mobile gutters (hero 20px, sections 40px, footer 22px)
   to a single ~24px gutter on small screens (at minimum lift the hero 20 -> 24px). */
@media (max-width: 768px) {
	body.kx-redesign .kx-home-hero > .kx-hero-inner {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.kx-scroll-x {
		scroll-padding-left: 24px;
		scroll-padding-right: 24px;
	}
}

/* P2 — the homepage approvals strip touched x=0 on mobile (looked unfinished).
   Give it the standard gutter. [VERIFY] revert if the edge-bleed is intentional brand styling. */
@media (max-width: 768px) {
	.kx-approvals-strip__inner {
		padding-left: 24px;
		padding-right: 24px;
	}
}