/**
 * VZUTTYA hero — Figma SSOT (pue24Jcf9g8C3kM5E4R5d6).
 * Desktop 6:131 → 1440×590 · Tablet/landscape 1:403 → 1024×590 · Portrait ≤767 1:349 → 649.
 * Height is a band constant — never f(vw). No width-downscale of the artboard.
 */

.fwk-hero--vzuttya-live {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	background: #fff;
	overflow-x: clip;
	overflow-y: visible;
}

.fwk-hero-live__artboard {
	position: relative;
	width: 100%;
	max-width: none;
	height: 590px;
	margin: 0;
	overflow: hidden;
	background: transparent;
	isolation: isolate;
	z-index: 1;
}

.fwk-hero-live__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
}

.fwk-hero-live__bg picture,
.fwk-hero-live__product picture,
.fwk-hero-live__cat-photo picture {
	display: contents;
}

/* Sky/sand/haze = fluid full-bleed. Foreground stays Figma absolute. */
.fwk-hero-live__bg-clip {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 385px;
	overflow: hidden;
	z-index: 0;
}

.fwk-hero-live__bg-sky {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
	max-width: none !important;
}

.fwk-hero-live__bg-family {
	display: none !important;
}

.fwk-hero-live__bg-haze {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 265px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.18) 42.4%,
		rgba(255, 255, 255, 0.69) 92.7%
	);
}

/* Figma 7:239 sand — full width, height/top from artboard */
.fwk-hero-live__bg-ground-wrap {
	position: absolute;
	left: 0;
	top: 386px;
	width: 100%;
	height: 203px;
	margin-left: 0;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
	box-shadow:
		0 -2px 4px rgba(0, 0, 0, 0.06),
		0 -8px 8px rgba(0, 0, 0, 0.05),
		0 -17px 10px rgba(0, 0, 0, 0.03),
		0 -30px 12px rgba(0, 0, 0, 0.01);
}

.fwk-hero-live__bg-ground {
	position: absolute;
	left: 0;
	top: -60.03%;
	width: 100%;
	height: 160.1%;
	max-width: none !important;
	object-fit: cover;
	object-position: center top;
}

.fwk-hero-live__product-img,
.fwk-hero-live__cat-img,
.fwk-hero-live__bg-sky,
.fwk-hero-live__bg-family,
.fwk-hero-live__bg-ground {
	max-width: none !important;
}

/* Figma 6:155 — top 239 / left 245 · 63 / 38 · gap 10 */
.fwk-hero-live__headline {
	position: absolute;
	top: 239px;
	left: calc(50% - 720px + 245px);
	z-index: 4;
	max-width: none;
	text-shadow: 0 0 20px #fff;
}

.fwk-hero-live__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	font-family: "Arial Black", "Arial Bold", Arial, Helvetica, sans-serif;
}

.fwk-hero-live__line {
	display: block;
	line-height: 1;
	white-space: nowrap;
}

.fwk-hero-live__line--brand {
	font-size: 63px;
	font-weight: 900;
	color: #2c2c2c;
	letter-spacing: 0;
}

.fwk-hero-live__line--accent {
	font-size: 38px;
	font-weight: 700;
	color: #3f3f3f;
	letter-spacing: 0;
	font-family: Arial, Helvetica, sans-serif;
}

/* Figma 6:142 — top 134 / left 670 / w 570 */
.fwk-hero-live__product {
	position: absolute;
	top: 134px;
	left: calc(50% - 720px + 670px);
	z-index: 3;
	width: 570px;
}

.fwk-hero-live__product-img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.42)) drop-shadow(0 5px 6px rgba(0, 0, 0, 0.28));
}

.fwk-hero-live__tooltips {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.fwk-hero-live__tip {
	position: absolute;
	top: var(--fwk-tip-top, 0);
	left: var(--fwk-tip-left, 0);
	width: 27px;
	height: 27px;
	pointer-events: auto;
}

.fwk-hero-live__pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 27px;
	height: 27px;
	padding: 0;
	border: 1px solid #c3edbb;
	border-radius: 50%;
	background: #fff;
	color: #0f8a15;
	box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.fwk-hero-live__pin-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	line-height: 0;
}

.fwk-hero-live__pin-icon svg {
	display: block;
	width: 11px;
	height: 11px;
}

.fwk-hero-live__tip--1 {
	--fwk-tip-top: 343px;
	--fwk-tip-left: calc(50% - 720px + 763px);
}

.fwk-hero-live__tip--2 {
	--fwk-tip-top: 343px;
	--fwk-tip-left: calc(50% - 720px + 926px);
}

.fwk-hero-live__tip--3 {
	--fwk-tip-top: 272px;
	--fwk-tip-left: calc(50% - 720px + 895px);
}

.fwk-hero-live__tip--4 {
	--fwk-tip-top: 297px;
	--fwk-tip-left: calc(50% - 720px + 1076px);
}

.fwk-hero-live__popup {
	position: absolute;
	width: min(var(--fwk-tip-width, 300px), calc(100vw - 10px));
	padding: 12px 14px;
	border: 1px solid #c3edbb;
	border-radius: 10px;
	background: #fff;
	color: #2c2c2c;
	font-family: var(--fwk-font, Arial, Helvetica, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 2;
	--fwk-tip-dx: 0px;
	--fwk-tip-dy: 0px;
}

.fwk-hero-live__popup-text strong {
	font-weight: 700;
}

.fwk-hero-live__tip--pos-left .fwk-hero-live__popup {
	top: 50%;
	right: calc(100% + 10px);
	transform: translateY(-50%) translate(var(--fwk-tip-dx), var(--fwk-tip-dy));
}

.fwk-hero-live__tip--pos-top .fwk-hero-live__popup {
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translate(var(--fwk-tip-dx), var(--fwk-tip-dy));
}

.fwk-hero-live__tip--pos-right .fwk-hero-live__popup {
	top: 50%;
	left: calc(100% + 10px);
	transform: translateY(-50%) translate(var(--fwk-tip-dx), var(--fwk-tip-dy));
}

.fwk-hero-live__tip--pos-bottom .fwk-hero-live__popup {
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translate(var(--fwk-tip-dx), var(--fwk-tip-dy));
}

.fwk-hero-live__tip:hover .fwk-hero-live__popup,
.fwk-hero-live__tip:focus-within .fwk-hero-live__popup {
	visibility: visible;
	opacity: 1;
}

.fwk-hero-live__pin:focus {
	outline: none;
}

.fwk-hero-live__pin:focus-visible {
	outline: 2px solid var(--fwk-color-focus, #0f8a15);
	outline-offset: 2px;
}

.fwk-hero-live__cats,
.fwk-hero-live__cat-btns {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
}

.fwk-hero-live__cat {
	position: absolute;
	pointer-events: auto;
	display: block;
}

.fwk-hero-live__cat--men {
	top: 444px;
	left: calc(50% - 720px + 290px);
	width: 210px;
}

.fwk-hero-live__cat--women {
	top: 444px;
	left: calc(50% - 720px + 542px);
	width: 200px;
}

.fwk-hero-live__cat--kids {
	top: 444px;
	left: calc(50% - 720px + 791px);
	width: 170px;
}

.fwk-hero-live__cat--accessories {
	top: 445px;
	left: calc(50% - 720px + 1038px);
	width: 160px;
}

.fwk-hero-live__cat-photo {
	display: block;
	width: 100%;
}

.fwk-hero-live__cat-img {
	display: block;
	width: 100%;
	height: auto;
}

.fwk-hero-live__cat-btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 44px;
	border: 1px solid #7fc78e;
	border-radius: 5px;
	background: #fff;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 21.7px;
	text-decoration: none;
	box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.1);
	pointer-events: auto;
}

.fwk-hero-live__cat-btn--men {
	top: 515px;
	left: calc(50% - 720px + 331px);
}

.fwk-hero-live__cat-btn--women {
	top: 515px;
	left: calc(50% - 720px + 570px);
}

.fwk-hero-live__cat-btn--kids {
	top: 515px;
	left: calc(50% - 720px + 809px);
}

.fwk-hero-live__cat-btn--accessories {
	top: 515px;
	left: calc(50% - 720px + 1048px);
}

.fwk-hero-live__cat-btn:focus-visible,
.fwk-hero-live__cat-photo:focus-visible {
	outline: 2px solid var(--fwk-color-focus, #0f8a15);
	outline-offset: 3px;
}

.fwk-hero-live__cats-label,
.fwk-hero-live__decor,
.fwk-hero-live__bake {
	display: none !important;
}

.fwk-hero--vzuttya-live .fwk-reveal,
.fwk-hero--vzuttya-live .fwk-reveal.is-visible,
.fwk-hero--vzuttya-live .fwk-reveal--hero.is-visible {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/*
 * —— Tablet 768–1199 + landscape mid (≤767 landscape): Figma 1:403 @ 1024×590 ——
 * Height locked at 590. Artboard never width-scales. vw < 1024 → left-align (protect title/left cats).
 */
@media (min-width: 768px) and (max-width: 1199px),
	(max-width: 767px) and (orientation: landscape) {
	.fwk-hero--vzuttya-live {
		height: 590px;
		overflow-x: clip;
	}

	.fwk-hero-live__artboard {
		position: relative;
		width: 1024px;
		height: 590px;
		left: 0;
		margin-left: 0;
		transform: none;
	}

	.fwk-hero-live__bg-clip {
		left: 0;
		top: 0;
		transform: none;
		width: 100%;
		height: 385px;
	}

	.fwk-hero-live__bg-sky {
		left: 0;
		transform: none;
		width: 100%;
		height: 100%;
		/* Keep family in the 385 clip (higher % = more lower beach). */
		object-position: center 78%;
	}

	.fwk-hero-live__bg-haze {
		left: 0;
		width: 100%;
		height: 241px;
	}

	.fwk-hero-live__bg-ground-wrap {
		left: 0;
		top: 340px;
		width: 100%;
		height: 154px;
		margin-left: 0;
	}

	/* Figma 1:431 — left 37 / top 239 · 63 / 38 */
	.fwk-hero-live__headline {
		top: 239px;
		left: 37px;
	}

	.fwk-hero-live__line--brand {
		font-size: 63px;
	}

	.fwk-hero-live__line--accent {
		font-size: 38px;
	}

	.fwk-hero-live__title {
		gap: 10px;
	}

	/* Figma 1:418 — left 462 / top 134 / w 570 */
	.fwk-hero-live__product {
		top: 134px;
		left: 462px;
		width: 570px;
	}

	.fwk-hero-live__tip {
		width: 27px;
		height: 27px;
	}

	.fwk-hero-live__pin {
		width: 27px;
		height: 27px;
	}

	.fwk-hero-live__pin-icon {
		width: 25px;
		height: 25px;
	}

	.fwk-hero-live__tip--1 {
		--fwk-tip-top: 343px;
		--fwk-tip-left: 555px;
	}

	.fwk-hero-live__tip--2 {
		--fwk-tip-top: 343px;
		--fwk-tip-left: 718px;
	}

	.fwk-hero-live__tip--3 {
		--fwk-tip-top: 272px;
		--fwk-tip-left: 687px;
	}

	.fwk-hero-live__tip--4 {
		--fwk-tip-top: 297px;
		--fwk-tip-left: 868px;
	}

	.fwk-hero-live__cat--men {
		top: 444px;
		left: 82px;
		width: 210px;
	}

	.fwk-hero-live__cat--women {
		top: 444px;
		left: 334px;
		width: 200px;
	}

	.fwk-hero-live__cat--kids {
		top: 444px;
		left: 583px;
		width: 170px;
	}

	.fwk-hero-live__cat--accessories {
		top: 445px;
		left: 830px;
		width: 160px;
	}

	.fwk-hero-live__cat-btn {
		width: 140px;
		height: 44px;
		font-size: 14px;
	}

	.fwk-hero-live__cat-btn--men {
		top: 515px;
		left: 123px;
	}

	.fwk-hero-live__cat-btn--women {
		top: 515px;
		left: 362px;
	}

	.fwk-hero-live__cat-btn--kids {
		top: 515px;
		left: 601px;
	}

	.fwk-hero-live__cat-btn--accessories {
		top: 515px;
		left: 840px;
	}
}

/* ≥1024 within tablet band: center the 1024 artboard (foreground only) */
@media (min-width: 1024px) and (max-width: 1199px) {
	.fwk-hero-live__artboard {
		left: 50%;
		margin-left: -512px;
	}

	.fwk-hero-live__headline {
		left: calc(50% - 512px + 37px);
	}

	.fwk-hero-live__product {
		left: calc(50% - 512px + 462px);
	}

	.fwk-hero-live__tip--1 {
		--fwk-tip-left: calc(50% - 512px + 555px);
	}

	.fwk-hero-live__tip--2 {
		--fwk-tip-left: calc(50% - 512px + 718px);
	}

	.fwk-hero-live__tip--3 {
		--fwk-tip-left: calc(50% - 512px + 687px);
	}

	.fwk-hero-live__tip--4 {
		--fwk-tip-left: calc(50% - 512px + 868px);
	}

	.fwk-hero-live__cat--men {
		left: calc(50% - 512px + 82px);
	}

	.fwk-hero-live__cat--women {
		left: calc(50% - 512px + 334px);
	}

	.fwk-hero-live__cat--kids {
		left: calc(50% - 512px + 583px);
	}

	.fwk-hero-live__cat--accessories {
		left: calc(50% - 512px + 830px);
	}

	.fwk-hero-live__cat-btn--men {
		left: calc(50% - 512px + 123px);
	}

	.fwk-hero-live__cat-btn--women {
		left: calc(50% - 512px + 362px);
	}

	.fwk-hero-live__cat-btn--kids {
		left: calc(50% - 512px + 601px);
	}

	.fwk-hero-live__cat-btn--accessories {
		left: calc(50% - 512px + 840px);
	}
}

/* —— ≥1200: Figma 6:131 @ 590, artboard 1440 centered (foreground), bg full-bleed —— */
@media (min-width: 1200px) {
	.fwk-hero--vzuttya-live {
		height: 590px;
		overflow-x: clip;
	}

	.fwk-hero-live__artboard {
		width: 1440px;
		height: 590px;
		left: 50%;
		margin-left: -720px;
		transform: none;
	}

	.fwk-hero-live__bg-clip {
		left: 0;
		transform: none;
		width: 100%;
		height: 385px;
	}

	.fwk-hero-live__bg-sky {
		left: 0;
		transform: none;
		width: 100%;
		height: 100%;
		object-position: center 62%;
	}

	.fwk-hero-live__bg-haze {
		left: 0;
		width: 100%;
		height: 265px;
	}

	.fwk-hero-live__bg-ground-wrap {
		left: 0;
		margin-left: 0;
		width: 100%;
		top: 386px;
		height: 203px;
	}
}

/*
 * —— Portrait ≤767: Figma 1:349 stacked @ 649 ——
 * Background = full viewport width. Foreground = 390-centered absolute.
 */
@media (max-width: 767px) and (orientation: portrait) {
	.fwk-hero--vzuttya-live {
		height: 649px;
		overflow-x: clip;
	}

	.fwk-hero-live__artboard {
		width: 100%;
		height: 649px;
		left: auto;
		margin-left: 0;
		transform: none;
	}

	.fwk-hero-live__bg-clip {
		left: 0;
		top: 0;
		width: 100%;
		height: 336px;
		transform: none;
	}

	.fwk-hero-live__bg-sky {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		transform: none;
		object-fit: cover;
		object-position: center 70%;
	}

	.fwk-hero-live__bg-family {
		display: none !important;
	}

	.fwk-hero-live__bg-haze {
		display: block !important;
		left: 0;
		top: 0;
		width: 100%;
		height: 200px;
	}

	.fwk-hero-live__bg-ground-wrap {
		left: 0;
		top: 317px;
		width: 100%;
		height: 120px;
		margin-left: 0;
		box-shadow: none;
	}

	.fwk-hero-live__bg-ground {
		top: -60.03%;
		height: 160.1%;
		width: 100%;
	}

	.fwk-hero-live__tip {
		width: 21.5px;
		height: 21.5px;
	}

	.fwk-hero-live__pin {
		width: 21.5px;
		height: 21.5px;
	}

	.fwk-hero-live__pin-icon {
		width: 20px;
		height: 20px;
	}

	.fwk-hero-live__pin-icon svg {
		width: 8.5px;
		height: 8.5px;
	}

	.fwk-hero-live__headline {
		top: 179px;
		left: 0;
		right: 0;
		width: 100%;
		transform: none;
		text-align: center;
		text-shadow: 0 0 12.3px #fff;
		display: flex;
		justify-content: center;
	}

	.fwk-hero-live__title {
		align-items: center;
		gap: 6.15px;
	}

	.fwk-hero-live__line--brand {
		font-size: 38.75px;
		font-weight: 900;
		letter-spacing: 0;
	}

	.fwk-hero-live__line--accent {
		font-size: 23.37px;
		font-weight: 700;
		font-family: Arial, Helvetica, sans-serif;
	}

	.fwk-hero-live__product {
		top: 212px;
		left: calc(50% - 195px + 33px);
		width: 358px;
		height: 270px;
	}

	.fwk-hero-live__product-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.fwk-hero-live__tip--1 {
		--fwk-tip-top: 347px;
		--fwk-tip-left: calc(50% - 195px + 95px);
	}

	.fwk-hero-live__tip--2 {
		--fwk-tip-top: 288px;
		--fwk-tip-left: calc(50% - 195px + 147px);
	}

	.fwk-hero-live__tip--3 {
		--fwk-tip-top: 347px;
		--fwk-tip-left: calc(50% - 195px + 312px);
	}

	.fwk-hero-live__tip--4 {
		--fwk-tip-top: 267px;
		--fwk-tip-left: calc(50% - 195px + 252px);
	}

	.fwk-hero-live__popup {
		width: min(var(--fwk-tip-width, 280px), calc(100vw - 10px));
		font-size: 12px;
		padding: 10px 12px;
	}

	.fwk-hero-live__cat--men {
		top: 415px;
		left: calc(50% - 195px + 48px);
		width: 137px;
	}

	.fwk-hero-live__cat--women {
		top: 408px;
		left: calc(50% - 195px + 208px);
		width: 141px;
	}

	.fwk-hero-live__cat--kids {
		top: 523px;
		left: calc(50% - 195px + 55px);
		width: 122px;
	}

	.fwk-hero-live__cat--accessories {
		top: 523px;
		left: calc(50% - 195px + 224px);
		width: 110px;
	}

	.fwk-hero-live__cat-btn {
		width: 100px;
		height: 40px;
		font-size: 14px;
	}

	.fwk-hero-live__cat-btn--men {
		top: 459px;
		left: calc(50% - 195px + 67px);
	}

	.fwk-hero-live__cat-btn--women {
		top: 459px;
		left: calc(50% - 195px + 229px);
	}

	.fwk-hero-live__cat-btn--kids {
		top: 576px;
		left: calc(50% - 195px + 66px);
	}

	.fwk-hero-live__cat-btn--accessories {
		top: 576px;
		left: calc(50% - 195px + 229px);
	}
}

/* —— <390 portrait: scale FOREGROUND from 390; bg stays section full-bleed —— */
@media (max-width: 389px) and (orientation: portrait) {
	.fwk-hero--vzuttya-live {
		height: calc(649px * 100vw / 390px);
		overflow-x: clip;
	}

	.fwk-hero-live__artboard {
		width: 390px;
		height: 649px;
		transform: scale(calc(100vw / 390px));
		transform-origin: top left;
	}

	.fwk-hero-live__bg-clip {
		left: 0;
		width: 100%;
		height: calc(336px * 100vw / 390px);
		transform: none;
	}

	.fwk-hero-live__bg-sky {
		left: 0;
		transform: none;
		width: 100%;
		height: 100%;
	}

	.fwk-hero-live__bg-haze {
		height: calc(200px * 100vw / 390px);
	}

	.fwk-hero-live__bg-ground-wrap {
		top: calc(317px * 100vw / 390px);
		height: calc(120px * 100vw / 390px);
	}
}