/* ============================================================
   Переключатель количества «− / +» — штучный и весовой товар.
   Разметка: product/qty_box.twig (карточки), product/product.twig (страница товара),
   checkout/simplecheckout_cart.twig (корзина). Поведение: javascript/qty.js.
   Цвета и скругления — только токены темы из stylesheet.css.
   ============================================================ */

/* Блок в карточке: в колонке .caption он идёт вместо .price-row (order: 5)
   и прижат к низу, чтобы нижняя линия цены совпадала у всех товаров ряда. */
.qty-box { order: 5; margin-top: 5px; padding-top: 0; }
.qty-box .price-row { margin-top: 0; padding-top: 10px; }

/* Наличие и цена за единицу */
.qty-meta {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin-bottom: 8px;
	font-size: 13px; line-height: 1.3;
}
.qty-stock { display: inline-flex; align-items: center; gap: 6px; color: var(--color-success); }
.qty-stock::before {
	content: ""; flex: 0 0 auto;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--color-brand);
}
.qty-stock.is-out { color: var(--color-text-muted); }
.qty-stock.is-out::before { background: var(--color-text-subtle); }
.qty-unit-price { color: var(--color-text-muted); white-space: nowrap; }

/* «−  [ 300 г ]  +» */
.qty-stepper {
	display: flex; align-items: center; gap: 4px;
	padding: 4px;
	border-radius: var(--radius-pill);
	background: var(--color-primary-soft);
}
.qty-btn {
	flex: 0 0 auto;
	width: 36px; height: 36px; padding: 0;
	border: 0; border-radius: 50%;
	background: transparent; color: var(--color-primary);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}
.qty-btn svg {
	width: 20px; height: 20px;
	fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
}
.qty-btn:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.qty-btn[disabled],
.qty-btn.is-limit { opacity: .35; cursor: not-allowed; }
.qty-value {
	flex: 1 1 auto; min-width: 0;
	padding: 0 8px;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 15px; font-weight: 600; line-height: 36px;
	text-align: center; white-space: nowrap;
}

/* Подсветка кнопок — только для мыши: на тач-экранах :hover «залипает» после тапа */
@media (hover: hover) {
	.qty-btn:not([disabled]):not(.is-limit):hover { background: rgba(var(--rgb-primary), .14); }
}

/* Страница товара: переключатель на всю высоту кнопки «Купить» */
#product-product .pro-buybar .qty-stepper { min-width: 180px; }
#product-product .pro-buybar .qty-btn { width: 44px; height: 44px; }
#product-product .pro-buybar .qty-value { font-size: 17px; line-height: 44px; }
#product-product .pro-unit-price { margin-top: 4px; color: var(--color-text-muted); font-size: 14px; }

/* Корзина Simple: тот же переключатель, рядом — удаление строки */
.simplecheckout-cart .qty-cell { display: flex; align-items: center; gap: 8px; }
.simplecheckout-cart .qty-cell .qty-stepper { flex: 0 1 190px; }
.simplecheckout-cart .qty-cell .qty-value input {
	width: 100%; padding: 0; border: 0; background: transparent;
	font: inherit; text-align: center;
}
.simplecheckout-cart .qty-cell .qty-value input:focus { outline: 0; }
/* Стиль самого Simple (default/stylesheet/simple.css, его подключает ядро модуля)
   на экранах до 640px прячет «−» и «+» корзины:
   .simplecheckout-cart td.quantity [data-onclick*=increase|decrease] { display: none !important }.
   Прежние кнопки Simple (.btn) тема возвращала своим правилом, у переключателя кнопки
   свои — возвращаем их здесь, селектор специфичнее, чем у Simple. */
.simplecheckout-cart td.quantity .qty-cell .qty-btn { display: inline-flex !important; }

/* Маленький переключатель: мини-корзина, закладки, сравнение */
.qty-stepper--sm { gap: 2px; padding: 3px; }
.qty-stepper--sm .qty-btn { width: 28px; height: 28px; }
.qty-stepper--sm .qty-btn svg { width: 15px; height: 15px; }
.qty-stepper--sm .qty-value { padding: 0 6px; font-size: 13px; line-height: 28px; }

/* Мини-корзина в шапке: «− / +» слева, сумма позиции справа.
   На узком телефоне сумма уходит под переключатель. */
#cart .cart-item-qty { flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; }
#cart .cart-item-qty .qty-stepper { flex: 0 0 136px; }
#cart .cart-item-qty .ci-sum { white-space: nowrap; }

/* Закладки и сравнение: переключатель и «Купить» рядом */
.qty-buy {
	display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px;
	vertical-align: middle;
}
.qty-buy .qty-stepper { flex: 0 0 136px; }
#account-wishlist .qty-buy-btn span { display: none; }
#account-wishlist td .qty-buy-btn { border: 0; background: var(--color-primary); color: #fff; }
#account-wishlist td .qty-buy-btn:hover { background: var(--color-surface-inverse); color: #fff; }
#product-compare .comb .qty-buy { justify-content: center; margin: 3px; }
#product-compare .comb .qty-buy-btn { margin: 0; border: 0; background: var(--color-primary); color: #fff; }
#product-compare .comb .qty-buy-btn:hover { background: var(--color-surface-inverse); color: #fff; }

/* Страница корзины (checkout/cart) */
.cart-des .cart-qty { max-width: 190px; margin: 10px 0 0; }

/* Телефон: кнопки крупнее под палец */
@media (max-width: 767px) {
	.qty-stepper--sm .qty-btn { width: 32px; height: 32px; }
	.qty-stepper--sm .qty-value { line-height: 32px; }
	#cart .cart-item-qty .qty-stepper,
	.qty-buy .qty-stepper { flex-basis: 144px; }
	#product-compare .comb .qty-buy { display: flex; flex-direction: column; align-items: stretch; margin: 0; }
	#product-compare .comb .qty-buy .qty-stepper { flex: 0 0 auto; }
	.cart-des .cart-qty { margin: 10px auto 0; }

	/* Корзина Simple: строка товара — карточка (stylesheet.css, «Телефон»).
	   Там сумма стояла поверх строки (position: absolute) и на 320–375px
	   наезжала на переключатель. Теперь переключатель и сумма — одна
	   флекс-строка под названием, а «удалить» — в правом верхнем углу
	   карточки: так значению вроде «1,025 кг» хватает ширины. */
	.simplecheckout table.simplecheckout-cart tbody tr { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 10px; }
	.simplecheckout table.simplecheckout-cart td.name { flex: 1 1 100%; padding-right: 36px !important; }
	.simplecheckout table.simplecheckout-cart td.quantity { flex: 1 1 0; min-width: 0; }
	.simplecheckout table.simplecheckout-cart td.total { position: static; flex: 0 0 auto; margin: 12px 0 0 auto; }
	.simplecheckout-cart .qty-cell { flex: 1 1 auto; min-width: 0; }
	.simplecheckout-cart .qty-cell .qty-stepper { flex: 0 1 170px; min-width: 0; }
	.simplecheckout-cart .qty-cell .btn-danger { position: absolute; top: 10px; right: -6px; }
}