/**
 * Живое превью наклейки.
 *
 * Встаёт поверх главной картинки товара: покупателю важнее своя наклейка,
 * чем образец на фотографии. Контур закрашивается цветом плёнки, надпись
 * набирается тем же цветом — наклейка режется из одного листа, и разных
 * цветов в ней не бывает.
 */

.cpd-sticker {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	background: #f4f4f2;
}

/* Галерея WooCommerce позиционируется сама по себе; без этого превью
   считало бы координаты от края страницы. */
.woocommerce-product-gallery {
	position: relative;
}

/* Значок и надпись в одну строку: наклейка режется полосой, а не
   столбиком. Высота полосы — это и есть высота наклейки, по ней потом
   считается ширина.

   Размер задаётся здесь один раз, а значок меряется в em от него: так
   он остаётся вровень с буквами при любом кегле. */
/* Подложка под светлую плёнку: белая наклейка на светлом фоне не видна,
   и покупатель решал бы, что превью сломалось. */
.cpd-sticker--dark {
	background: #3b3b3d;
}

.cpd-sticker--dark .cpd-sticker__note {
	color: rgba(255, 255, 255, 0.7);
}

.cpd-sticker__stage {
	transform-origin: center;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.22em;
	font-size: 46px;
	line-height: 1;
}

/* Силуэт: цвет даёт фон, форму — прозрачность картинки. Так наклейка
   получается того же цвета, что и плёнка, а не цвета фотографии. */
.cpd-sticker__art {
	flex: none;
	width: 1.3em;
	height: 1.3em;
	background-color: var(--cpd-ink, #9aa0a6);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* В одну строку: плоттер режет надпись одной линией, переносов у
   наклейки не бывает. Длинный ник уменьшаем показом целиком. */
.cpd-sticker__text {
	white-space: nowrap;
	color: var(--cpd-ink, #9aa0a6);
	font-size: 1em;
	line-height: 1;
}

/* Пустой ник: остаётся один значок, и отступ рядом с ним не нужен. */
.cpd-sticker__text:empty {
	display: none;
}

/* Переливающаяся плёнка: краской её не задать, поэтому и силуэт, и буквы
   заливаются радугой. У текста заливка обрезается по буквам. */
.cpd-sticker--holo .cpd-sticker__art,
.cpd-sticker--holo .cpd-sticker__text {
	background-image:
		linear-gradient(135deg,
			#f7d9ec 0%,
			#cfe7ff 16%,
			#bdf4e0 32%,
			#fdf6c3 48%,
			#ffd8c9 64%,
			#e3d6ff 80%,
			#cdeeff 100%);
}

.cpd-sticker--holo .cpd-sticker__text {
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cpd-sticker__note {
	margin: 0;
	color: rgba(0, 0, 0, 0.55);
	font-size: 0.8em;
	text-align: center;
}

.cpd-sticker__size {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

@media (max-width: 600px) {
	.cpd-sticker__stage {
		font-size: 30px;
	}
}