/* ==========================================================================
   Блок с промокодом (.promo-code) и попап (.promo-popup)

   Макеты: Figma «Промокод МК» — 10:641 (десктоп 1200x120), 38:15193 (мобайл 290x128).
   Обе раскладки построены в координатах своих макетов: 1px макета = var(--px).
   --px считается от ширины самого блока через container query units, поэтому
   блок пропорционально масштабируется вместе с контейнером.
   ========================================================================== */

.promo-code__container[hidden] {
	display: none !important;
}

.promo-code__container {
	/* Контейнер запросов: компактная раскладка включается по ширине блока,
	   а не экрана — блок может стоять и в узкой колонке текста */
	container-type: inline-size;
	margin-bottom: 16px;
}

.promo-code {
	--px: 0.08333333cqw; /* 1 / 1200 — десктопный макет */

	position: relative;
	aspect-ratio: 1200 / 120;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(90deg, #febb28 0%, #f88317 160.75%);
	font-family: "Montserrat", sans-serif;
}

.promo-code .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- декор ---------------------------------------------------------------- */

.promo-code__decor > * {
	position: absolute;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

.promo-code__decor picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.promo-code__panel-bg,
.promo-code__leaf-clip,
.promo-code__confetti--4,
.promo-code__confetti--5,
.promo-code__ticket--mob,
.promo-code__label--mob,
.promo-code__arrow--mob {
	display: none;
}

.promo-code__wave {
	z-index: 1;
	left: calc(130 * var(--px));
	top: calc(10 * var(--px));
	width: calc(1002.87 * var(--px));
	height: calc(100 * var(--px));
}

.promo-code__glow {
	z-index: 2;
	left: calc(992 * var(--px));
	top: calc(-21 * var(--px));
	width: calc(223 * var(--px));
	height: calc(174 * var(--px));
}

.promo-code__leaf {
	width: calc(87 * var(--px));
	height: calc(139 * var(--px));
}

.promo-code__leaf--back {
	z-index: 3;
	right: calc(117 * var(--px));
	bottom: 0;
}

/* Две размытые ветки — передний план, поэтому поверх остального */
.promo-code__leaf--blur-right,
.promo-code__leaf--blur-left {
	z-index: 11;
	width: calc(89 * var(--px));
	height: calc(144 * var(--px));
	filter: blur(calc(2.5 * var(--px)));
}

.promo-code__leaf--blur-right {
	left: calc(1118.46 * var(--px));
	top: calc(-0.55 * var(--px));
	transform: rotate(9.66deg);
}

.promo-code__leaf--blur-left {
	left: calc(-23.54 * var(--px));
	top: calc(6.45 * var(--px));
	transform: scaleY(-1) rotate(170.34deg);
}

.promo-code__gift {
	z-index: 5;
	left: 0;
	top: calc(-6 * var(--px));
	width: calc(172 * var(--px));
	height: calc(144 * var(--px));
}

.promo-code__door {
	z-index: 8;
	left: calc(1002 * var(--px));
	top: calc(-19 * var(--px));
	width: calc(224 * var(--px));
	height: calc(239 * var(--px));
}

.promo-code__confetti--1 {
	z-index: 4;
	left: calc(18.48 * var(--px));
	top: calc(-11.71 * var(--px));
	width: calc(24.2154 * var(--px));
	height: calc(46.8307 * var(--px));
	transform: rotate(-35.82deg);
}

.promo-code__confetti--2 {
	z-index: 6;
	left: calc(112.18 * var(--px));
	top: calc(-34.33 * var(--px));
	width: calc(24.2154 * var(--px));
	height: calc(46.8307 * var(--px));
	transform: rotate(-35.82deg);
}

.promo-code__confetti--3 {
	z-index: 7;
	left: calc(147.78 * var(--px));
	top: calc(91 * var(--px));
	width: calc(24.2154 * var(--px));
	height: calc(34.1762 * var(--px));
	transform: rotate(-60.92deg);
}

/* --- текст ---------------------------------------------------------------- */

.promo-code__panel {
	display: contents;
}

.promo-code__message {
	position: absolute;
	z-index: 9;
	left: calc(183 * var(--px));
	top: 50%;
	transform: translateY(calc(-50% - 2.5 * var(--px)));
	display: flex;
	align-items: center;
	width: calc(500 * var(--px));
}

.promo-code__text {
	display: flex;
	align-items: center;
	column-gap: calc(15 * var(--px));
}

.promo-code__title {
	display: flex;
	flex-direction: column;
	row-gap: calc(5 * var(--px));
	flex: 0 0 calc(232 * var(--px));
	margin: 0;
	font-weight: 800;
	font-size: calc(29 * var(--px));
	line-height: calc(24 * var(--px));
	letter-spacing: calc(-1.16 * var(--px));
}

.promo-code__title-main {
	color: #3b1e07;
}

.promo-code__title-accent {
	color: #f87510;
}

.promo-code__note {
	position: relative;
	flex: 0 0 calc(212 * var(--px));
	margin: 0;
	padding-left: calc(16 * var(--px));
	font-weight: 500;
	font-size: calc(15 * var(--px));
	line-height: calc(19 * var(--px));
	letter-spacing: calc(-0.6 * var(--px));
	color: #7a4b20;
}

.promo-code__note::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: calc(41 * var(--px));
	margin-top: calc(-20.5 * var(--px));
	background: #dbcdb9;
	opacity: 0.5;
}

/* --- купон ---------------------------------------------------------------- */

.promo-code__coupon-wrap {
	position: absolute;
	z-index: 10;
	inset: 0;
	pointer-events: none;
}

.promo-code__coupon {
	position: absolute;
	left: calc(688.1 * var(--px));
	top: calc(28.11 * var(--px));
	width: calc(133.631 * var(--px));
	height: calc(64.446 * var(--px));
	transform: rotate(-12deg);
	transition: transform 0.2s ease;
}

.promo-code:hover .promo-code__coupon {
	transform: rotate(-12deg) scale(1.03);
}

.promo-code__ticket {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Пунктирная рамка внутри билета */
.promo-code__coupon::after {
	content: "";
	position: absolute;
	left: calc(13.3 * var(--px));
	top: calc(6.97 * var(--px));
	width: calc(115.076 * var(--px));
	height: calc(48.809 * var(--px));
	border: calc(0.758 * var(--px)) dashed rgba(254, 234, 205, 0.31);
	border-radius: calc(6.16 * var(--px));
}

.promo-code__value {
	position: absolute;
	left: calc(71.29 * var(--px));
	top: calc(31.51 * var(--px));
	transform: translate(-50%, -50%);
	font-weight: 900;
	font-size: calc(37.91 * var(--px));
	line-height: calc(37.91 * var(--px));
	letter-spacing: calc(-0.3791 * var(--px));
	color: #fff;
	text-shadow: calc(1 * var(--px)) calc(1 * var(--px)) 0 #d94d04;
	white-space: nowrap;
}

.promo-code__label {
	position: absolute;
	left: calc(846 * var(--px));
	top: calc(23 * var(--px));
	width: calc(161 * var(--px));
	height: calc(57 * var(--px));
	pointer-events: none;
}

.promo-code__arrow {
	position: absolute;
	left: calc(859.27 * var(--px));
	top: calc(65.8 * var(--px));
	width: calc(104.48 * var(--px));
	height: calc(24.8367 * var(--px));
	transform: scaleY(-1) rotate(1.6deg);
	pointer-events: none;
}

/* --- кнопки --------------------------------------------------------------- */

.promo-code__open,
.promo-code__copy {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Прозрачная кнопка на весь баннер — открывает попап */
.promo-code__open {
	position: absolute;
	z-index: 10;
	inset: 0;
	width: 100%;
	height: 100%;
}

.promo-code__copy {
	position: absolute;
	z-index: 12;
	left: calc(809.9 * var(--px));
	top: calc(37.26 * var(--px));
	width: calc(41.1 * var(--px));
	height: calc(41.67 * var(--px));
	transition: transform 0.2s ease;
}

.promo-code__copy:hover {
	transform: scale(1.08);
}

.promo-code__copy img {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- подсказка «Скопировано» ---------------------------------------------- */

.promo-code__toast {
	position: absolute;
	z-index: 13;
	left: calc(830.45 * var(--px));
	top: calc(82 * var(--px));
	transform: translateX(-50%);
	padding: calc(4 * var(--px)) calc(12 * var(--px));
	border-radius: calc(20 * var(--px));
	background: #3b1e07;
	font-weight: 600;
	font-size: calc(13 * var(--px));
	line-height: calc(16 * var(--px));
	color: #fff;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	pointer-events: none;
}

.promo-code.is-copied .promo-code__toast {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   Мобильная раскладка — отдельный макет 290x128 (Figma 38:15193)
   ========================================================================== */

@media (max-width: 767.98px) {
	.promo-code__container {
		margin-bottom: 16px;
	}

	/* Ширину ограничиваем у самого блока, а не у контейнера. У контейнеров
	   темы box-sizing: content-box, поэтому width: 100% прибавлял бы 30px
	   паддинга сверх ширины и блок уезжал вправо; а auto-поля у контейнера
	   отключают растягивание, когда .main-banner становится флекс-колонкой. */
	.promo-code {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}


/* Компактная раскладка (макет 290x128). Включается по ширине самого блока:
   так она работает и на телефоне, и когда блок стоит в узкой колонке. */
@container (max-width: 740px) {
	.promo-code {
		--px: 0.34482759cqw; /* 1 / 290 — мобильный макет */

		aspect-ratio: 290 / 128;
		border-radius: calc(16 * var(--px));
		background: linear-gradient(173.04deg, #febb28 6.65%, #f88317 91.48%);
	}

	.promo-code__wave,
	.promo-code__glow,
	.promo-code__door,
	.promo-code__leaf--back,
	.promo-code__leaf--blur-left,
	.promo-code__leaf--blur-right,
	.promo-code__confetti--1,
	.promo-code__confetti--2 {
		display: none;
	}

	.promo-code__panel-bg,
	.promo-code__leaf-clip,
	.promo-code__confetti--4,
	.promo-code__confetti--5,
	.promo-code__ticket--mob,
	.promo-code__label--mob,
	.promo-code__arrow--mob {
		display: block;
	}

	.promo-code__ticket:not(.promo-code__ticket--mob),
	.promo-code__label:not(.promo-code__label--mob),
	.promo-code__arrow:not(.promo-code__arrow--mob) {
		display: none;
	}

	.promo-code__panel-bg {
		z-index: 1;
		left: calc(4 * var(--px));
		top: calc(4 * var(--px));
		width: calc(282 * var(--px));
		height: calc(120 * var(--px));
	}

	/* Ветка видна только внутри кремовой панели — в макете это маска */
	.promo-code__leaf-clip {
		position: absolute;
		z-index: 2;
		left: calc(4 * var(--px));
		top: calc(4 * var(--px));
		width: calc(282 * var(--px));
		height: calc(120 * var(--px));
		border-radius: calc(12 * var(--px));
		overflow: hidden;
		pointer-events: none;
	}

	.promo-code__leaf--mob {
		position: absolute;
		left: calc(44.62 * var(--px));
		top: calc(-98.94 * var(--px));
		width: calc(108.759 * var(--px));
		height: calc(174.737 * var(--px));
		transform: rotate(-73.93deg);
		filter: blur(calc(2.5 * var(--px)));
	}

	.promo-code__gift {
		z-index: 6;
		left: calc(160 * var(--px));
		top: calc(-16 * var(--px));
		width: calc(146 * var(--px));
		height: calc(123 * var(--px));
	}

	.promo-code__confetti--3 {
		z-index: 3;
		left: calc(201.91 * var(--px));
		top: calc(-9 * var(--px));
		width: calc(24.2154 * var(--px));
		height: calc(34.176 * var(--px));
		transform: rotate(-60.92deg);
	}

	.promo-code__confetti--4 {
		z-index: 7;
		left: calc(137.49 * var(--px));
		top: calc(44.46 * var(--px));
		width: calc(19.776 * var(--px));
		height: calc(35.3287 * var(--px));
		transform: rotate(-35.82deg);
	}

	.promo-code__confetti--5 {
		z-index: 7;
		left: calc(248.46 * var(--px));
		top: calc(68.13 * var(--px));
		width: calc(19.776 * var(--px));
		height: calc(35.3287 * var(--px));
		transform: rotate(58.44deg);
	}

	.promo-code__message {
		left: calc(15 * var(--px));
		top: calc(18 * var(--px));
		transform: none;
		width: calc(149 * var(--px));
	}

	.promo-code__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		row-gap: calc(7 * var(--px));
		column-gap: 0;
	}

	.promo-code__title {
		flex: none;
		row-gap: calc(5 * var(--px));
		font-size: calc(19 * var(--px));
		line-height: calc(17 * var(--px));
		letter-spacing: calc(-0.76 * var(--px));
	}

	.promo-code__note {
		flex: none;
		padding-left: 0;
		font-size: calc(13 * var(--px));
		line-height: calc(15 * var(--px));
		letter-spacing: calc(-0.52 * var(--px));
	}

	.promo-code__note::before {
		display: none;
	}

	.promo-code__coupon {
		left: calc(147.64 * var(--px));
		top: calc(40.36 * var(--px));
		width: calc(129.251 * var(--px));
		height: calc(49.6239 * var(--px));
	}

	.promo-code__coupon::after {
		left: calc(10.03 * var(--px));
		top: calc(5.4 * var(--px));
		width: calc(114.091 * var(--px));
		height: calc(37.583 * var(--px));
		border-width: calc(0.584 * var(--px));
		border-radius: calc(4.743 * var(--px));
	}

	.promo-code__value {
		left: calc(55.24 * var(--px));
		top: calc(24.63 * var(--px));
		font-size: calc(29.19 * var(--px));
		line-height: calc(29.19 * var(--px));
		letter-spacing: calc(-0.2919 * var(--px));
		text-shadow: calc(0.77 * var(--px)) calc(0.77 * var(--px)) 0 #d94d04;
	}

	.promo-code__label--mob {
		left: calc(169.6 * var(--px));
		top: calc(83.82 * var(--px));
		width: calc(92 * var(--px));
		height: calc(37 * var(--px));
	}

	.promo-code__arrow--mob {
		left: calc(261.36 * var(--px));
		top: calc(68.88 * var(--px));
		width: calc(19.2412 * var(--px));
		height: calc(25.7606 * var(--px));
		transform: rotate(168.64deg);
	}

	.promo-code__copy {
		left: calc(247.86 * var(--px));
		top: calc(32 * var(--px));
		width: calc(41.1 * var(--px));
		height: calc(41.67 * var(--px));
	}

	.promo-code__toast {
		left: 50%;
		top: auto;
		bottom: calc(6 * var(--px));
		padding: calc(3 * var(--px)) calc(10 * var(--px));
		border-radius: calc(14 * var(--px));
		font-size: calc(11 * var(--px));
		line-height: calc(14 * var(--px));
	}
}


/* ==========================================================================
   Попап промокода — грузится аяксом, обвязку .popup даёт style.css темы
   ========================================================================== */

.promo-popup__content {
	width: min(420px, 92vw);
	padding: 0;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	font-family: "Montserrat", sans-serif;
}

/* Положение, размер, цвет и иконку крестика не трогаем — они общие для всех
   попапов темы (.popup__close в style.css). Снимаем только белый фон кнопки:
   на белых попапах он незаметен, а на оранжевой шапке читался бы квадратом.
   z-index — чтобы кнопка была выше картинки подарка. */
.promo-popup .popup__close {
	z-index: 3;
	background: transparent;
}

.promo-popup .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.promo-popup__head {
	position: relative;
	padding: 22px 130px 22px 24px;
	background: linear-gradient(90deg, #febb28 0%, #f88317 160.75%);
}

.promo-popup__gift {
	position: absolute;
	right: 46px;
	bottom: -14px;
	display: block;
	width: 104px;
	height: 88px;
}

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

.promo-popup__title {
	margin: 0;
	font-weight: 800;
	font-size: 24px;
	line-height: 26px;
	letter-spacing: -0.8px;
	color: #3b1e07;
}

.promo-popup__title span {
	display: block;
}

.promo-popup__title-accent {
	color: #fff;
}

.promo-popup__body {
	padding: 24px;
}

.promo-popup__lead {
	margin: 0 0 18px;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #7a4b20;
}

.promo-popup__coupon {
	position: relative;
	display: block;
	width: 196px;
	height: 95px;
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.2s ease;
}

.promo-popup__coupon:hover {
	transform: scale(1.04);
}

.promo-popup__ticket {
	display: block;
	width: 100%;
	height: 100%;
}

.promo-popup__value {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-weight: 900;
	font-size: 52px;
	line-height: 52px;
	letter-spacing: -0.6px;
	color: #fff;
	text-shadow: 1.5px 1.5px 0 #d94d04;
	white-space: nowrap;
}

.promo-popup__hint {
	margin: 10px 0 18px;
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	text-align: center;
	color: #a8845f;
	transition: color 0.2s ease;
}

.promo-popup.is-copied .promo-popup__hint {
	font-weight: 700;
	color: #1f9d55;
}

.promo-popup__list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.promo-popup__list li {
	position: relative;
	padding-left: 24px;
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	color: #674c33;
}

.promo-popup__list li:not(:last-child) {
	margin-bottom: 8px;
}

.promo-popup__list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 6px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff790d;
}

.promo-popup__btn {
	display: block;
	width: 100%;
	padding: 15px 20px;
	border: 0;
	border-radius: 8px;
	background: #ff790d;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 18px;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.promo-popup__btn:hover {
	background: #ec7412;
}

@media (max-width: 480px) {
	.promo-popup__head {
		padding: 18px 108px 18px 18px;
	}

	.promo-popup__gift {
		right: 38px;
		width: 88px;
		height: 74px;
	}

	.promo-popup__title {
		font-size: 20px;
		line-height: 22px;
	}

	.promo-popup__body {
		padding: 20px 18px;
	}

	.promo-popup__coupon {
		width: 168px;
		height: 81px;
	}

	.promo-popup__value {
		font-size: 44px;
		line-height: 44px;
	}
}

/* ==========================================================================
   Размещение блока
   ========================================================================== */

/* На внутренних страницах блок выводится сразу под шапкой (см. header.php).
   Там его родитель .wrapper — флекс-колонка, поэтому ширину задаём явно:
   у контейнеров темы content-box и margin: 0 auto, а auto-поля у флекс-элемента
   отключают растягивание и контейнер схлопывается в ноль. border-box + width:100%
   + max-width 1230px (1200 контента + по 15px паддинга) дают ту же геометрию,
   что и у остальных секций сайта. */
.promo-code__container--standalone {
	box-sizing: border-box;
	width: 100%;
	max-width: 1230px;
	padding: 0 15px;
	/* 82px — та же величина, которой .breadcrumbs резервируют место под меню
	   .header__bottom (оно position: absolute). Баннер идёт до крошек, поэтому
	   клиренс берёт на себя он, а крошкам ниже оставляем обычный отступ. */
	margin: 82px auto 0;
}

.promo-code__container--standalone:not([hidden]) + * .breadcrumbs,
.promo-code__container--standalone:not([hidden]) + * .woocommerce-breadcrumb {
	padding-top: 20px;
}

/* Блок перенесён скриптом под первую секцию страницы — клиренс под меню там
   уже не нужен, геометрию задаём заново: селектор `.header + …` после переноса
   не срабатывает, соседство изменилось. */
/* Блок перенесён скриптом под первую секцию страницы. Геометрию задаём заново:
   1230px = 1200 контента + по 15px паддинга, как у остальных секций сайта. */
.promo-code__container--inline {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: 1230px;
	padding: 0 15px;
	margin: 24px auto;
}

/* В каталоге блок лежит внутри .catalog-product__container — гасим вложенный
   контейнер, иначе отступы и max-width применяются дважды */
[class*="__container"] .promo-code__container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 767.98px) {
	/* На главной по макету (Figma 38:15514) блок уходит под слайдер,
	   на десктопе остаётся над ним — меняем местами флексом, без дублей в DOM */
	.main-banner {
		display: flex;
		flex-direction: column;
	}

	/* Слайдер главной внутри флекс-колонки обязан уметь сжиматься: у флекс-элемента
	   min-width: auto, и Swiper раздувал контейнер по суммарной ширине всех слайдов
	   (доходило до 33 млн px, слайды уезжали за экран) */
	.main-banner > .main-banner__container {
		min-width: 0;
		max-width: 100%;
	}

	.main-banner > .promo-code__container {
		order: 2;
		/* Боковые auto-поля контейнеров темы обязательно обнулить: у флекс-элемента
		   они отключают растягивание, и контейнер схлопывается по содержимому */
		margin: 16px 0 0;
	}

}