/**
 * Печати в магазине: реквизиты оттиска и кружки цвета.
 *
 * Поля опираются на разметку WooCommerce (form-row), поэтому здесь только
 * то, чего у неё нет: заголовок блока реквизитов, кружки цвета и
 * пояснения под выбором оснастки. Вид самих полей задаёт тема.
 */

/* Без рамки: реквизиты стоят в общем ряду с оснасткой и цветом, а
   заголовок подписан так же, как свойства товара. В рамке блок выглядел
   отдельной формой посреди страницы. */
.cpd-stamp-fields {
	margin: 0 0 18px;
}

.cpd-stamp-fields__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cpd-stamp-fields .form-row {
	margin: 0 0 12px;
	padding: 0;
}

.cpd-stamp-fields label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.92em;
}

.cpd-stamp-fields .input-text {
	width: 100%;
	box-sizing: border-box;
}

.cpd-stamp-fields__hint {
	margin: 12px 0 0;
	font-size: 0.86em;
	opacity: 0.75;
}

/* Цвет выбирают кружками, а не списком: рядом они читались как два
   разных выбора одного и того же. Список остаётся в разметке — он и есть
   поле формы, его читают и вариации WooCommerce, и программы чтения с
   экрана, — но с глаз убран. */
/* !important здесь по делу: размеры списку задаёт WooCommerce селектором
   «.woocommerce div.product form.cart .variations select», и он весомее
   любого разумного нашего. Спрятать надо наверняка — иначе список
   остаётся на виду и цвет выглядит выбранным дважды. */
.cpd-color-field--swapped select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0 !important;
}

.cpd-color-field--swapped .cpd-swatches {
	margin-top: 2px;
}

/* Кружки цвета: сам список остаётся полем формы, кружки его переключают. */
.cpd-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.cpd-swatch {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 2px solid rgba(0, 0, 0, 0.18);
	border-radius: 50%;
	cursor: pointer;
	/* Белая прослойка между краской и обводкой: у чёрного кружка иначе
	   не видно, выбран он или нет. */
	box-shadow: inset 0 0 0 2px #fff;
}

.cpd-swatch:hover {
	border-color: rgba(0, 0, 0, 0.4);
}

.cpd-swatch[aria-pressed="true"] {
	border-color: currentColor;
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(0, 0, 0, 0.12);
}

.cpd-swatch:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Пояснения: чем оснастки отличаются друг от друга. Отступ снизу — чтобы
   подпись следующего свойства не липла к последней строке. */
.cpd-stamp-notes {
	margin: 8px 0 16px;
	padding-left: 1.1em;
	font-size: 0.85em;
	line-height: 1.5;
	opacity: 0.8;
}

ul.cpd-stamp-notes {
	list-style: disc;
}

p.cpd-stamp-notes {
	padding-left: 0;
}

.cpd-swatch:disabled {
	cursor: not-allowed;
	opacity: 0.3;
}

/* Строку свойства прячем атрибутом hidden. Тема задаёт строкам таблицы
   свой display, и без этого правила спрятанная строка оставалась видна. */
.variations [hidden],
.variations tr[hidden] {
	display: none !important;
}

/* Поля реквизитов — над строкой с количеством и кнопкой, а не между
   ними: иначе количество уезжает вбок, а кнопка падает под него. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.cpd-stamp-fields {
	order: -1;
	flex: 0 0 100%;
}

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

/* Плёнка режется листом: квадратный образец вдвое крупнее кружка
   показывает её честнее — золото и голографию по шестимиллиметровому
   кружку не разглядеть. */
.cpd-swatches--chips {
	gap: 10px;
}

.cpd-swatches--chips .cpd-swatch {
	width: 52px;
	height: 52px;
	border-radius: 6px;
}

.cpd-swatches--chips .cpd-swatch[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Свои поля товара без заголовка — подписи ставим так же, как WooCommerce
   подписывает свойства: заглавными и мельче основного текста. */
.cpd-stamp-fields--plain .form-row {
	margin: 0 0 16px;
}

.cpd-stamp-fields--plain label {
	margin-bottom: 6px;
	font-size: 0.78em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Звёздочку обязательного поля в заглавных не корёжим. */
.cpd-stamp-fields--plain label .required {
	text-decoration: none;
}

/* Поле шрифта показывает выбранный шрифт, но строки списка от поля его
   наследовали: после выбора все тридцать пять названий рисовались одним
   Lobster, и сравнивать было не с чем. Строкам — обычный шрифт; у
   короткого списка у каждой строки свой, заданный прямо в ней, — он
   сильнее этого правила. */
select[data-cpd-font] option {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Цена оснастки до выбора цвета (cpd-stamp.js). Скрыта атрибутом, а
   правило темы для цены варианта могло бы вернуть ей display. */
.cpd-early-price[hidden] {
	display: none;
}