/* Блок выбора вариантов товара (HPMrr) — оформление под тему UpStore.
 *
 * Подключается модификатором ocmod/zoomagazin_hpmrr_style.ocmod.xml сразу
 * после штатного kit-series.css модуля, поэтому переопределять его правила
 * можно без !important — наш файл идёт следом.
 *
 * Токены взяты из переменных темы (stylesheet/*.css), а не выдуманы:
 *   --up-color-link          #FA6F36  акцент, он же цвет кнопки «Купить»
 *   --up-bg-btn-black        #1D1D1D  тёмная кнопка
 *   --up-bg-btn-default      #F8F8F8  светлая подложка
 *   --up-color-status-out-of-stock #E65A2E
 * Радиус 12px — из ряда, который тема уже использует (8 / 12 / 20).
 *
 * Разметку модуля не трогаем (она генерится обфусцированным контроллером),
 * работаем только по его классам: .hpm-block-prd, .hpm-button-wrapper,
 * .hpm-button, .hpm-button.out-stock, .hpmrr-price.
 */

.hpm-block-prd {
	--hpm-accent: #FA6F36;
	--hpm-ink: #1D1D1D;
	--hpm-muted: #8A8A8A;
	--hpm-line: #E6E6E6;
	--hpm-surface: #FFFFFF;
	--hpm-surface-soft: #F8F8F8;
	--hpm-sale: #E35845;        /* --special-bg-color темы */
	--hpm-sale-old: #C5C5C5;    /* --up-color-sale-price темы */
	--hpm-radius: 12px;

	margin: 20px 0 24px;
}

/* Заголовок блока — «Другие варианты» / «варианты:».
   Это подпись к группе, а не раздел страницы: приглушаем до метки, чтобы он
   не спорил с названием товара и ценой. */
.hpm-block-prd > h3 {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hpm-muted);
}

/* Заголовок колонки. Модуль печатает сюда название поля, из которого берёт
   подпись, — у нас это «Расположение» (поле location). Покупателю эта
   техническая деталь не нужна и сбивает с толку. */
.hpm-block-prd [class^="column-"] > h4,
.hpm-block-prd [class*=" column-"] > h4 {
	display: none;
}

.hpm-block-prd .hpm-button-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* Чип варианта: крупная подпись, цена под ней вторым уровнем.
   Покупатель сканирует размеры и фасовки, цена — уточнение, поэтому она
   мельче и приглушена, а не равноправна подписи. */
.hpm-block-prd .hpm-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 62px;
	padding: 9px 12px;
	border: 1px solid var(--hpm-line);
	border-radius: var(--hpm-radius);
	background: var(--hpm-surface);
	color: var(--hpm-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease,
		transform 0.15s ease, color 0.15s ease;
}

.hpm-block-prd .hpm-button .hpmrr-price {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--hpm-muted);
	white-space: nowrap;
	transition: color 0.15s ease;
}

.hpm-block-prd a.hpm-button:hover,
.hpm-block-prd a.hpm-button:focus-visible {
	border-color: var(--hpm-accent);
	box-shadow: 0 2px 10px rgba(250, 111, 54, 0.18);
	color: var(--hpm-ink);
	text-decoration: none;
	transform: translateY(-1px);
}

.hpm-block-prd a.hpm-button:hover .hpmrr-price,
.hpm-block-prd a.hpm-button:focus-visible .hpmrr-price {
	color: var(--hpm-accent);
}

/* Вариант по акции: старая цена зачёркнута, новая — цветом распродажи темы
   (--special-bg-color / --up-color-sale-price). Две строки, а не одна: в чипе
   шириной 62px они иначе не помещаются и переносятся как попало. */
.hpm-block-prd .hpmrr-price--sale {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
}

.hpm-block-prd .hpmrr-price-old {
	font-size: 11px;
	font-weight: 400;
	color: var(--hpm-sale-old);
	text-decoration: line-through;
}

.hpm-block-prd .hpmrr-price-new {
	color: var(--hpm-sale);
	font-weight: 600;
}

/* Наведение подсвечивает обычную цену акцентом, но у акционной свой цвет —
   перебивать его оранжевым нельзя, скидка перестанет читаться. */
.hpm-block-prd a.hpm-button:hover .hpmrr-price--sale .hpmrr-price-new,
.hpm-block-prd a.hpm-button:focus-visible .hpmrr-price--sale .hpmrr-price-new {
	color: var(--hpm-sale);
}

.hpm-block-prd a.hpm-button:hover .hpmrr-price--sale .hpmrr-price-old,
.hpm-block-prd a.hpm-button:focus-visible .hpmrr-price--sale .hpmrr-price-old {
	color: var(--hpm-sale-old);
}

/* На тёмном чипе текущего варианта красный по чёрному не читается */
.hpm-block-prd span.hpm-button .hpmrr-price-new,
.hpm-block-prd .hpm-button.active .hpmrr-price-new {
	color: #FFFFFF;
}

.hpm-block-prd span.hpm-button .hpmrr-price-old,
.hpm-block-prd .hpm-button.active .hpmrr-price-old {
	color: rgba(255, 255, 255, 0.55);
}

.hpm-block-prd .hpm-button.out-stock .hpmrr-price-new {
	color: var(--hpm-muted);
}

.hpm-block-prd .hpm-button.out-stock .hpmrr-price-old {
	color: #C9C9C9;
}

.hpm-block-prd a.hpm-button:focus-visible {
	outline: 2px solid var(--hpm-accent);
	outline-offset: 2px;
}

/* Текущий вариант. Модуль рендерит его не ссылкой, а <span> — значит и
   выглядеть он должен как состояние, а не как цель клика. */
.hpm-block-prd span.hpm-button,
.hpm-block-prd .hpm-button.active {
	border-color: var(--hpm-ink);
	background: var(--hpm-ink);
	color: #FFFFFF;
	cursor: default;
}

.hpm-block-prd span.hpm-button .hpmrr-price,
.hpm-block-prd .hpm-button.active .hpmrr-price {
	color: rgba(255, 255, 255, 0.72);
}

/* Нет в наличии. Вариант остаётся кликабельным — карточка открывается, там
   человек увидит статус и сможет подписаться на поступление, — поэтому
   приглушаем, а не блокируем. Пунктир отличает состояние от обычного чипа
   даже там, где цвет не считывается. */
.hpm-block-prd .hpm-button.out-stock {
	border-style: dashed;
	border-color: #DCDCDC;
	background: var(--hpm-surface-soft);
	color: var(--hpm-muted);
}

.hpm-block-prd .hpm-button.out-stock .hpmrr-price {
	color: #ADADAD;
}

.hpm-block-prd a.hpm-button.out-stock:hover,
.hpm-block-prd a.hpm-button.out-stock:focus-visible {
	border-color: var(--hpm-muted);
	box-shadow: none;
	color: var(--hpm-ink);
}

.hpm-block-prd a.hpm-button.out-stock:hover .hpmrr-price,
.hpm-block-prd a.hpm-button.out-stock:focus-visible .hpmrr-price {
	color: var(--hpm-muted);
}

/* Текущий вариант, которого нет в наличии, — сочетание частое (человек пришёл
   как раз за отсутствующим размером). Оба состояния навешиваются одним классом
   каждое, и .out-stock идёт ниже по файлу, поэтому без этого блока он гасит
   подсветку текущего, и в ряду становится непонятно, где ты находишься.
   Побеждает «текущий»: подсказка о наличии есть в самой карточке. */
.hpm-block-prd span.hpm-button.out-stock,
.hpm-block-prd .hpm-button.active.out-stock {
	border-style: solid;
	border-color: var(--hpm-ink);
	background: var(--hpm-ink);
	color: #FFFFFF;
}

.hpm-block-prd span.hpm-button.out-stock .hpmrr-price,
.hpm-block-prd .hpm-button.active.out-stock .hpmrr-price {
	color: rgba(255, 255, 255, 0.72);
}

.hpm-block-prd span.hpm-button.out-stock .hpmrr-price-new,
.hpm-block-prd .hpm-button.active.out-stock .hpmrr-price-new {
	color: #FFFFFF;
}

.hpm-block-prd span.hpm-button.out-stock .hpmrr-price-old,
.hpm-block-prd .hpm-button.active.out-stock .hpmrr-price-old {
	color: rgba(255, 255, 255, 0.55);
}

/* Картиночные варианты (колонка image) — у них внутри <img>, подпись не нужна */
.hpm-block-prd .hpm-button > img {
	display: block;
	border-radius: 8px;
}

@media (max-width: 480px) {
	.hpm-block-prd .hpm-button-wrapper {
		gap: 6px;
	}

	.hpm-block-prd .hpm-button {
		min-width: 56px;
		padding: 8px 10px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hpm-block-prd .hpm-button,
	.hpm-block-prd .hpm-button .hpmrr-price {
		transition: none;
	}

	.hpm-block-prd a.hpm-button:hover,
	.hpm-block-prd a.hpm-button:focus-visible {
		transform: none;
	}
}

/* Тот же блок внутри модалки быстрого просмотра. Разметка карточная, стили
   выше подходят целиком — правим только вертикальные отступы: в модалке блок
   зажат между ценой и строкой покупки, и «карточные» 20/24px рвут этот узел. */
#modal-quickview .hpm-block-prd {
	margin: 12px 0 16px;
}

/* ---------------------------------------------------------------------------
 * Ряд вариантов в листинге (.hpm-block-cat)
 *
 * Другая задача, чем на карточке товара: здесь это не выбор, а СИГНАЛ — «у
 * этого корма есть ещё фасовки». Поэтому пилюли мелкие, без цены (её печатать
 * запрещено настройкой show_price_cat = 0), и ряд живёт в одну строку.
 *
 * Одна строка, а не перенос — сознательно. Карточки стоят в сетке и обязаны
 * быть одной высоты: группа из восьми вариантов, переносясь на три строки,
 * растянула бы весь ряд сетки. Лишнее уезжает в горизонтальную прокрутку —
 * ничего не прячется и высота карточки не пляшет.
 *
 * Подписи бывают длинными: у 97 групп названия в каталоге разнородны, и
 * коротко их не подписать (см. measure_tail в scripts/hpmrr-variant-labels.php).
 * Такие пилюли обрезаются многоточием, полный текст остаётся в title.
 */
.hpm-block-cat {
	--hpm-accent: #FA6F36;
	--hpm-ink: #1D1D1D;
	--hpm-muted: #8A8A8A;
	--hpm-line: #E6E6E6;

	margin: 0 0 10px;
	min-width: 0;
}

/* Заголовок блока и название колонки-источника («Расположение») в плитке
   не нужны: места нет, а ряд пилюль и так читается как выбор. */
.hpm-block-cat > h3,
.hpm-block-cat [class^="column-"] > h4,
.hpm-block-cat [class*=" column-"] > h4 {
	display: none;
}

.hpm-block-cat .hpm-button-wrapper {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	margin: 0;
	padding: 1px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hpm-block-cat .hpm-button-wrapper::-webkit-scrollbar {
	display: none;
}

.hpm-block-cat .hpm-button {
	flex: 0 0 auto;
	max-width: 108px;
	padding: 4px 10px;
	border: 1px solid var(--hpm-line);
	border-radius: 20px;
	background: #FFFFFF;
	color: var(--hpm-ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.hpm-block-cat a.hpm-button:hover,
.hpm-block-cat a.hpm-button:focus-visible {
	border-color: var(--hpm-accent);
	color: var(--hpm-accent);
	text-decoration: none;
}

.hpm-block-cat a.hpm-button:focus-visible {
	outline: 2px solid var(--hpm-accent);
	outline-offset: 2px;
}

/* Товар, который сейчас показывает карточка. В листинге он меняется аяксом,
   поэтому состояние обязано быть заметным — иначе после клика непонятно,
   переключилось ли что-нибудь. */
.hpm-block-cat span.hpm-button,
.hpm-block-cat .hpm-button.active {
	border-color: var(--hpm-ink);
	background: var(--hpm-ink);
	color: #FFFFFF;
	cursor: default;
}

.hpm-block-cat .hpm-button.out-stock {
	border-style: dashed;
	border-color: #DCDCDC;
	background: #F8F8F8;
	color: var(--hpm-muted);
}

.hpm-block-cat span.hpm-button.out-stock,
.hpm-block-cat .hpm-button.active.out-stock {
	border-style: solid;
	border-color: var(--hpm-ink);
	background: var(--hpm-ink);
	color: #FFFFFF;
}

@media (max-width: 480px) {
	.hpm-block-cat .hpm-button {
		max-width: 96px;
		padding: 3px 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hpm-block-cat .hpm-button {
		transition: none;
	}
}