/* ==========================================================================
   SAHRI SKIN — Responsive
   Mobile-first adjustments. Base CSS is desktop-oriented; these queries adapt
   the layout at the two project breakpoints (<=1200px, <=768px) and tune up.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large tablet / small desktop  (<= 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.sahri-products__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.sahri-hero__inner {
		gap: var(--space-md);
	}
	.sahri-nav__menu { gap: 1.6rem; }
}

/* --------------------------------------------------------------------------
   Tablet  (<= 992px) — collapse 3-up grids to 2, show burger
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
	.sahri-nav__primary { display: none; }
	.sahri-nav__burger { display: flex; }
	.sahri-nav__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 0.5rem;
	}
	.sahri-nav__brand {
		position: static;
		transform: none;
		justify-self: center;
		grid-column: 2;
		max-width: 130px;
	}
	.sahri-nav__burger { grid-column: 1; }
	.sahri-nav__actions {
		grid-column: 3;
		gap: 0.35rem;
	}
	.sahri-nav__cta { display: none; }
	.sahri-nav__actions .sahri-lang:not(.sahri-lang--mobile) { display: none; }
	.sahri-nav__logo,
	.sahri-nav__brand .custom-logo {
		max-height: 38px;
		width: auto;
		max-width: 120px;
		object-fit: contain;
	}

	.sahri-collection__grid,
	.sahri-wa__grid,
	.sahri-g-reviews__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.sahri-wa__grid > :nth-child(3) {
		grid-column: 1 / -1;
		max-width: 360px;
		margin-inline: auto;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Mobile  (<= 768px) — stack everything
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	:root { --space-xl: 4rem; --space-lg: 2.75rem; }

	/* Announcement — single static line on mobile */
	.sahri-announce__text {
		font-size: 0.68rem;
		letter-spacing: 0.1em;
	}

	/* Hero stacks — pack image first so ATF shows product + CTA */
	.sahri-hero {
		padding-block: 1.75rem 2.25rem;
	}
	.sahri-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		min-height: auto;
		gap: 1.1rem;
	}
	.sahri-hero__media { order: -1; }
	.sahri-hero__product { max-width: min(340px, 88vw); }
	.sahri-hero__title {
		font-size: clamp(1.65rem, 7.2vw, 2.15rem);
		margin-block: 0.35rem 0.85rem;
		line-height: 1.18;
	}
	.sahri-hero__sub {
		margin-inline: auto;
		margin-bottom: 0.4rem;
		font-size: 0.95rem;
		max-width: 34ch;
	}
	.sahri-hero__seo-line {
		display: none; /* keep fold clean; trust row below covers this */
	}
	.sahri-hero__cta {
		justify-content: center;
		gap: 0.85rem;
	}
	.sahri-hero__cta-secondary {
		font-size: 0.88rem;
	}
	/* No word-by-word CSS cascade fighting GSAP on mobile */
	.gsap-on.is-loaded .sahri-hero__title .sahri-word,
	.is-loaded .sahri-hero__title .sahri-word {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	/* Trust badges 2x2 */
	.sahri-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1.25rem;
	}

	.sahri-ugc__inner {
		grid-template-columns: 1fr;
	}
	.sahri-ugc__visual { max-width: 28rem; }

	.sahri-scent__grid { grid-template-columns: repeat(2, 1fr); }
	.sahri-promo__grid { grid-template-columns: 1fr; }

	/* Collection / products / testimonials single column */
	.sahri-collection__grid,
	.sahri-products__grid,
	.sahri-wa__grid,
	.sahri-g-reviews__grid {
		grid-template-columns: 1fr;
	}
	.sahri-wa__grid > :nth-child(3) { max-width: none; }

	/* Pack rituel stacks, image first */
	.sahri-pack__inner {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
	.sahri-pack__carousel { order: -1; padding: 0; }
	.sahri-pack__slides { aspect-ratio: 3 / 2; }
	.sahri-pack__slide { padding: 0.75rem 0.75rem 0.5rem; }
	.sahri-pack__text {
		padding-left: 1.25rem;
		border-left-width: 2px;
	}

	/* Ingredient banner: dim decoration further */
	.sahri-ingredient__deco { opacity: 0.1; }

	/* Newsletter form stacks */
	.sahri-newsletter__form {
		flex-direction: column;
		background: transparent;
		padding: 0;
		gap: 0.75rem;
	}
	.sahri-newsletter__input {
		background: var(--white);
		border-radius: var(--radius);
	}
	.sahri-newsletter__form .sahri-btn { justify-content: center; }

	/* Footer single column */
	.sahri-footer__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Small phones  (<= 460px)
   -------------------------------------------------------------------------- */
@media (max-width: 460px) {
	.sahri-trust__grid { grid-template-columns: 1fr; }
	.sahri-hero__cta { flex-direction: column; align-items: stretch; }
	.sahri-hero__cta .sahri-btn { justify-content: center; }
}

/* --------------------------------------------------------------------------
   New sections — certifications & UGC lifestyle
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.sahri-ugc__inner {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
	.sahri-ugc__visual { order: -1; }
	.sahri-certif__grid { grid-template-columns: 1fr; }
	.sahri-certif__lab { font-size: 0.8rem; }
}