/*!
 * DV WooCommerce Quantity Buttons.
 * Visual layer only: the «−» [qty] «+» cell and the catalog card layout.
 * Version: 1.4.0
 */

/* -------------------------------------------------------------------------
 * 1. ГАБАРИТЫ кнопок «−» и «+».
 *
 *    Это ЕДИНСТВЕННОЕ место в файле, где задаются размеры кнопок. Селектор
 *    один и тот же для обеих кнопок, и все шесть размеров + box-sizing —
 *    тоже. Расхождение по габаритам физически невозможно: правило не
 *    различает «−» и «+» и не оставляет ни одного размера «по умолчанию».
 *
 *    Почему rem, а НЕ em: em в width/height/min/max-height считается от
 *    СОБСТВЕННОГО font-size кнопки, а он у кнопок разный (см. п. 2), поэтому
 *    одно и то же число в em у «−» и у «+» дало бы разные фактические боксы.
 *    rem считается от корневого font-size и у «−» и у «+» одинаков при любом
 *    их собственном font-size.
 *
 *    min/max дублируют width/height намеренно:
 *      * без min-width/max-width кнопку-флекс-элемент способен сжать
 *        .quantity, и «+» сжался бы сильнее «−» (у него свой текстовый
 *        узел и свой ::before);
 *      * без min/max-height кнопку способен растянуть align-items.
 *
 *    flex: 0 0 auto + flex-basis того же rem запрещают сжатие и рост бокса
 *    по главной оси. Итог: фактический border-box кнопки всегда равен
 *    ровно 2.4rem x 2.4rem (2.1rem x 2.1rem на узких экранах) — и у «−»,
 *    и у «+», независимо от контента.
 *
 *    Почему `!important`: Storefront задаёт для КАЖДОГО button
 *    `padding: .618em 1.4157em; border: 0; display: inline-block;
 *     font-weight: 600; line-height: 1.618` (style.css), а
 *    storefront/woocommerce.css подключается ПОЗЖЕ нашей таблицы стилей.
 *    Все `!important` ниже ограничены нашими классами.
 * ------------------------------------------------------------------------- */

.dv-qty-minus,
.dv-qty-plus {
	box-sizing: border-box !important;

	width: 2.4rem !important;
	min-width: 2.4rem !important;
	max-width: 2.4rem !important;

	height: 2.4rem !important;
	min-height: 2.4rem !important;
	max-height: 2.4rem !important;

	flex: 0 0 auto !important;
	flex-basis: 2.4rem !important;
}

/* -------------------------------------------------------------------------
 * 2. Общий облик обеих кнопок.
 *
 *    Здесь только оформление, размеров НЕТ: габариты живут в п. 1, чтобы не
 *    было двух мест, где они заданы, и они не разошлись.
 *
 *    Порядок DOM, который создаёт наш JS внутри .quantity:
 *        [label] [−] input.qty [+]
 *    поэтому «−» идёт ПЕРЕД полем, а «+» — ПОСЛЕ него.
 * ------------------------------------------------------------------------- */

.dv-qty-btn {
	/* одинаковая раскладка и центрирование у «−» и «+» */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	/* без отступов и рамок ни от браузера, ни от темы */
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	/* выключаем платформенную отрисовку кнопки: иначе Chrome/Firefox/Safari
	   рисуют боксы по-разному даже при одинаковых width/height */
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;

	/* Текстовый глиф визуально убран: font-size: 0 делает его невидимым,
	   но сам текст остаётся в DOM (он нужен скринридеру рядом с aria-label).
	   Знак рисует ::before — см. блок 3 ниже. */
	font-family: inherit !important;
	font-size: 0 !important;
	font-style: normal !important;
	font-variant: normal !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-shadow: none !important;
	text-rendering: auto !important;
	color: inherit !important;

	/* Базовая точка для абсолютно спозиционированного ::before. */
	position: relative !important;

	vertical-align: middle !important;
	cursor: pointer !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.dv-qty-btn[disabled] {
	opacity: 0.45 !important;
	cursor: default !important;
}

/* -------------------------------------------------------------------------
 * 3. Знаки «−» и «+» рисуются ЛИНИЯМИ, а не глифами шрифта.
 *
 *     Замеры Source Sans Pro 600 (разобраны таблицы cmap/glyf/loca):
 *         PLUS  U+002B | advance 513 | inkW 445 | inkH 462
 *         MINUS U+2212 | advance 513 | inkW 445 | inkH  84
 *     То есть по метрикам знаки РАВНЫ (одинаковый advance и одинаковая ширина
 *     чернил) и различаются только формой: «−» — длинная тонкая черта,
 *     «+» — компактный крест. Правкой font-size это не выравнивается, поэтому
 *     визуальный текст убран (font-size: 0 у .dv-qty-btn, а сам текст остаётся
 *     в DOM), а знак рисуется псевдоэлементом.
 *
 *     Оба знака описаны ОДНИМИ И ТЕМИ ЖЕ числами:
 *         --dv-qty-sign-len    — длина линии, 46% от ширины кнопки
 *         --dv-qty-sign-thick  — толщина линии, 6% от высоты кнопки
 *
 *     Единицы — проценты от габарита кнопки, а НЕ em/rem: у кнопки стоит
 *     font-size: 0, поэтому em внутри ::before дал бы нулевой размер.
 *     Через проценты размеры не зависят ни от кегля, ни от шрифта и сами
 *     масштабируются вместе с кнопкой (на мобильном кнопка 2.1rem — линии
 *     пропорционально меньше, их соотношение сохраняется). Псевдоэлемент
 *     позиционирован абсолютно и в габариты кнопки не входит.
 * ------------------------------------------------------------------------- */

.dv-qty-btn {
	--dv-qty-sign-len: 46%;
	--dv-qty-sign-thick: 6%;
}

/* Общая часть: одинаковая геометрия и цвет для обоих знаков. */
.dv-qty-btn::before {
	content: "";
	position: absolute !important;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	background-repeat: no-repeat;
}

/* «−» — одна горизонтальная линия. */
.dv-qty-minus::before {
	width: var(--dv-qty-sign-len);
	height: var(--dv-qty-sign-thick);
	background-color: currentColor;
}

/* «+» — та же горизонтальная линия ПЛЮС вертикальная той же длины
   и той же толщины. Две линии — два градиента, поэтому «+» не может
   разойтись с «−» ни по длине, ни по весу. */
.dv-qty-plus::before {
	width: var(--dv-qty-sign-len);
	height: var(--dv-qty-sign-len);
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size:
		100% var(--dv-qty-sign-thick),
		var(--dv-qty-sign-thick) 100%;
	background-position: center center;
}

/* -------------------------------------------------------------------------
 * 4. Ячейка количества — поле между НАШИМИ кнопками.
 *
 *    Селектор ОДНОЧЛЕННЫЙ: `.dv-qty-btn + input.qty`.
 *
 *    Субъект селектора — это ПОСЛЕДНЯЯ простая часть селектора, поэтому он
 *    здесь всегда `input.qty`, и правило физически НЕ МОЖЕТ попасть на
 *    <button>: ни один <button> не является input.qty. Кнопки получают
 *    свои габариты только из п. 1 и ниоткуда больше.
 *
 *    Раньше здесь была вторая половина `input.qty + .dv-qty-btn`, и вот в
 *    ней субъект — `.dv-qty-btn`, а не input. Она и красила кнопку «+»
 *    (стоящую сразу ПОСЛЕ поля) габаритами поля: width 3.2em = 51.2px и
 *    padding 0 .3em вместо 2.4rem = 38.4px и padding 0. Из-за этого «+» был
 *    шире «−» на 12.8px (desktop) и 11.2px (mobile). Половина удалена.
 *
 *    Схема длиной в ТРИ части (`… + input.qty + …`) здесь тоже не годится:
 *    субъектом оказался бы ПОСЛЕДНИЙ сосед, то есть кнопка «+», а не поле.
 *
 *    Габариты самого поля НЕ МЕНЯЛИСЬ: те же значения, тот же font-size.
 * ------------------------------------------------------------------------- */

.dv-qty-btn + input.qty {
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	width: 3.2em !important;
	height: 2.4em !important;
	min-width: 3.2em !important;
	max-width: 3.2em !important;
	min-height: 2.4em !important;
	max-height: 2.4em !important;
	margin: 0 !important;
	padding: 0 0.3em !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: textfield !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	line-height: 2.4em !important;
	text-align: center !important;
	vertical-align: middle !important;
}

/* Спиннеры съедали бы ширину и сдвигали число; гасим только у нашей ячейки. */
.dv-qty-btn + input.qty::-webkit-outer-spin-button,
.dv-qty-btn + input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* -------------------------------------------------------------------------
 * 5. Три элемента строго на одной горизонтальной линии.
 *    Матчится только .quantity, в котором лежат НАШИ кнопки; чужие .quantity
 *    не затрагиваются. Если :has() не поддерживается, выравнивание держит
 *    vertical-align: middle из правил выше.
 * ------------------------------------------------------------------------- */

.quantity:has(> .dv-qty-btn) {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	align-content: center !important;
	vertical-align: middle !important;
}

/* -------------------------------------------------------------------------
 * 6. Catalog card layout: quantity on its own centred row, «В корзину»
 *    underneath, stretched to the card width like the rest of Storefront.
 * ------------------------------------------------------------------------- */

.dv-qty-add-to-cart {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.5em !important;
	box-sizing: border-box !important;
	max-width: 100% !important;
	margin: 0.5em auto 0 !important;
}

/* Блок количества не растягивается на всю ширину карточки. */
.dv-qty-add-to-cart .quantity {
	flex: 0 0 auto !important;
	margin: 0 !important;
}

.dv-qty-add-to-cart .add_to_cart_button {
	align-self: stretch !important;
	margin: 0 !important;
}

/* -------------------------------------------------------------------------
 * 7. Узкие экраны: пропорциональное сжатие всей ячейки, чтобы блок
 *    не вылезал за карточку. Размеры кнопок снова равны друг другу.
 * ------------------------------------------------------------------------- */

@media (max-width: 600px) {
	/* Здесь тоже rem по той же причине, что и в блоке 1. */
	.dv-qty-minus,
	.dv-qty-plus {
		width: 2.1rem !important;
		min-width: 2.1rem !important;
		max-width: 2.1rem !important;

		height: 2.1rem !important;
		min-height: 2.1rem !important;
		max-height: 2.1rem !important;

		flex-basis: 2.1rem !important;
	}

	.dv-qty-btn + input.qty {
		width: 2.8em !important;
		height: 2.1em !important;
		min-width: 2.8em !important;
		max-width: 2.8em !important;
		min-height: 2.1em !important;
		max-height: 2.1em !important;
		line-height: 2.1em !important;
	}
}