/* Header + secondary nav float transparently over the hero on this page only.
   Promo bar and .bon-top stay normal/opaque, exactly as in the mockup. */
body:has(.bon-popmart-page) .bon-header,
body:has(.bon-popmart-page) .bon-secondary-menu {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	border-color: transparent;
}

body:has(.bon-popmart-page) .bon-header {
	top: 80px;
}

body:has(.bon-popmart-page) .bon-secondary-menu {
	top: 146px;
}

body:has(.bon-popmart-page) .bon-header__logo-text,
body:has(.bon-popmart-page) .bon-header__partner,
body:has(.bon-popmart-page) .bon-secondary-menu__link {
	color: #ffffff;
}

body:has(.bon-popmart-page) .bon-header-search__control,
body:has(.bon-popmart-page) .bon-header-search__input {
	background: #000000;
	border-color: rgba(255, 255, 255, .35);
	color: #ffffff;
}

body:has(.bon-popmart-page) .bon-header-search__input::placeholder {
	color: rgba(255, 255, 255, .7);
}

body:has(.bon-popmart-page) .bon-header-search__button {
	color: #ffffff;
}

body:has(.bon-popmart-page) .bon-header__logo-img:not(.bon-header__logo-img--alt) {
	display: none;
}

body:has(.bon-popmart-page) .bon-header__logo-img--alt {
	display: block;
}

@media (max-width: 767px) {
	body:has(.bon-popmart-page) .bon-secondary-menu {
		display: none;
	}

	body:has(.bon-popmart-page) .bon-header {
		top: 40px;
	}
}

/* Footer matches the page's black theme on this page only.
   The live site uses the custom bon_custom_footer module
   (.bon-site-footer), not the stock common/footer (.bon-footer). */
body:has(.bon-popmart-page) .bon-site-footer {
	background: #000;
	color: #d7d7d7;
}

body:has(.bon-popmart-page) .bon-site-footer__main {
	background: #000;
	border-top-color: rgba(255, 255, 255, .08);
}

body:has(.bon-popmart-page) .bon-site-footer__link {
	color: #d7d7d7;
}

body:has(.bon-popmart-page) .bon-site-footer__link:hover,
body:has(.bon-popmart-page) .bon-site-footer__link:focus {
	color: #ffffff;
}

body:has(.bon-popmart-page) .bon-site-footer__bottom {
	background: #000;
}

body:has(.bon-popmart-page) .bon-site-footer__logo:not(.bon-site-footer__logo--alt) {
	display: none;
}

body:has(.bon-popmart-page) .bon-site-footer__logo--alt {
	display: inline-flex;
}

.bon-information-page--popmart .bon-container,
.bon-blog-article--popmart .bon-container {
	width: 100%;
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

.bon-information-page--popmart .bon-information-layout,
.bon-information-page--popmart .bon-information-content,
.bon-information-page--popmart .bon-information-article,
.bon-information-page--popmart .bon-information-description,
.bon-blog-article--popmart .bon-blog-article__layout,
.bon-blog-article--popmart .bon-blog-article__content,
.bon-blog-article--popmart .bon-blog-article__description {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* The site ships Light(300)/Regular(400)/Medium(500) Stratos files under
   three DIFFERENT font-family names, none matching plain 'Stratos LC Web' —
   so bold headings were silently falling back to Arial Bold. Aliased here
   to one family, with the real Bold file for 700/900. */
@font-face {
	font-family: 'PM Stratos';
	src: url('../font/stratos/StratosLCWeb-Light.woff2') format('woff2'),
		url('../font/stratos/StratosLCWeb-Light.woff') format('woff');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'PM Stratos';
	src: url('../font/stratos/StratosLCWeb-Regular.woff2') format('woff2'),
		url('../font/stratos/StratosLCWeb-Regular.woff') format('woff');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'PM Stratos';
	src: url('../font/stratos/StratosLCWeb-Medium.woff2') format('woff2'),
		url('../font/stratos/StratosLCWeb-Medium.woff') format('woff');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'PM Stratos';
	src: url('../font/stratos/StratosLCWeb-Bold.woff2') format('woff2'),
		url('../font/stratos/StratosLCWeb-Bold.woff') format('woff');
	font-weight: 600 900;
	font-display: swap;
}

.bon-popmart-page {
	--pm-black: #000;
	--pm-red: #AA0000;
	--pm-white: #ffffff;
	--pm-soft: #d7d7d7;
	--pm-container: 1310px;
	--pm-gutter: max(16px, calc((min(100vw, 1920px) - var(--pm-container)) / 2));
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
	font-family: 'PM Stratos', 'Open Sans', Arial, sans-serif;
	color: var(--pm-white);
	background: var(--pm-black);
	overflow: hidden;
}

.bon-popmart-page * {
	box-sizing: border-box;
}

.bon-popmart-page img {
	display: block;
	height: auto;
}

.bon-popmart-page h1,
.bon-popmart-page h2,
.bon-popmart-page h3,
.bon-popmart-page p,
.bon-popmart-page ul,
.bon-popmart-page li {
	margin-top: 0;
	color: inherit;
	font-family: inherit;
	letter-spacing: 0;
}

.pm-todo {
	outline: 2px dashed #ff9900;
	outline-offset: 4px;
	background: rgba(255, 153, 0, .08);
}

.pm-section {
	position: relative;
	width: 100%;
	background: var(--pm-black);
}

.pm-inner {
	width: 100%;
	max-width: var(--pm-container);
	margin: 0 auto;
	padding-left: var(--pm-gutter);
	padding-right: var(--pm-gutter);
}

.pm-title {
	margin: 0 0 44px;
	font-weight: 800;
	font-size: clamp(30px, 3.4vw, 56px);
	line-height: 1.04;
	text-transform: uppercase;
}

.pm-title--center {
	text-align: center;
}

.pm-text {
	font-size: clamp(15px, 1vw, 18px);
	line-height: 1.4;
	font-weight: 500;
	color: var(--pm-soft);
}

/* ---------- Hero ---------- */

/* Hero — absolute-positioned 1:1 from Figma (1920px frame).
   All top/left values below are taken from the design, converted to
   vw fractions (px / 1920 * 100), with the hero's own top edge used
   as the y-origin (Figma page-absolute top minus 205px header offset). */

/* Hero-relative y-origin = 80px (promo bar 40px + .bon-top 40px, both still
   normal flow — .bon-header/.bon-secondary-menu are absolute overlays and no
   longer occupy flow space). All top values below = figma page-absolute − 80,
   which is +125px versus the original figma-page-absolute − 205 (the flush
   header height in the mockup) — that 125px was the missing gap. */

.pm-hero {
	position: relative;
	min-height: clamp(500px, 54.11vw, 1039px);
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0) -119.19%, var(--pm-black) 82.67%),
		url('../image/popmart/hero-banner-popmart.png') center top / cover no-repeat,
		var(--pm-black);
}

.pm-hero__inner {
	position: relative;
	z-index: 1;
	height: 100%;
	min-height: clamp(500px, 54.11vw, 1039px);
}

.pm-hero__badge {
	position: absolute;
	left: clamp(760px, 70.31vw, 1350px);
	top: clamp(166px, 13.73vw, 302px);
	z-index: 3;
	font-size: clamp(15px, 1.667vw, 32px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.pm-hero__headline {
	margin: 0;
}

/* Character — exact Figma placement: left 666 / top 341 (page) → 261 (hero-relative) / 435x647 */
.pm-hero__scene {
	position: absolute;
	left: clamp(220px, 34.69vw, 666px);
	top: clamp(144px, 13.59vw, 261px);
	width: clamp(239px, 22.66vw, 435px);
	height: clamp(356px, 33.7vw, 647px);
	z-index: 2;
	pointer-events: none;
}

.pm-hero__scene img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pm-hero__word {
	position: absolute;
	top: clamp(166px, 15.73vw, 302px);
	z-index: 3;
	margin: 0;
	font-weight: 700;
	font-size: clamp(64px, 14.58vw, 280px);
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

.pm-hero__word--pop {
	left: clamp(150px, 15.36vw, 295px);
	z-index: 0;
}

.pm-hero__word--mart {
	left: clamp(480px, 50.94vw, 978px);
}

.pm-hero__sub {
	position: absolute;
	left: clamp(150px, 15.94vw, 306px);
	top: clamp(372px, 35.26vw, 677px);
	width: clamp(200px, 20.94vw, 402px);
	margin: 0;
	font-weight: 700;
	font-size: clamp(18px, 2.083vw, 40px);
	line-height: clamp(20px, 2.344vw, 45px);
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--pm-white);
}

.pm-hero__side {
	position: absolute;
	left: clamp(600px, 61.72vw, 1185px);
	top: clamp(372px, 35.26vw, 677px);
	width: clamp(200px, 20.16vw, 387px);
}

.pm-hero__copy {
	margin: 0 0 22px;
	font-size: clamp(14px, .885vw, 17px);
	line-height: clamp(16px, 1.09vw, 21px);
	color: var(--pm-white);
}

/* ---------- Buttons ---------- */

.pm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(14px, 1.04vw, 20px) clamp(16px, 1.25vw, 24px);
	border: none;
	background: var(--pm-red);
	color: var(--pm-white);
	font-weight: 400;
	font-size: clamp(14px, .833vw, 16px);
	line-height: clamp(17px, 1.04vw, 20px);
	text-decoration: none;
	cursor: pointer;
}

.pm-btn:hover {
	color: var(--pm-black);
	background: var(--pm-white);
}

/* ---------- ПРО БРЕНД ---------- */
/* Absolute-positioned 1:1 from Figma (1920px frame). Section-relative
   y-origin = 1119px page-absolute (hero's own bottom edge in the mockup). */

.pm-about {
	position: relative;
	min-height: clamp(320px, 34.9vw, 670px);
	background:
		radial-gradient(ellipse clamp(320px, 30vw, 580px) clamp(320px, 30vw, 580px) at 10% 100%, rgba(170, 0, 0, .32) 0%, rgba(170, 0, 0, 0) 65%),
		var(--pm-black);
	overflow: hidden;
}

.pm-about__scene {
	position: absolute;
	left: clamp(120px, 18.88vw, 428px);
	top: 0;
	width: clamp(230px, 22.77vw, 437px);
	height: clamp(365px, 36.23vw, 696px);
	transform: rotate(-31.56deg);
	z-index: 1;
	pointer-events: none;
}

.pm-about__scene img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pm-about__title {
	position: absolute;
	left: clamp(360px, 35.42vw, 680px);
	top: clamp(40px, 4.01vw, 77px);
	width: clamp(490px, 48.7vw, 935px);
	margin: 0;
	font-weight: 700;
	font-size: clamp(56px, 10.48vw, 201.14px);
	line-height: 1;
	text-align: center;
	z-index: 2;
}

.pm-about__title_en {
	position: absolute;
	left: clamp(360px, 35.42vw, 680px);
	top: clamp(40px, 4.01vw, 77px);
	width: clamp(490px, 48.7vw, 935px);
	margin: 0;
	font-weight: 700;
	font-size: clamp(56px, 7.48vw, 201.14px);
	line-height: 1;
	text-align: center;
	z-index: 2;
}

.pm-about__text {
	position: absolute;
	left: clamp(510px, 50.26vw, 965px);
	top: clamp(195px, 19.38vw, 372px);
	width: clamp(340px, 33.85vw, 650px);
	margin: 0;
	font-weight: 400;
	font-size: 17px;
	line-height: 21px;
	z-index: 2;
}

/* ---------- Carousel: Будь першим ---------- */

.pm-collect {
	position: relative;
	padding: clamp(48px, 5.4vw, 108px) 0 clamp(64px, 6vw, 120px);
	background:
		radial-gradient(ellipse clamp(320px, 30vw, 580px) clamp(320px, 30vw, 580px) at 10% 0%, rgba(170, 0, 0, .32) 0%, rgba(170, 0, 0, 0) 65%),
		radial-gradient(ellipse clamp(320px, 43.5vw, 835px) clamp(320px, 43.5vw, 835px) at 5% 90%, rgba(170, 0, 0, .26) 0%, rgba(170, 0, 0, 0) 65%),
		var(--pm-black);
	overflow: hidden;
}

.pm-collect__title {
	position: relative;
	height: clamp(120px, 14.95vw, 287px);
	margin: 0 auto clamp(20px, 2.5vw, 40px);
}

.pm-collect__title-line {
	position: absolute;
	margin: 0;
	font-weight: 700;
	font-size: clamp(48px, 6.67vw, 128px);
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	color: var(--pm-white);
}

.pm-collect__title-line--1 {
	left: clamp(-40px, 22.86vw, 439px);
	top: 0;
	width: clamp(430px, 42.66vw, 819px);
}

.pm-collect__title-line--2 {
	left: clamp(300px, 48.85vw, 938px);
	top: clamp(53px, 6.5625vw, 126px);
	width: clamp(285px, 28.23vw, 542px);
}

/* Hollow "POP MART" watermark behind the heading — matches the outlined,
   near-invisible text layers repeated down the mockup's dark sections. */
.pm-collect__ghost {
	position: absolute;
	left: 50%;
	top: clamp(-40px, -3.5vw, -68px);
	transform: translateX(-50%);
	z-index: 0;
	width: clamp(600px, 103vw, 1977px);
	font-weight: 700;
	font-size: clamp(90px, 25vw, 479px);
	line-height: clamp(114px, 31.46vw, 604px);
	text-align: center;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .11);
	text-stroke: 1px rgba(255, 255, 255, .11);
	pointer-events: none;
}

.pm-collect__viewport {
	position: relative;
	z-index: 1;
	max-width: var(--pm-container);
	margin: 0 auto;
}

.pm-collect__track {
	max-width: calc(100% - clamp(80px, 6.25vw, 120px));
	height: clamp(366px, 31.25vw, 600px);
	margin: 0 auto;
	overflow: hidden;
}

.pm-collect__track .swiper-container,
.pm-collect__track .swiper-wrapper {
	height: 100%;
}

/* Every slide keeps the SAME real box size (the "active" size from the
   mockup) so Swiper's own layout math never has to react to a size change.
   The smaller "inactive" look is pure visual scale — box model untouched. */
.pm-collect__slide {
	width: clamp(265px, 22.4vw, 430px);
	height: 100%;
	transform: scale(.837);
	opacity: .5;
	transition: transform .3s ease, opacity .3s ease;
}

.swiper-slide-active.pm-collect__slide {
	transform: scale(1);
	opacity: 1;
}

.pm-collect__card {
	position: relative;
	height: 100%;
	/* Bottom padding is bigger than the other three sides on purpose — it
	   reserves the strip the caption sits in below the image (see mockup:
	   the image does NOT run edge-to-edge into the caption). */
	padding: clamp(16px, 1.5625vw, 30px) clamp(16px, 1.5625vw, 30px) clamp(72px, 4vw, 84px);
	background: linear-gradient(180deg, rgba(170, 0, 0, .18) 29.51%, var(--pm-red) 100%), #000000;
	border: 1px solid #ffffff57;
	box-sizing: border-box;
}

.pm-collect__card img {
	/* Plain block image filling the card's padded content box — width/height
	   are both definite percentages here (not "auto"), so there's no
	   independent formula that can drift out of sync with the card's real
	   size, and no risk of the replaced-element "both auto" pitfall (which
	   falls back to the image's intrinsic pixel size and ignores insets).
	   The bigger bottom padding on .pm-collect__card (above) is what leaves
	   room for the caption below the image. */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pm-collect__caption {
	position: absolute;
	left: clamp(16px, 1.5625vw, 30px);
	right: clamp(16px, 1.5625vw, 30px);
	bottom: clamp(16px, 1.5625vw, 30px);
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	color: var(--pm-white);
}

.pm-collect__arrow {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 4;
	width: clamp(20px, 1.6vw, 31px);
	height: auto;
	transform: translateY(-50%);
	cursor: pointer;
}

.pm-collect__arrow--next {
	left: auto;
	right: 0;
}

.pm-collect .swiper-pagination {
	position: relative;
	bottom: auto;
	left: auto;
	z-index: 1;
	margin-top: 28px;
	text-align: center;
}

.pm-collect .swiper-pagination-bullet {
	background: #3b3b3b;
	opacity: 1;
}

.pm-collect .swiper-pagination-bullet-active {
	background: var(--pm-red);
	opacity: 1;
}

/* ---------- Ліцензійні колекції ---------- */

/* Absolute-positioned 1:1 from Figma (1920px frame). Section-relative
   y-origin = "ЛІЦЕНЗІЙНІ" heading's own page-absolute top (3033px). */
.pm-licensed {
	position: relative;
	min-height: clamp(630px, 64.22vw, 1233px);
	background:
		radial-gradient(ellipse clamp(320px, 43.5vw, 835px) clamp(320px, 43.5vw, 835px) at 5% 0%, rgba(170, 0, 0, .26) 0%, rgba(170, 0, 0, 0) 65%),
		linear-gradient(180deg, var(--pm-black) 0%, rgba(10, 10, 10, 0) 10%),
		url('../image/popmart/licensed-background.png') bottom center / cover no-repeat,
		var(--pm-black);
	overflow: hidden;
}

.pm-licensed__title-line {
	position: absolute;
	margin: 0;
	font-weight: 700;
	font-size: clamp(80px, 10.42vw, 200px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--pm-white);
	z-index: 1;
}

.pm-licensed__title-line-en {
	position: absolute;
	margin: 0;
	font-weight: 700;
	font-size: clamp(80px, 7.42vw, 200px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--pm-white);
	z-index: 1;
}

.pm-licensed__title-line--1 {
	left: clamp(140px, 15.89vw, 305px);
	top: clamp(48px, 3.33vw, 64px);
}

.pm-licensed__title-line--2 {
	left: clamp(380px, 43.75vw, 840px);
	top: clamp(144px, 12.86vw, 247px);
}

.pm-licensed__tile {
	position: absolute;
	width: clamp(180px, 20.78vw, 399px);
	height: clamp(140px, 16.09vw, 309px);
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(255, 255, 255, .21);
	z-index: 1;
}

.pm-licensed__tile--1 {
	left: clamp(140px, 15.89vw, 305px);
	top: clamp(264px, 26.09vw, 501px);
}

.pm-licensed__tile--2 {
	left: clamp(330px, 37.66vw, 723px);
	top: clamp(264px, 26.09vw, 501px);
}

.pm-licensed__tile--3 {
	left: clamp(330px, 37.66vw, 723px);
	top: clamp(414px, 43.18vw, 829px);
}

.pm-licensed__tile--4 {
	left: clamp(140px, 15.89vw, 305px);
	top: clamp(414px, 43.18vw, 829px);
}

.pm-licensed__tile img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pm-licensed__logo {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	width: auto;
	height: clamp(22px, 2.1vw, 40px);
	max-width: calc(100% - 24px);
	object-fit: contain;
}

.pm-licensed__scene {
	position: absolute;
	left: clamp(480px, 56.46vw, 1084px);
	top: clamp(214px, 20.36vw, 391px);
	width: clamp(240px, 27.66vw, 531px);
	height: clamp(380px, 43.85vw, 842px);
}

.pm-licensed__scene img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- Чому обирають ---------- */

.pm-why {
	position: relative;
	padding: clamp(56px, 6vw, 120px) 0;
	overflow: hidden;
}

.pm-why__title {
	max-width: var(--pm-container);
	margin: 0 auto clamp(32px, 4vw, 72px);
	font-weight: 700;
	font-size: clamp(51px, 6.67vw, 128px);
	line-height: 1;
	text-transform: uppercase;
}

.pm-why__title-line {
	display: block;
}

.pm-why__title-line--1 {
	text-align: left;
}

.pm-why__title-line--2 {
	text-align: right;
}

.pm-why__grid {
	position: relative;
	max-width: var(--pm-container);
	margin: 0 auto;
	height: clamp(298px, 38.85vw, 746px);
}

.pm-why__grid::before {
	content: '';
	position: absolute;
	right: clamp(-90px, -8.33vw, -60px);
	bottom: clamp(-90px, -8.33vw, -60px);
	width: clamp(433px, 56.41vw, 1083px);
	height: clamp(433px, 56.41vw, 1083px);
	background: radial-gradient(circle, rgba(170, 0, 0, .35) 0%, rgba(170, 0, 0, 0) 70%);
	pointer-events: none;
	z-index: 0;
}

.pm-why__card {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: clamp(7px, 0.89vw, 17px);
	align-items: flex-start;
	width: clamp(164px, 21.3vw, 409px);
	padding: clamp(12px, 1.56vw, 30px);
	background: linear-gradient(90deg, rgba(0, 0, 0, .2) -1.83%, rgba(170, 0, 0, .2) 85.57%), linear-gradient(0deg, #000000, #000000);
	border: 1px solid #FFFFFF5C;
}

.pm-why__card--1 {
	left: 0;
	top: 0;
}

.pm-why__card--2 {
	left: clamp(360px, 46.93vw, 901px);
	top: 0;
}

.pm-why__card--3 {
	left: clamp(360px, 46.93vw, 901px);
	top: clamp(204px, 19.51vw, 509px);
}

.pm-why__icon {
	flex: 0 0 auto;
	width: clamp(40px, 2.08vw, 40px);
	height: clamp(40px, 2.08vw, 40px);
}

.pm-why__card h3 {
	margin: 0 0 8px;
	font-weight: 800;
	font-size: clamp(17px, 1.2vw, 22px);
	text-transform: uppercase;
}

.pm-why__card .pm-text {
	margin: 0;
}

.pm-why__image {
	position: absolute;
	z-index: 1;
	left: clamp(29px, 3.8vw, 73px);
	top: clamp(6px, 0.83vw, 16px);
	width: clamp(373px, 48.54vw, 932px);
	height: clamp(292px, 38.02vw, 730px);
}

.pm-why__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- Marquee ---------- */

.pm-marquee {
	position: relative;
	overflow: hidden;
	padding: clamp(20px, 2.5vw, 48px) 0;
}


.pm-marquee__track {
	display: flex;
	width: max-content;
	animation: pm-marquee 22s linear infinite;
}

.pm-marquee__item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 10px;
	font-weight: 700;
	font-size: clamp(38px, 5vw, 96px);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.pm-marquee__icon {
	width: clamp(19px, 2.5vw, 48px);
	height: auto;
	flex: 0 0 auto;
}

@keyframes pm-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* ---------- Unboxing хіти ---------- */

.pm-unboxing {
	position: relative;
	padding: clamp(48px, 6vw, 120px) 0 clamp(64px, 6vw, 120px);
	overflow: hidden;
}


.pm-unboxing::before {
	top: 0;
	transform: translate(-50%, -50%);
}

.pm-unboxing::after {
	bottom: 0;
	transform: translate(-50%, 50%);
}

.pm-unboxing__canvas {
	position: relative;
	z-index: 1;
	max-width: var(--pm-container);
	margin: 0 auto;
	height: clamp(209px, 27.19vw, 522px);
}

.pm-unboxing__ghost {
	position: absolute;
	left: 50%;
	top: clamp(-40px, -3.5vw, -68px);
	transform: translateX(-50%);
	z-index: 0;
	width: clamp(600px, 103vw, 1977px);
	font-weight: 700;
	font-size: clamp(90px, 25vw, 479px);
	line-height: clamp(114px, 31.46vw, 604px);
	text-align: center;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .11);
	text-stroke: 1px rgba(255, 255, 255, .11);
	pointer-events: none;
}

.pm-unboxing__title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-weight: 700;
	font-size: clamp(80px, 10.42vw, 200px);
	line-height: 1;
	text-transform: uppercase;
}

.pm-unboxing__title-line {
	position: absolute;
	display: block;
	white-space: nowrap;
}

.pm-unboxing__title-line--1 {
	left: clamp(36px, 4.64vw, 89px);
	top: 0;
}

.pm-unboxing__title-line--2 {
	left: clamp(346px, 45vw, 864px);
	top: clamp(73px, 9.53vw, 183px);
}

.pm-unboxing__mascot {
	position: absolute;
	z-index: 2;
	left: clamp(130px, 16.93vw, 325px);
	top: clamp(54px, 7.03vw, 135px);
	width: clamp(160px, 20.78vw, 399px);
	height: clamp(155px, 20.16vw, 387px);
}

.pm-unboxing__stage {
	position: relative;
	z-index: 1;
	max-width: var(--pm-container);
	margin: 0 auto;
}

.pm-unboxing__stage::before {
	content: '';
	position: absolute;
	z-index: 0;
	left: clamp(-526px, -27.4vw, -210px);
	top: clamp(-900px, -46.88vw, -360px);
	width: clamp(433px, 56.41vw, 1083px);
	height: clamp(433px, 56.41vw, 1083px);
	background: radial-gradient(circle, rgba(170, 0, 0, .35) 0%, rgba(170, 0, 0, 0) 70%);
	pointer-events: none;
}

.pm-unboxing__stage::after {
	content: '';
	position: absolute;
	z-index: 0;
	left: clamp(362px, 47.08vw, 904px);
	top: clamp(59px, 7.66vw, 147px);
	width: clamp(433px, 56.41vw, 1083px);
	height: clamp(433px, 56.41vw, 1083px);
	background: radial-gradient(circle, rgba(170, 0, 0, .35) 0%, rgba(170, 0, 0, 0) 70%);
	pointer-events: none;
}

.pm-unboxing__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
	gap: 10px;
}

.pm-unboxing__card {
	position: relative;
}

.pm-unboxing__card img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 210 / 293;
	object-fit: cover;
}

.pm-unboxing__card--featured {
	grid-row: span 2;
}

.pm-unboxing__card--featured img {
	aspect-ratio: auto;
}

/* ---------- Бренд-зона ---------- */

.pm-zone {
	position: relative;
	padding: clamp(56px, 6vw, 120px) 0 clamp(64px, 6vw, 120px);
	overflow: hidden;
}



.pm-zone::before {
	top: 0;
	transform: translate(-50%, -50%);
}

.pm-zone::after {
	bottom: 0;
	transform: translate(-50%, 50%);
}

.pm-zone__canvas {
	position: relative;
	z-index: 1;
	max-width: var(--pm-container);
	margin: 0 auto;
	height: clamp(506px, 65.9vw, 1265px);
}

.pm-zone__line {
	position: absolute;
	margin: 0;
	font-weight: 700;
	font-size: clamp(51px, 6.67vw, 128px);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Centered like the mockup's container, not individually offset: the line
   spans the canvas edge-to-edge (left/right: 0) and its own text-align:
   center does the rest — no per-line width/left math that can drift out of
   sync with the canvas at some viewport width. */
.pm-zone__line--1 {
	left: 0;
	right: 0;
	top: 0;
	width: auto;
}

/* БРЕНД-ЗОНА + В УКРАЇНІ! are a single centered row (see .pm-zone__row
   below) — they're laid out as normal flex children now, not individually
   absolutely positioned. */
.pm-zone__line--2 {
	position: static;
}

.pm-zone__line--3 {
	position: static;
	font-weight: 300;
	font-size: clamp(26px, 3.33vw, 64px);
	line-height: clamp(28px, 3.65vw, 70px);
	white-space: normal;
}

.pm-zone__row {
	position: absolute;
	left: 0;
	right: 0;
	top: clamp(68px, 8.8vw, 169px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(8px, 1vw, 20px);
}

.pm-zone__logo {
	position: absolute;
	z-index: 1;
	left: clamp(196px, 25.52vw, 490px);
	top: clamp(44px, 5.73vw, 110px);
	width: clamp(111px, 14.46vw, 277.59px);
	height: clamp(34px, 4.41vw, 84.58px);
}

.pm-zone__canvas::before {
	content: '';
	position: absolute;
	z-index: 0;
	left: clamp(-45.5px, -2.37vw, -18px);
	top: clamp(113px, 14.71vw, 282.5px);
	width: clamp(560px, 72.92vw, 1400px);
	height: clamp(400px, 52.08vw, 1000px);
	background: radial-gradient(circle, rgba(170, 0, 0, .4) 0%, rgba(170, 0, 0, 0) 70%);
	pointer-events: none;
}

.pm-zone__photo {
	position: absolute;
	z-index: 1;
	/* Centered on the canvas's own midpoint instead of a vw-based "left" —
	   .pm-zone__canvas is capped at max-width: var(--pm-container), but the
	   original left/width clamps were computed against the full 1920px
	   design frame, so between ~1310px and 1920px viewport width they drift
	   apart and the photo ends up left-shifted instead of centered. */
	left: 50%;
	transform: translateX(-50%);
	top: clamp(163px, 18.2vw, 407px);
	width: clamp(436px, 56.82vw, 1091px);
	height: clamp(300px, 39.11vw, 751px);
}

.pm-zone__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pm-zone__address {
	position: absolute;
	left: clamp(170px, 22.14vw, 425px);
	top: clamp(475px, 55.875vw, 1188px);
	width: clamp(184px, 23.98vw, 460.5px);
	height: clamp(31px, 4.03vw, 77.3px);
}

/* ---------- Closing banner ---------- */

.pm-closing {
	line-height: 0;
}

.pm-closing__image {
	width: 100%;
	height: auto;
}

/* ==================================================================
   Responsive — based on mobile mockup (single column, 375-430px)
   ================================================================== */

@media (max-width: 1024px) {
	.pm-about__grid {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 767px) {
	.pm-inner {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Carousel — no arrows on mobile (swipe gesture only), peek-a-neighbor
	   layout via slidesPerView:2.3 (set in bon_popmart.js) — matches the
	   mobile Figma card: 171x239, ~70% of each neighbor peeking in. */
	.pm-collect__ghost {
		font-size: clamp(60px, 25vw, 90px);
	}

	/* Decorative glow spots don't scale well on narrow viewports — they end
	   up landing on top of text instead of reading as ambient light. Flat
	   black on mobile for these two sections. */
	.pm-about,
	.pm-collect {
		background: var(--pm-black);
	}

	.pm-collect__title {
		position: static;
		height: auto;
		padding: 0 16px;
	}

	.pm-collect__title-line {
		position: static;
		display: block;
		width: auto !important;
		font-size: clamp(28px, 9vw, 40px);
	}

	.pm-collect__title-line--1 {
		text-align: left;
		font-size: 48px;
	}

	.pm-collect__title-line--2 {
		text-align: right;
		font-size: 48px;
	}

	.pm-collect__viewport .pm-collect__arrow {
		display: none;
	}

	.pm-collect__viewport {
		max-width: none;
	}

	.pm-collect__track {
		max-width: none;
		height: 239px;
	}

	/* Active card is the real box (171x239) everything else scales from.
	   Inactive = ~0.8 scale + opacity .5, matching the mobile Figma spec
	   (active 171x239 vs inactive 137x190 — same ~80% ratio). */
	.pm-collect__slide {
		height: 239px;
		transform: scale(.8);
		opacity: .5;
	}

	.swiper-slide-active.pm-collect__slide {
		transform: scale(1);
		opacity: 1;
	}

	.pm-collect__card {
		display: flex;
		flex-direction: column;
		padding: 8px;
		border-width: .32px;
	}

	.pm-collect__card img {
		position: static;
		width: 100%;
		flex: 1 1 auto;
		min-height: 0;
		object-fit: cover;
	}

	.pm-collect__caption {
		position: static;
		flex: 0 0 auto;
		padding-top: 8px;
		font-size: 13px;
		line-height: 1.25;
	}

	.swiper-slide-active .pm-collect__card {
		border-width: .4px;
	}

	/* Hero — absolute-positioned 1:1 from the mobile Figma frame (390px wide).
	   Hero-relative y-origin = mobile page-absolute top minus 40px (promo bar
	   height — .bon-top/.bon-secondary-menu are hidden on mobile already). */
	.pm-hero {
		min-height: 680px;
	}

	.pm-hero__inner {
		min-height: 680px;
	}

	.pm-hero__badge {
		left: 16px;
		top: 310px;
		width: 70px;
		white-space: normal;
		font-size: 15px;
		line-height: 19px;
	}

	.pm-hero__scene {
		left: 94px;
		top: 145px;
		width: 203px;
		height: 302px;
	}

	.pm-hero__word {
		top: 97px;
		font-size: 100px;
		line-height: 126px;
		z-index: 0;
	}

	.pm-hero__word--pop {
		left: 16px;
	}



	.pm-hero__word--mart {
		left: 147px;
		top: 248px;
		z-index: 2;
	}

	.pm-hero__sub {
		left: 52px;
		top: 473px;
		width: 286px;
		font-size: 20px;
		line-height: 20px;
		text-align: center;
	}

	.pm-hero__side {
		left: 34px;
		top: 521px;
		width: 321px;
		text-align: center;
	}

	.pm-hero__copy {
		font-size: 14px;
		line-height: 18px;
	}

	.pm-hero__side .pm-btn {
		margin: 22px auto 0;
	}

	/* ПРО БРЕНД — absolute-positioned 1:1 from the mobile Figma frame (390px). */
	.pm-about {
		min-height: 560px;
		background:
			radial-gradient(ellipse 320px 320px at 15% 20%, rgba(170, 0, 0, .32) 0%, rgba(170, 0, 0, 0) 65%),
			var(--pm-black);
	}

	.pm-about__scene {
		left: 50px;
		top: 0;
		width: 212px;
		height: 337px;
	}

	.pm-about__title {
		left: 150px;
		top: 21px;
		width: 203px;
		font-size: 64px;
		line-height: 65px;
		text-align: right;
	}

	.pm-about__text {
		/* Same side margins as the rest of the page's container (.pm-inner's
		   gutter), instead of a fixed width tied to the 390px mockup frame —
		   a fixed width either overflows or leaves a lopsided gap on phones
		   that aren't exactly 390px wide. */
		left: var(--pm-gutter);
		right: var(--pm-gutter);
		top: 367px;
		width: auto;
		font-size: 14px;
		line-height: 18px;
	}

	.pm-title {
		font-size: clamp(24px, 7vw, 32px);
		margin-bottom: 24px;
	}

	.pm-collect,
	.pm-licensed,
	.pm-why,
	.pm-unboxing,
	.pm-zone {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Ліцензійні колекції — desktop is absolute-positioned to the 1920px
	   frame, which doesn't reflow; stack everything on mobile instead. */
	.pm-licensed {
		min-height: auto;
		padding-bottom: 0;
	}

	.pm-licensed__title-line {
		position: static;
		display: block;
		padding: 0 16px;
		font-size: 64px;
	}

	.pm-licensed__title-line--1 {
		text-align: left;
	}

	.pm-licensed__title-line--2 {
		text-align: right;
		padding-left: 16px;
	}

	.pm-licensed__tiles-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		max-width: 340px;
		margin: 24px auto 0;
	}

	.pm-licensed__tile {
		position: relative;
		width: auto;
		height: auto;
		aspect-ratio: 399 / 309;
	}

	.pm-licensed__tile--1,
	.pm-licensed__tile--2,
	.pm-licensed__tile--3,
	.pm-licensed__tile--4 {
		left: auto;
		top: auto;
	}

	.pm-licensed__scene {
		position: static;
		width: 100%;
		max-width: 260px;
		height: auto;
		margin: 24px auto 0;
	}

	.pm-licensed__scene img {
		height: auto;
	}

	.pm-why {
		padding-left: 16px;
		padding-right: 16px;
	}

	.pm-why__title {
		font-size: 48px;
	}

	.pm-why__grid {
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.pm-why__grid::before {
		width: 260px;
		height: 260px;
		right: -80px;
		bottom: -80px;
	}

	.pm-why__card,
	.pm-why__card--1,
	.pm-why__card--2,
	.pm-why__card--3 {
		position: static;
		width: 100%;
		height: auto;
		padding: 30px;
		gap: 14px;
	}

	.pm-why__card h3 {
		font-weight: 700;
		font-style: Bold;
		font-size: 32px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		text-transform: uppercase;
	}

	.pm-why__image {
		position: static;
		width: 360px;
		max-width: 100%;
		height: 341px;
		margin: 0 auto;
	}

	.pm-why__image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.pm-unboxing {
		padding-top: 40px;
	}

	.pm-unboxing__canvas {
		height: auto;
		padding: 0 16px;
	}

	.pm-unboxing__title {
		font-size: 76px;
	}

	.pm-unboxing__title-line {
		position: static;
	}

	.pm-unboxing__title-line--1 {
		text-align: left;
	}

	.pm-unboxing__title-line--2 {
		text-align: right;
	}

	.pm-unboxing__mascot {
		position: static;
		display: block;
		width: 251px;
		height: 244px;
	}

	.pm-unboxing__stage {
		margin-top: 16px;
		padding: 0 16px;
	}

	.pm-unboxing__stage::before {
		left: -140px;
		top: -120px;
		width: 300px;
		height: 300px;
	}

	.pm-unboxing__stage::after {
		left: auto;
		right: -140px;
		top: 220px;
		width: 300px;
		height: 300px;
	}

	.pm-unboxing__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.pm-unboxing__card img {
		aspect-ratio: 171 / 244;
	}

	.pm-unboxing__card--featured {
		grid-column: 1 / -1;
		grid-row: auto;
		order: -1;
	}

	.pm-unboxing__card--featured img {
		aspect-ratio: 357 / 500;
		height: auto;
	}

	.pm-unboxing__card--tl1 {
		order: 1;
	}

	.pm-unboxing__card--tl2 {
		order: 2;
	}

	.pm-unboxing__card--bl1 {
		order: 3;
	}

	.pm-unboxing__card--bl2 {
		order: 4;
	}

	.pm-unboxing__card--tr1 {
		order: 5;
	}

	.pm-unboxing__card--tr2 {
		order: 6;
	}

	.pm-unboxing__card--br1 {
		order: 7;
	}

	.pm-unboxing__card--br2 {
		order: 8;
	}

	.pm-marquee__item {
		font-size: 45.22px;
	}

	.pm-zone__canvas {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: auto;
		padding: 0 16px;
		text-align: center;
	}

	.pm-zone__canvas::before {
		display: none;
	}

	.pm-zone__line,
	.pm-zone__logo,
	.pm-zone__photo,
	.pm-zone__address,
	.pm-zone__row {
		position: static;
		left: auto;
		right: auto;
		top: auto;
	}

	.pm-zone__line {
		font-size: 59px;
		text-align: center !important;
		white-space: normal;
	}

	.pm-zone__line--1 {
		width: 100% !important;
	}

	.pm-zone__row {
		margin-top: 6px;
		gap: 8px;
	}

	.pm-zone__line--3 {
		font-size: 36px;
		line-height: 1.2;
	}

	.pm-zone__logo {
		width: 183px;
		height: auto;
	}

	.pm-zone__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 1091 / 751;
		margin-top: 16px;
		/* Desktop centers this element via left:50% + transform:translateX(-50%);
		   the transform must be cancelled here or the mobile (static/100%-width)
		   layout would still get shifted half its own width to the left. */
		transform: none;
	}

	.pm-zone__address {
		width: 360px;
		height: auto;
		margin-top: 24px;
	}
}