/*
 * Zoolitz responsive layout system — v1.4.3
 *
 * This file replaces the historical document-zoom approach with real,
 * component-level responsive sizing. It is deliberately loaded last so it
 * can correct stale width/zoom rules without changing the approved design.
 */

:root {
	--zlz-page-gutter: clamp(16px, 2vw, 28px);
	--zlz-shell-max: 1320px;
	--zlz-header-max: 1440px;
	--zlz-hero-max: 1400px;
	--zlz-feature-max: 1080px;
}

/* Never scale the document itself. This also neutralises an old cached inline
 * html.style.zoom value and the temporary body zoom used by v1.4.2. */
html,
html[style],
body,
body[style] {
	zoom: 1 !important;
}

html {
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}

body {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	margin-inline: 0;
	transform: none !important;
	overflow-x: clip;
}

@supports not (overflow: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* The default content shell is intentionally between the overly wide 1520px
 * v1.4.0 canvas and the overly narrow 1200px hotfix. */
.zlz-container {
	width: 100%;
	max-width: var(--zlz-shell-max);
	margin-inline: auto;
	padding-inline: var(--zlz-page-gutter);
}

/* Header and homepage hero need a little more room than forms and content. */
.zlz-header .zlz-container {
	max-width: var(--zlz-header-max);
}

.zlz-video-hero-wrap .zlz-container {
	width: min(calc(100% - 32px), var(--zlz-hero-max));
	max-width: var(--zlz-hero-max);
	padding-inline: 0;
}

/* Keep the video hero proportionate as the viewport grows. The saved desktop
 * height remains the maximum, while the fluid middle value prevents a wide,
 * flattened hero on intermediate desktop sizes. */
@media (min-width: 768px) {
	.zlz-video-hero {
		height: min(
			var(--zlz-video-hero-desktop-height, 620px),
			max(480px, 39vw)
		);
		min-height: 0;
	}
}

/* Prevent individual flex/grid/media children from creating document width. */
main,
header,
footer,
section,
.zlz-container,
.zlz-header__inner,
.zlz-header__nav,
.zlz-header__actions,
.zlz-video-hero,
.zlz-character-marquee,
.zlz-bundle-experience__layout,
.zlz-sp-home__card,
.zlz-confidence__panel {
	min-width: 0;
	max-width: 100%;
}

.zlz-video-hero__video,
.zlz-video-hero__character img,
.zlz-decor-character,
.zlz-card__image img {
	max-width: 100%;
}

/* The moving track is intentionally wider than its viewport; its parent must
 * be the clipping boundary and never the page itself. */
.zlz-character-marquee,
.zlz-bundle-experience,
.zlz-sp-home,
.zlz-confidence {
	contain: layout paint;
}

/* Natural desktop calibration: dimensions are enlarged component-by-component,
 * not by scaling the browser document. */
@media (min-width: 1280px) {
	.zlz-section {
		padding-block: 40px;
	}

	.zlz-announcement-bar {
		font-size: 13px;
		padding-block: 9px;
	}

	.zlz-header__inner {
		padding-block: 14px;
	}

	.zlz-header__logo img {
		height: 48px;
	}

	.zlz-header__menu {
		gap: 25px;
		font-size: 14px;
	}

	.zlz-country-selector {
		font-size: 13px;
		padding: 7px 11px;
	}

	.zlz-card__body {
		padding: 10px 12px 12px;
	}

	.zlz-card__title {
		font-size: 13px;
	}

	.zlz-card__price {
		font-size: 12px;
	}

	.zlz-character-marquee--bundle,
	.zlz-character-marquee--bundle-page {
		max-width: var(--zlz-feature-max);
	}

	.zlz-bundle-experience__layout,
	.zlz-bb-hero__inner {
		max-width: var(--zlz-feature-max);
		grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
		gap: 30px;
	}

	.zlz-bundle-tier {
		min-height: 104px;
		padding: 17px 19px;
	}

	.zlz-bundle-tier__title-row strong {
		font-size: 19px;
	}

	.zlz-bundle-tier__price strong {
		font-size: 21px;
	}

	.zlz-bundle-live-card {
		padding: 27px;
	}

	.zlz-sp-home__header {
		max-width: 760px;
	}

	.zlz-character-marquee--surprise-home {
		max-width: 1000px;
	}

	.zlz-sp-home__card {
		max-width: 1140px;
		grid-template-columns: minmax(0, 1.1fr) minmax(350px, .9fr);
		gap: 32px;
		padding: 37px;
	}

	.zlz-confidence__panel {
		max-width: 1240px;
		margin-inline: auto;
	}
}

@media (min-width: 1600px) {
	:root {
		--zlz-shell-max: 1360px;
		--zlz-header-max: 1480px;
		--zlz-hero-max: 1440px;
		--zlz-feature-max: 1100px;
	}
}

@media (max-width: 1279px) {
	:root {
		--zlz-shell-max: 1200px;
		--zlz-header-max: 1240px;
		--zlz-hero-max: 1220px;
	}
}

@media (max-width: 767px) {
	:root {
		--zlz-page-gutter: 16px;
	}

	.zlz-video-hero-wrap .zlz-container {
		width: calc(100% - 24px);
	}
}