/* ═══════════════════════════════════════════
   CROSS-CUTTING RESPONSIVE & ACCESSIBILITY
   Loaded last, so anything here wins.
   ═══════════════════════════════════════════ */

/* ── Scroll reveal ───────────────────────────
   Only hidden when scripting is available to reveal it. */

.se-js .reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.se-js .reveal--visible {
	opacity: 1;
	transform: translateY(0);
}

/* ── Reduced motion ──────────────────────────
   The visitor has asked the operating system for less movement. Honour it
   everywhere, including the marquee and the neon flicker, which are the two
   things on this site most likely to cause trouble. */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0ms !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.se-js .reveal {
		opacity: 1;
		transform: none;
	}

	.hero-marquee__track {
		animation: none !important;
		transform: none !important;
	}

	/* Without the loop the duplicated run is just repeated text; keep the
	   first pass and clip the rest. */
	.hero-marquee {
		overflow: hidden;
	}

	.confessional__title {
		animation: none !important;
		opacity: 1 !important;
	}

	.confessional__cta-wrap {
		opacity: 1 !important;
	}

	.born-wild__layer {
		transform: none !important;
	}

	.product-card__add,
	.product-card__add-text {
		transition: none !important;
	}
}

/* Same for the editor switch in Snake & Eve → Motion & Accessibility. */
body.se-motion-off .reveal {
	opacity: 1;
	transform: none;
}

body.se-motion-off .hero-marquee__track {
	animation: none;
}

/* ── Small screens ───────────────────────── */

@media (max-width: 47.9375rem) {
	.site-header__account {
		width: 40px;
		height: 40px;
		padding: 6px;
	}

	.site-header__account svg {
		width: 18px;
		height: 18px;
	}

	/* The hero is fixed on desktop so the content can scroll over it. On a
	   phone that fights the address-bar resize, so it becomes a normal block
	   and the sticky wrapper collapses. */
	.hero-sticky-wrap {
		height: auto;
	}

	.hero {
		position: relative;
		height: 100svh;
		min-height: 520px;
		z-index: 0;
		opacity: 1 !important;
		transform: none !important;
	}

	.hero-marquee__text {
		font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
	}

	.hero-marquee__icon {
		width: 20px;
		height: 29px;
	}
}

/* ── Wide screens ────────────────────────── */

@media (min-width: 90rem) {
	.product-carousel__track,
	.pdp__gallery-track {
		padding-inline-start: max(0px, calc((100vw - var(--container-max)) / 2));
	}
}

/* ── Print ───────────────────────────────── */

@media print {
	.site-header,
	.site-header__mobile-menu,
	.se-cookie,
	.se-cookie-modal,
	.se-age-gate,
	.product-carousel,
	.hero,
	.se-skip-link {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}

	.se-main {
		padding-top: 0 !important;
	}

	a[href^="http"]::after {
		content: ' (' attr(href) ')';
		font-size: 0.85em;
	}
}

/* ── Forced colours (Windows high contrast) ── */

@media (forced-colors: active) {
	.se-btn,
	.pdp__btn,
	.product-card__add,
	.product-carousel__cta,
	.hero__cta {
		border: 1px solid ButtonText;
	}

	.se-switch__track {
		border-color: ButtonText;
	}

	.se-switch input:checked + .se-switch__track::after {
		background: Highlight;
	}

	/* Decorative overlays would otherwise paint over the text. */
	.hero__overlay,
	.forbidden-collection__overlay,
	.confessional__bar {
		display: none;
	}
}

/* ── Touch targets ───────────────────────────
   WCAG 2.5.8 asks for 24×24 minimum; 44×44 is the comfortable target and is
   what every control here is sized to. This is the safety net for anything a
   plugin injects. */

@media (pointer: coarse) {
	a,
	button,
	input[type="submit"],
	input[type="button"] {
		min-height: 44px;
	}

	.site-footer__link,
	.site-footer__menu a,
	.pdp__breadcrumb a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}