/*
 * Спільні стилі для елементів, які виводяться на БУДЬ-ЯКІЙ сторінці товару — і там, де
 * активний конструктор, і на звичайних товарах без нього:
 *  - кнопки-"пігулки" вибору варіації (той самий візуальний стиль, що й у конструкторі,
 *    assets/css/designer.css) — будує assets/js/variation-swatches.js;
 *  - кнопка й спливаюче вікно "Розмірна сітка" — будує assets/js/size-chart.js.
 *
 * Навмисно ОКРЕМИЙ файл (а не додавання правил у designer.css): designer.css підключається
 * лише на товарах з активним конструктором, а ці стилі потрібні на ВСІХ товарах, включно зі
 * звичайними. Дублювання кількох правил "пігулок" між файлами — свідомий компроміс заради
 * нульового ризику зачепити вже перевірений вигляд конструктора.
 */

.wpc-variation-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 12px;
}

.wpc-variation-swatch {
	padding: 7px 14px;
	border: 1px solid #ccc;
	border-radius: 20px;
	background: #fff;
	cursor: pointer;
	font-size: 13px;
}

.wpc-variation-swatch.is-active {
	background: var( --wpc-accent, #2c3e50 );
	color: var( --wpc-accent-text, #fff );
	border-color: var( --wpc-accent, #2c3e50 );
}

.wpc-variation-swatches--color .wpc-variation-swatch {
	border: 1px solid rgba( 128, 128, 128, 0.5 );
}

.wpc-variation-swatches--color .wpc-variation-swatch.is-active {
	border-color: var( --wpc-accent, #2271b1 );
	box-shadow: 0 0 0 2px var( --wpc-accent, #2271b1 );
}

/*
 * Кнопка "Розмірна сітка" — контурна "пігулка" (рамка+текст кольору акценту, прозорий фон),
 * а не суцільна заливка, як інші кнопки-свотчі — щоб виділялась як допоміжна дія, а не як
 * ще один варіант вибору. Іконка-лінійка (SVG) використовує currentColor, тож підхоплює
 * колір тексту кнопки (і акцент на ховері) автоматично, без окремого правила під іконку.
 */
.wpc-size-chart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: fit-content !important;
	max-width: 100%;
	flex: none !important;
	align-self: flex-start;
	justify-self: start;
	margin: 4px 0 16px;
	padding: 6px 14px;
	background: none;
	border: 2px solid var( --wpc-accent, #2c3e50 );
	border-radius: 20px;
	color: var( --wpc-accent, #2c3e50 );
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 0 0 2px var( --wpc-accent, #2c3e50 );
}

.wpc-size-chart-btn:hover {
	background: var( --wpc-accent, #2c3e50 );
	color: var( --wpc-accent-text, #fff );
}

.wpc-size-chart-icon {
	width: 14px;
	height: 14px;
	flex: none;
	fill: currentColor;
}

.wpc-size-chart-modal {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.wpc-size-chart-modal-inner {
	background: #fff;
	border-radius: 6px;
	max-width: 720px;
	width: 100%;
	max-height: 85vh;
	overflow: auto;
	padding: 24px;
	position: relative;
	box-sizing: border-box;
	color: #222222;
}

.wpc-size-chart-close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #555;
	padding: 4px 8px;
}

.wpc-size-chart-title {
	margin: 0 0 16px;
	padding-right: 28px;
	font-size: 17px;
	color: #111111;
}

/* Картинка-візуалізація (необов'язкова) зліва, таблиця справа — переноситься одна під одну
   на вузьких екранах (flex-wrap). */
.wpc-size-chart-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}

.wpc-size-chart-image {
	flex: 0 0 200px;
	max-width: 220px;
}

.wpc-size-chart-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.wpc-size-chart-table-wrap {
	flex: 1 1 280px;
	overflow-x: auto;
}

.wpc-size-chart-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	min-width: 300px;
}

.wpc-size-chart-table th,
.wpc-size-chart-table td {
	border: 1px solid #eee;
	padding: 8px 10px;
	text-align: center;
	white-space: nowrap;
	color: #222222;
}

.wpc-size-chart-table thead th {
	background: var( --wpc-accent, #111111 );
	color: var( --wpc-accent-text, #fff );
	font-weight: 700;
}

.wpc-size-chart-table tbody td:first-child {
	background: #f7f7f7;
	font-weight: 600;
	color: #111111;
}