/* -------------------------------------------------------------------------
   Noma Product Swatches — статичная «структура».
   Значения (размер/отступы/точка) приходят через инлайн-CSS из настроек
   плагина (Noma_Swatches_Admin::get_inline_css) в виде CSS-переменных на
   body.single-product. Здесь — только правила, которые эти переменные
   потребляют, плюс замена галочки на точку.

   Размер свотча задаётся родными переменными WVS:
     --wvs-single-product-item-width / --wvs-single-product-item-height
   (их потребляет woo-variation-swatches/assets/css/frontend.css).
   ------------------------------------------------------------------------- */

/* Отступ ВОКРУГ блока свотчей — 4 стороны (ячейка со списком свотчей). */
body.single-product td.value.woo-variation-items-wrapper {
	padding:
		var(--noma-sw-pad-top, 0px)
		var(--noma-sw-pad-right, 0px)
		var(--noma-sw-pad-bottom, 0px)
		var(--noma-sw-pad-left, 0px);
}

/* Отступ МЕЖДУ свотчами через gap + запас места снизу под точку. */
body.single-product ul.variable-items-wrapper {
	gap: var(--noma-sw-gap, 4px);
	padding-bottom: var(--noma-sw-dot-space, 14px);
}

/* Нейтрализуем внешний margin (расстояние задаёт gap) и внутренний padding
   свотча (WVS-дефолт margin:4px / padding:2px) — картинка заполняет свотч. */
body.single-product.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
	margin: 0 !important;
	padding: 0 !important;
}

/* li — якорь для абсолютно позиционированной точки; не обрезаем её. */
body.single-product.woo-variation-swatches .variable-items-wrapper .variable-item {
	position: relative;
	overflow: visible;
}

/* Убрать ГАЛОЧКУ (tick, ::before у выбранного свотча). */
body.single-product.woo-variation-swatches .variable-items-wrapper .variable-item.selected:not(.radio-variable-item) .variable-item-contents::before {
	display: none !important;
}

/* Без обводок у свотчей: ни у обычных, ни на ховере, ни у выбранного.
   Отличие выбранного — только точка снизу. */
body.single-product.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item),
body.single-product.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover,
body.single-product.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected,
body.single-product.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
	box-shadow: none !important;
	border: 0 !important;
}

/* ТОЧКА-индикатор под выбранным свотчем (в стиле каруселей / .noma-cart-stick). */
body.single-product.woo-variation-swatches .variable-items-wrapper .variable-item.selected:not(.radio-variable-item)::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(-1 * var(--noma-sw-dot-space, 14px));
	transform: translateX(-50%);
	width: var(--noma-sw-dot-size, 7px);
	height: var(--noma-sw-dot-size, 7px);
	border-radius: 50%;
	background: var(--noma-sw-dot-color, #151515);
	pointer-events: none;
}