/**
 * Страница товара: состояния и варианты данных, которых в вёрстке нет (style.css не трогаем — только дополнения).
 */

/* Бейдж «Работает с Алисой» — тёмный, как .product-item__badge--dark в карточке каталога. */
.product__badge--dark {
	background-color: var(--dark);
}

/* Недоступное сочетание: «Нет в наличии» вместо цены — мельче суммы, чтобы уместиться рядом с корзиной. */
.product__price-value.is-unavailable {
	font-size: 2rem;
}

.product__cart-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.product__cart-button:disabled:hover {
	background-color: var(--dark);
}

/* Цветовых температур не три: колонок столько же, сколько вариантов (число — в style="--temps: N"). */
.product__temps {
	grid-template-columns: repeat(var(--temps, 3), 1fr);
}

/* Уведомления WooCommerce над первым экраном. */
.smd-product-notices {
	padding-top: 2rem;
}

/* У товара без характеристик и блоков выбора правая колонка начинается с цены — без отступа сверху. */
.product__info > :first-child {
	margin-top: 0;
}

/* Таб «Сертификаты и файлы» без схемы или без сертификатов и файлов: отступ между ними (2 × --section-margin) не нужен. */
.specs__pane > .specs__bottom:first-child {
	padding-top: 0;
}

.specs__pane > .specs__scheme:last-child {
	margin-bottom: 0;
}

/* Секции «… в интерьере» может не быть (нет своих фото) — тогда перед белой плашкой условий стоят преимущества, опции,
   табы или первый экран. Отступ — как в вёрстке после .interior (правило .interior + .bg-white), иначе общее
   section:not(.bg-white) + .bg-white подтягивает плашку вплотную к плиткам. */
.main > section:not(.interior) + .conditions.bg-white {
	margin-top: 0;
	padding-top: var(--section-margin);
}

@media (max-width: 1024px) {
	/* Колонка цвета (19.3rem) здесь стоит у правого края экрана: подсказка с 4-го квадрата («RAL - цена по запросу»),
	   центрированная над ним, выходила за край на ~0.7rem и даже скрытой давала странице горизонтальную прокрутку
	   5–7 px (так и в вёрстке). Выравниваем её по правому краю квадрата — как .tooltip «Доставки» на ≤768. */
	.product__color-item:nth-child(n+4) .product__color-tip {
		left: auto;
		right: 0;
		translate: 0 calc(-100% - 0.6rem);
	}
}

@media (max-width: 768px) {
	/* Колонка цвета широкая (половина ширины, на ≤480 — вся) — подсказка снова по центру квадрата, как в вёрстке. */
	.product__color-item:nth-child(n+4) .product__color-tip {
		left: 50%;
		right: auto;
		translate: -50% calc(-100% - 0.6rem);
	}
}

@media (max-width: 480px) {
	.product__price-value.is-unavailable {
		font-size: 1.8rem;
	}
}