.banner-top-wrapper {
	container:banner-top / inline-size;
}
.banner-top {
	--banner-unit: 1vw;
	--banner-bg: linear-gradient(to right, #feb5b0 0, #fed566 100%);
	--banner-color-emphasize: #DD2453;
	--banner-color-std:#302d2a;
	
	--container-padding-h: 20px;
	--container-desktop: 1440px;
	
	background:var(--banner-bg);
	color:var(--banner-color-std);
	line-height:1;
	overflow:hidden;
}

.banner-top__decor {
	pointer-events:none;
	position:absolute;
}
.banner-top__decor-left {
	top:0;
	bottom:0;
	width:360px;
	background:url("/Modules/Banners/Files/Views/BannerTop/decor-left.webp") 100% 0 / auto 100% no-repeat;
}
.banner-top__decor-kitty {
	bottom:0;
	aspect-ratio:123 / 91;
	background:url("/Modules/Banners/Files/Views/BannerTop/kitty.webp") 0 100% / contain no-repeat;
}

.banner-top__container {
	display:flex;
	justify-content:space-between;
	gap:10px;
	padding:7px var(--container-padding-h) 5px;
	min-height:min(100px, calc(var(--banner-unit) * 11));
	margin-left:auto;
	margin-right:auto;
}

.banner-top__color-emphasize {
	color: var(--banner-color-emphasize);
}

.banner-top__percent {
	font-weight:900;
	padding-top:0.1em;
	white-space:nowrap;
}
.banner-top__goods {
	font-weight:bold;
	text-wrap:balance;
}

.banner-top__img {
	flex-grow:1;
	background:var(--banner-img) 50% 50% / contain no-repeat;
}

.banner-top__text {
	display:flex;
	align-items:center;
	gap:min(24px, calc(var(--banner-unit) * 2));
}
.banner-top__description {
	display:flex;
	flex-direction:column-reverse;
	gap:0.2em;
}


@container (max-width:539px) {
	.banner-top__decor-left {
		margin-left:-265px;
	}
	
	.banner-top__percent {
		font-size:max(32px, calc(var(--banner-unit) * 8));
	}
	.banner-top__goods {
		font-size:max(17px, calc(var(--banner-unit) * 4));
	}
	.banner-top__time {
		font-size:max(12px, calc(var(--banner-unit) * 2));
	}
	
	.banner-top__img[style] {
		background-position:100% 50%;
		min-width:50px;
	}
	
	.banner-top__timer-wrapper {
		display:none;
	}
}

@container (min-width:540px) {
	.banner-top__percent {
		font-size:clamp(32px, calc(var(--banner-unit) * 5.6), 68px);
	}
	.banner-top__goods {
		font-size:clamp(17px, calc(var(--banner-unit) * 3), 36px);
	}
	.banner-top__time {
		font-size:clamp(12px, calc(var(--banner-unit) * 1.5), 18px);
	}
	
	.banner-top__timer-wrapper {
		padding-top:clamp(12px, calc(var(--banner-unit) * 2), 19px);
		padding-bottom:clamp(12px, calc(var(--banner-unit) * 2), 19px);
		text-align:center;
	}
	.banner-top__timer-title,
	.banner-top__timer-nums-label {
		font-size:clamp(11px, calc(var(--banner-unit) * 1.5), 14px);
		font-weight:600;
		position:absolute;
		left:0;
		right:0;
		white-space:nowrap;
	}
	.banner-top__timer-title {
		top:0;
	}
	.banner-top__timer-nums-label {
		bottom:clamp(-19px, calc(var(--banner-unit) * -2), -12px);
	}
	
	.banner-top__timer {
		display:flex;
		height:100%;
		font-size:min(39px, calc(var(--banner-unit) * 3.25));
		font-weight:bold;
	}
	.banner-top__timer-delimiter,
	.banner-top__timer-num {
		display:flex;
		align-items:center;
		justify-content:center;
		line-height:0.85em;
	}
	.banner-top__timer-delimiter {
		padding-left:0.35em;
		padding-right:0.35em;
	}
	.banner-top__timer-nums {
		display:flex;
		gap:min(4px, calc(var(--banner-unit) * 0.33));
	}
	.banner-top__timer-num {
		background:var(--banner-color-emphasize);
		color:white;
		border-radius:5px;
		width:min(50px, calc(var(--banner-unit) * 4.16));
		padding:0.25em 0 0.15em;
	}
}

@container (min-width:540px) and (max-width:639px) {
	.banner-top__decor-left {
		margin-left:-240px;
	}
}

@container (max-width:639px) {
	.banner-top__container {
		width:100%;
	}
	.banner-top__decor-left {
		left:0;
	}
}

@container (min-width:640px) {
	.banner-top__decor-right {
		top:0;
		bottom:0;
		width:279px;
		background:url("/Modules/Banners/Files/Views/BannerTop/decor-right.webp") 0 0 / cover no-repeat;
	}
}

@container (min-width:640px) and (max-width:1199px) {
	.banner-top__container {
		width:90%;
	}
	.banner-top__decor-left {
		left:5%;
		margin-left:-233px;
	}
	.banner-top__decor-right {
		right:-70px;
	}
}

@container (min-width:1200px) {
	.banner-top__decor-right {
		right:0;
	}
}

@container (min-width:1200px) and (max-width:1669px) {
	.banner-top__container {
		width:86%;
	}
	.banner-top__decor-left {
		right:83%;
	}
	.banner-top__decor-kitty {
		width:7%;
		left:0.3%;
	}
}

@container (min-width:1670px) {
	.banner-top__container {
		width:100%;
		max-width:var(--container-desktop);
	}
	.banner-top__decor-kitty {
		width:123px;
		left:calc(25% - 421px);
	}
}

@container (min-width:1670px) and (max-width:1920px) {
	.banner-top__decor-left {
		left:calc((113% - var(--container-desktop)) / 2 - 360px);
	}
}

@container (min-width:1921px) {
	.banner-top__decor-left {
		left:0;
	}
}

@media all and (-Webkit-min-device-pixel-ratio:1.5),
all and (-moz-min-device-pixel-ratio:1.5),
all and (-o-min-device-pixel-ratio:3/2),
all and (min-device-pixel-ratio:1.5) {
	.banner-top__decor-left {
		background-image:url("/Modules/Banners/Files/Views/BannerTop/decor-left_x2.webp");
	}
	.banner-top__decor-right {
		background-image:url("/Modules/Banners/Files/Views/BannerTop/decor-right_x2.webp");
	}
	.banner-top__decor-kitty {
		background-image:url("/Modules/Banners/Files/Views/BannerTop/kitty_x2.webp");
	}
}

@supports (font-size:1cqw) {
	.banner-top {
		--banner-unit: 1cqw;
	}
}