/**
 * Boiko Swatches — плитки вариантов.
 *
 * Размеры — замер у поставщика 10.10.2026: фото/цвет 84 px на компьютере,
 * 48 px на телефоне (норма пальца), зазор 8 px только между плитками.
 * Отметка выбора — чистым CSS по :checked: работает и до загрузки скриптов.
 */

/* Штатный <select> остаётся в форме и хранит выбор — только не виден. */
.boiko-sw__select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* «Цвет: Жёлтый» — название ряда как у темы, выбранное обычным начертанием. */
.boiko-sw__picked-val {
	font-weight: 400;
}

.boiko-sw__picked[hidden] {
	display: none !important;
}

.boiko-sw {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.boiko-sw__item {
	position: relative;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

/* Зависимый ряд: значения, которых нет при выборе выше, убраны совсем.
   !important — чужие стили таблицы вариантов показывают любой label
   (у плагина свотчей правило `… .variations td label` сильнее нашего класса). */
.boiko-sw__item[hidden],
.boiko-sw__more[hidden],
.boiko-sw__item:not(.is-soldout) .boiko-sw__sold {
	display: none !important;
}

/* «+N нет в наличии»: в наличии — первыми, плитка «+N», за ней распроданные.
   Открывает их флажок `.boiko-sw__fold` (первый в ряду) — без скрипта.
   Выбранное распроданное (из ссылки) не прячется. */
.boiko-sw--fold .boiko-sw__item.is-soldout {
	order: 2;
}

.boiko-sw__more {
	order: 1;
}

.boiko-sw__fold:not(:checked) ~ .boiko-sw__item.is-soldout:not(:has(.boiko-sw__radio:checked)) {
	display: none !important;
}

/* «Не показывать»: распроданных нет вовсе. Только пока в ряду есть что купить —
   иначе (выбран распроданный цвет из ссылки) ряд опустел бы, показываем с крестом. */
.boiko-sw--hide:has(.boiko-sw__item:not(.is-soldout):not([hidden])) .boiko-sw__item.is-soldout:not(:has(.boiko-sw__radio:checked)) {
	display: none !important;
}

.boiko-sw__more {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--boiko-sw-tile, 84px);
	height: var(--boiko-sw-tile, 84px);
	margin: 0;
	padding: 4px;
	border: 1px dashed rgba(0, 0, 0, 0.35);
	border-radius: 4px;
	background: #fff;
	color: inherit;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.boiko-sw__more b {
	font-size: 20px;
}

.boiko-sw__more-shut {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.boiko-sw__more-open,
.boiko-sw__fold:checked ~ .boiko-sw__more .boiko-sw__more-shut {
	display: none;
}

.boiko-sw__fold:checked ~ .boiko-sw__more .boiko-sw__more-open {
	display: inline;
}

.boiko-sw__fold:focus-visible ~ .boiko-sw__more {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.boiko-sw__radio {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.boiko-sw__face {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	background: #fff;
	color: inherit;
	line-height: 1.2;
}

.boiko-sw__item--image .boiko-sw__face,
.boiko-sw__item--color .boiko-sw__face {
	/* Размер — настройка экрана «Размер фото в плитках» (переменная печатается, только если он не по умолчанию). */
	width: var(--boiko-sw-tile, 84px);
	height: var(--boiko-sw-tile, 84px);
	padding: 2px;
}

.boiko-sw__item--button .boiko-sw__face {
	min-width: 44px;
	min-height: 36px;
	padding: 4px 12px;
	font-size: 0.9375em;
}

/* Цена второй строкой под надписью: «10 шт / 21 грн» (настройка экрана). */
.boiko-sw__item--button .boiko-sw__face:has(> .boiko-sw__price) {
	flex-direction: column;
}

.boiko-sw__price {
	font-size: 0.8125em;
	opacity: 0.75;
	white-space: nowrap;
}

/* Размер — настройка экрана; от надписи кнопки. */
.boiko-sw__price--m {
	font-size: 0.9em;
}

.boiko-sw__price--l {
	font-size: 1em;
}

/* Рамка кнопок толще и темнее (настройка экрана): тонкую серую на телефоне не видно.
   Цвет — только у невыбранных: у выбранной остаётся свой. */
.boiko-sw--border-m .boiko-sw__item--button .boiko-sw__face {
	border-width: 2px;
}

.boiko-sw--border-l .boiko-sw__item--button .boiko-sw__face {
	border-width: 3px;
}

.boiko-sw--border-m .boiko-sw__item--button .boiko-sw__radio:not(:checked) + .boiko-sw__face,
.boiko-sw--border-l .boiko-sw__item--button .boiko-sw__radio:not(:checked) + .boiko-sw__face {
	border-color: rgba(0, 0, 0, 0.45);
}

/* Обёртка «свой файл на экран» не должна влиять на размер — плитке виден только `img`. */
.boiko-sw__pic {
	display: contents;
}

.boiko-sw__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
}

.boiko-sw__color {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 2px;
}

.boiko-sw__radio:checked + .boiko-sw__face {
	border-color: currentColor;
	box-shadow: 0 0 0 1px currentColor;
}

/* Галочка на выбранном фото/цвете — рамку на пёстром фото глаз не всегда ловит.
   Вид — настройка: `--check-corner` кружок в углу, `--check-center` крупная по центру. */
.boiko-sw--check-corner .boiko-sw__item--image .boiko-sw__radio:checked + .boiko-sw__face::before,
.boiko-sw--check-corner .boiko-sw__item--color .boiko-sw__radio:checked + .boiko-sw__face::before {
	content: "✓";
	position: absolute;
	top: 3px;
	right: 3px;
	z-index: 1;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #111;
	color: var(--boiko-sw-tick, #fff);
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}

/* Белая галочка с тёмной обводкой — видна и на светлом, и на тёмном фото. */
.boiko-sw--check-center .boiko-sw__item--image .boiko-sw__radio:checked + .boiko-sw__face::before,
.boiko-sw--check-center .boiko-sw__item--color .boiko-sw__radio:checked + .boiko-sw__face::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--boiko-sw-tick-img, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='rgba(0,0,0,0.35)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")) center / 60% no-repeat;
}

.boiko-sw__radio:focus-visible + .boiko-sw__face {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Нет в продаже ни в каком сочетании: бледно и перечёркнуто, но нажимается —
   покупатель увидит «нет в наличии» вместо мёртвой плитки. */
.boiko-sw__item.is-soldout .boiko-sw__face > :not(.boiko-sw__sr) {
	opacity: 0.4;
}

/* Есть, но с другим выбором выше: бледно и пунктиром, без креста — «нет в этом цвете»,
   а не «нет в наличии» (зачёркнутое). */
.boiko-sw__item.is-other .boiko-sw__face > :not(.boiko-sw__sr) {
	opacity: 0.55;
}

.boiko-sw__item.is-other .boiko-sw__face {
	border-style: dashed;
	border-color: rgba(0, 0, 0, 0.45);
}

/* Нажали бледную — вздрагивает: нажатие услышано, выбор не изменился. */
.boiko-sw__item.is-nudge .boiko-sw__face {
	animation: boiko-sw-nudge 0.3s ease-in-out;
}

@keyframes boiko-sw-nudge {
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.boiko-sw__item.is-nudge .boiko-sw__face {
		animation: none;
	}
}

/* «В корзину», пока ряд не выбран, — обычная (настройка экрана): нажатие подсвечивает пустой ряд.
   Без выбора вообще нет варианта (`is-unavailable`) и показанный распроданный цвет — бледная, как была. */
form.variations_form:has([data-boiko-sw-ask]):not(:has([data-boiko-sw-preview])) .single_add_to_cart_button.disabled.wc-variation-selection-needed:not(.wc-variation-is-unavailable) {
	opacity: 1;
	cursor: pointer;
}

/* Нажали «В корзину» без выбора — пустой ряд вспыхивает рамкой. */
.boiko-sw.is-ask {
	border-radius: 6px;
	animation: boiko-sw-ask 1.2s ease-out;
}

@keyframes boiko-sw-ask {
	0%, 60% { box-shadow: 0 0 0 3px #d63638; }
	100% { box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.boiko-sw.is-ask {
		animation: none;
		box-shadow: 0 0 0 3px #d63638;
	}
}

/* «Есть у: смесь» — название в строке нажимается: выбирает цвет и фасовку. */
.boiko-sw__note .boiko-sw__go {
	/* Строку не раздвигает, а место под палец больше. */
	padding: 8px 0;
	/* Цвет — ссылок темы, не строки: с подчёркиванием ссылку видно и без цвета (проверка Google). */
	text-decoration: underline;
	cursor: pointer;
}

.boiko-sw__item.is-soldout .boiko-sw__face::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, transparent calc(50% - 1px), var(--boiko-sw-cross, rgba(0, 0, 0, 0.45)) calc(50% - 1px), var(--boiko-sw-cross, rgba(0, 0, 0, 0.45)) calc(50% + 1px), transparent calc(50% + 1px));
	pointer-events: none;
}

/* Крест ✕ (как у плагина свотчей) — вторая черта поверх первой. */
.boiko-sw--cross-x .boiko-sw__item.is-soldout .boiko-sw__face::after {
	background:
		linear-gradient(to top right, transparent calc(50% - 1px), var(--boiko-sw-cross, rgba(0, 0, 0, 0.45)) calc(50% - 1px), var(--boiko-sw-cross, rgba(0, 0, 0, 0.45)) calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(to top left, transparent calc(50% - 1px), var(--boiko-sw-cross, rgba(0, 0, 0, 0.45)) calc(50% - 1px), var(--boiko-sw-cross, rgba(0, 0, 0, 0.45)) calc(50% + 1px), transparent calc(50% + 1px));
}

.boiko-sw__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.boiko-sw__note {
	display: block;
	margin-top: 4px;
	font-size: 0.875em;
}

.boiko-sw__note:empty {
	display: none;
}

/* «Очистить» справа от плиток последнего ряда (настройка экрана). Помещается в строку —
   стоит справа; не помещается (много цветов) — перенос сам уводит её вниз, как было.
   Строка под рядом — всегда на всю ширину, ниже обоих. Окно каталога раскладывает своё. */
.variations td.value:not(.boiko-quick__last):has(> [data-boiko-sw-reset-side]):has(> .boiko-sw-reset-box) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 16px;
}

.variations td.value:not(.boiko-quick__last):has(> [data-boiko-sw-reset-side]):has(> .boiko-sw-reset-box) > .boiko-sw__note {
	flex-basis: 100%;
	order: 3;
}

/* Прижата к правому краю: пустое место отделяет «сбросить» от выбора — не третья фасовка.
   Ушла строкой ниже — там тоже справа. */
.variations td.value:not(.boiko-quick__last):has(> [data-boiko-sw-reset-side]):has(> .boiko-sw-reset-box) > .boiko-sw-reset-box {
	margin-left: auto;
}

/* «Сбросить выбор» и «Вернуть выбор» — одна клетка на двоих, видна одна: место не меняется. */
.boiko-sw-reset-box {
	display: inline-grid;
}

.boiko-sw-reset-box > * {
	grid-area: 1 / 1;
}

.boiko-sw-undo {
	visibility: hidden;
}

.boiko-sw-undo.is-on {
	visibility: visible;
}

/* Телефон, «В строке названия» (настройка экрана): своя строка под плитками держала пустоту
   над «В корзину», пока кнопка невидима. Ряд — сетка: название слева, кнопка справа, плитки
   ниже на всю ширину. Длинное название переносится, кнопка остаётся справа. */
@media (max-width: 575px) {
	.variations tr:has(> td.value:not(.boiko-quick__last) > [data-boiko-sw-reset-phone="title"]) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 12px;
		row-gap: 8px;
	}

	.variations tr:has(> td.value:not(.boiko-quick__last) > [data-boiko-sw-reset-phone="title"]) > th {
		grid-area: 1 / 1;
	}

	.variations tr:has(> td.value:not(.boiko-quick__last) > [data-boiko-sw-reset-phone="title"]) > td.value {
		display: contents;
	}

	.variations tr:has(> td.value:not(.boiko-quick__last) > [data-boiko-sw-reset-phone="title"]) > td.value > * {
		grid-column: 1 / -1;
	}

	.variations tr:has(> td.value:not(.boiko-quick__last) > [data-boiko-sw-reset-phone="title"]) > td.value > .boiko-sw-reset-box {
		grid-area: 1 / 2;
	}

	/* В одну строку, высота 40 — ряд почти не растёт. Под палец добирает невидимая кромка:
	   вверх и в стороны, вниз — нет, там плитки: промах сбросил бы выбор. */
	.variations td.value > [data-boiko-sw-reset-phone="title"] > .boiko-sw-reset {
		position: relative;
		min-height: 40px;
		max-width: none;
		white-space: nowrap;
	}

	.variations td.value > [data-boiko-sw-reset-phone="title"] > .boiko-sw-reset::after {
		content: "";
		position: absolute;
		inset: -8px -4px 0;
	}
}

/* «Сбросить выбор»: в две строки, высота 44 — под палец. Справа от кнопок или ниже — решает
   перенос. Цвет — цвета ссылок темы (как было у «Очистить»), свой — настройкой экрана;
   рамка — тот же цвет, бледнее: видно, что нажимается, но не спорит с выбранной фасовкой. */
.variations td.value .boiko-sw-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	max-width: 6.5em;
	padding: 4px 10px;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	white-space: normal;
}

.variations td.value .boiko-sw-reset[style*="--boiko-sw-reset-color"] {
	color: var(--boiko-sw-reset-color);
}

.variations td.value .boiko-sw-reset:hover,
.variations td.value .boiko-sw-reset:focus-visible {
	border-color: currentColor;
}

/* Вид строки — настройка экрана: цвет переменной, размер и жирность классами. */
.boiko-sw__note {
	color: var(--boiko-sw-note-color, #b45309);
}

.boiko-sw__note--m {
	font-size: 1em;
}

.boiko-sw__note--l {
	font-size: 1.125em;
}

.boiko-sw__note--bold {
	font-weight: 600;
}

/*
 * Подсказка с названием при наведении — вид плагина свотчей 1 в 1:
 * тёмная плашка 30 px, белый текст 14 px, стрелка 5 px, 10 px над плиткой,
 * плавное появление за полсекунды. Сдвиг у края экрана и «под плиткой»
 * ставит swatches.js (`--boiko-sw-tip-shift`, `.is-tip-below`).
 * Цвета — настройка экрана (`--boiko-sw-tip-bg`, `--boiko-sw-tip-color` у ряда).
 * Нет `data-boiko-sw-tip-text` — у значения выбрано «без подсказки».
 */
.boiko-sw--tips .boiko-sw__item[data-boiko-sw-tip-text]::before,
.boiko-sw--tips .boiko-sw__item[data-boiko-sw-tip-text]::after {
	position: absolute;
	left: 50%;
	z-index: 999;
	box-sizing: border-box;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms ease-in-out;
}

.boiko-sw--tips .boiko-sw__item[data-boiko-sw-tip-text]::before {
	content: attr(data-boiko-sw-tip-text);
	bottom: calc(100% + 10px);
	width: max-content;
	min-width: 100px;
	height: 30px;
	padding: 0 10px;
	border-radius: 3px;
	background: var(--boiko-sw-tip-bg, #333);
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
	color: var(--boiko-sw-tip-color, #fff);
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;
	text-align: center;
	white-space: nowrap;
	transform: translateX(calc(-50% + var(--boiko-sw-tip-shift, 0px)));
}

.boiko-sw--tips .boiko-sw__item.is-soldout[data-boiko-sw-tip-text]::before {
	content: attr(data-boiko-sw-tip-text) " — " attr(data-boiko-sw-tip-sold);
}

/* Подсказка с фото (у значения выбрано «фото»): фото сверху, подпись внизу.
   Ширина/высота — размер файла, но не больше половины экрана, как у Pro. */
.boiko-sw--tips .boiko-sw__item[data-boiko-sw-tip-image]::before {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	min-width: clamp(100px, 53vw, var(--boiko-sw-tip-w, 100px));
	height: calc(clamp(100px, 53vw, var(--boiko-sw-tip-h, 100px)) + 30px);
	background-image: var(--boiko-sw-tip-img);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
}

.boiko-sw--tips .boiko-sw__item[data-boiko-sw-tip-text]::after {
	content: "";
	top: -10px;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top-color: var(--boiko-sw-tip-bg, #333);
	transform: translateX(-50%);
}

.boiko-sw--tips .boiko-sw__item.is-tip-below[data-boiko-sw-tip-text]::before {
	top: calc(100% + 10px);
	bottom: auto;
}

.boiko-sw--tips .boiko-sw__item.is-tip-below[data-boiko-sw-tip-text]::after {
	top: auto;
	bottom: -10px;
	border-top-color: transparent;
	border-bottom-color: var(--boiko-sw-tip-bg, #333);
}

.boiko-sw--tips .boiko-sw__item[data-boiko-sw-tip-text]:hover::before,
.boiko-sw--tips .boiko-sw__item[data-boiko-sw-tip-text]:hover::after {
	visibility: visible;
	opacity: 1;
}

/*
 * Размер плитки фото/цвета и «+N» по экранам — границы как у темы и окна выбора:
 * планшет 576–959, телефон уже 576. Числа — настройка «Размер плитки и фото»
 * (переменная печатается, только если размер не по умолчанию).
 */
@media (max-width: 959px) {
	.boiko-sw__item--image .boiko-sw__face,
	.boiko-sw__item--color .boiko-sw__face,
	.boiko-sw__more {
		width: var(--boiko-sw-tile-tablet, 84px);
		height: var(--boiko-sw-tile-tablet, 84px);
	}
}

@media (max-width: 575px) {
	.boiko-sw__item--image .boiko-sw__face,
	.boiko-sw__item--color .boiko-sw__face,
	.boiko-sw__more {
		width: var(--boiko-sw-tile-mobile, 48px);
		height: var(--boiko-sw-tile-mobile, 48px);
	}
}

@media (max-width: 767px) {
	.boiko-sw__item--button .boiko-sw__face {
		min-width: 48px;
		min-height: 48px;
	}

	/* На узком экране в «+N» помещается только «+8» — слова уходят читалкам экрана. */
	.boiko-sw__more b {
		font-size: 16px;
	}

	.boiko-sw__more-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.boiko-sw--check-corner .boiko-sw__item--image .boiko-sw__radio:checked + .boiko-sw__face::before,
	.boiko-sw--check-corner .boiko-sw__item--color .boiko-sw__radio:checked + .boiko-sw__face::before {
		top: 2px;
		right: 2px;
		width: 16px;
		height: 16px;
		font-size: 11px;
		line-height: 16px;
	}
}