/**
 * NOMA: WooCommerce view tweaks.
 */

/* Product attributes (Additional information) as simple label:value lines */
.woocommerce table.woocommerce-product-attributes,
.woocommerce-page table.woocommerce-product-attributes {
	border: 0;
	border-collapse: collapse;
	margin: 0;
	width: auto;
}

.woocommerce table.woocommerce-product-attributes tbody,
.woocommerce-page table.woocommerce-product-attributes tbody {
	display: block;
}

.woocommerce table.woocommerce-product-attributes tr,
.woocommerce-page table.woocommerce-product-attributes tr {
	display: block;
	margin: 0;
	padding: 0;
}

.woocommerce table.woocommerce-product-attributes th,
.woocommerce table.woocommerce-product-attributes td,
.woocommerce-page table.woocommerce-product-attributes th,
.woocommerce-page table.woocommerce-product-attributes td {
	background: transparent !important;
	border: 0 !important;
	display: inline;
	padding: 0 !important;
}

.woocommerce table.woocommerce-product-attributes th,
.woocommerce-page table.woocommerce-product-attributes th {
	color: inherit;
	font-weight: 400;
	text-transform: lowercase;
}

.woocommerce table.woocommerce-product-attributes th::after,
.woocommerce-page table.woocommerce-product-attributes th::after {
	content: ": ";
	white-space: pre;
}

.woocommerce table.woocommerce-product-attributes td p,
.woocommerce-page table.woocommerce-product-attributes td p {
	display: inline;
	margin: 0;
}

/* -------------------------------------------------------------------------
   Variation Swatches for WooCommerce: размер / отступы / индикатор выбора
   свотчей вынесены в плагин «Noma Product Swatches»
   (Настройки → Noma: свотчи вариаций). Плагин задаёт по устройствам:
     --wvs-single-product-item-width / --wvs-single-product-item-height (размер),
     gap между свотчами и padding вокруг блока, а также точку-индикатор
     вместо галочки. Здесь эти значения больше не хардкодим.
   ------------------------------------------------------------------------- */

/* Доп. таблица атрибутов + блоки WC */
.woocommerce table.shop_attributes td,
th.woocommerce-product-attributes-item__label {
	line-height: 1.2 !important;
}

/* Вариации: без подписи «Цвет» в строке, без сброса, фон ячейки под свотчи */
.variations th.label {
	display: none !important;
}

td.value.woo-variation-items-wrapper {
	background-color: transparent;
}

a.reset_variations {
	display: none !important;
}

/* Свотчи вариаций: убрать всплывающую подсказку.
   Отступ между свотчами теперь задаёт плагин «Noma Product Swatches» через gap
   (Настройки → Noma: свотчи вариаций), поэтому margin здесь убран. */
[data-wvstooltip]::before {
	display: none;
}

/* Кнопки корзины: скрыть ссылку «Просмотр корзины» после добавления товара */
a.added_to_cart.wc-forward {
	display: none !important;
}

/* Кнопка «В корзину» (страница товара): убрать декоративный ::after в обычном
   состоянии, но оставить его при загрузке (там WooCommerce рисует крутилку). */
button.single_add_to_cart_button.button.alt:not(.loading)::after {
	display: none;
}

/* В момент добавления (класс .loading) — чёрный фон вместо стандартного woo (#a46497) */
button.single_add_to_cart_button.button.alt.loading {
	background-color: #000 !important;
}

/* -------------------------------------------------------------------------
   «Палочка» под кнопкой «В корзину» — как у формы (.noma-form-stick), но через
   ::before, т.к. ::after у этой кнопки занят спиннером загрузки WooCommerce.
   Вертикальная линия 1px под кнопкой; при наведении/фокусе стягивается в точку.
   ОПТ-ИН: повесь класс `noma-cart-stick` в Advanced → CSS Classes у виджета Add To Cart.
   Цвета — переменными (дефолт под светлый фон страницы товара):
     .noma-cart-stick { --noma-cart-stick-color:#848484; --noma-cart-stick-dot:#151515; }
   ------------------------------------------------------------------------- */
.noma-cart-stick {
	--noma-cart-stick-color: #848484;
	--noma-cart-stick-dot: #151515;
}

.noma-cart-stick button.single_add_to_cart_button {
	position: relative;
	margin-bottom: 24px; /* место под линию (зазор 4 + линия 20) */
	overflow: visible;
}

.noma-cart-stick button.single_add_to_cart_button::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -24px;
	transform: translateX(-50%);
	width: 1px;
	height: 20px;
	background-color: var(--noma-cart-stick-color, #848484);
	transition: width 0.3s ease, height 0.3s ease, bottom 0.3s ease,
		border-radius 0.3s ease, background-color 0.3s ease;
	pointer-events: none;
}

.noma-cart-stick button.single_add_to_cart_button:hover::before,
.noma-cart-stick button.single_add_to_cart_button:focus-visible::before {
	width: 6px;
	height: 6px;
	bottom: -10px; /* верх линии фиксирован у кнопки — стягивается в точку */
	border-radius: 50%;
	background-color: var(--noma-cart-stick-dot, #151515);
}

/* Планшет: линия 30px (как у формы) */
@media (max-width: 1199px) {
	.noma-cart-stick button.single_add_to_cart_button {
		margin-bottom: 36px;
	}
	.noma-cart-stick button.single_add_to_cart_button::before {
		bottom: -36px;
		height: 30px;
	}
	.noma-cart-stick button.single_add_to_cart_button:hover::before,
	.noma-cart-stick button.single_add_to_cart_button:focus-visible::before {
		bottom: -16px;
	}
}

/* Мобила: как desktop — линия 20px */
@media (max-width: 767px) {
	.noma-cart-stick button.single_add_to_cart_button {
		margin-bottom: 24px;
	}
	.noma-cart-stick button.single_add_to_cart_button::before {
		bottom: -24px;
		height: 20px;
	}
	.noma-cart-stick button.single_add_to_cart_button:hover::before,
	.noma-cart-stick button.single_add_to_cart_button:focus-visible::before {
		bottom: -10px;
	}
}