/* Мобильная раскладка корзины и оформления заказа (375/390).
   Десктопные правила лежат в mu-plugins/stf-cart-layout/cart.css и
   stf-checkout-layout/assets/checkout-layout.css; здесь только @media,
   файл подключается последним (functions.php, после stf-site.css).
   Селекторы повторяют cart.css: короче их не перебить. */

@media (max-width: 767px) {

	/* ---------------------------- корзина ---------------------------- */

	/* Отступ под шапку: stf-account.css даёт 130, а капсула кончается на 103. */
	body.woocommerce-cart #main-wrapper {
		padding-top: 95px;
	}

	body.stf-cart .stf-cart__head {
		gap: 14px;
		margin-bottom: 24px;
	}

	body.stf-cart .stf-cart__pill {
		height: 38px;
		padding: 0 16px;
		font-size: 13px;
	}

	body.stf-cart .stf-cart__title {
		font-size: 32px;
		line-height: 38px;
	}

	/* Одна колонка: позиции, купон, сводка, преимущества друг под другом. */
	body.stf-cart .post-content .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	body.stf-cart .woocommerce-cart-form,
	body.stf-cart.woocommerce-cart .woocommerce .cart-collaterals {
		grid-column: 1;
		position: static;
	}

	/* stf-account.css держит старую таблицу корзины в 460px с прокруткой;
	   у карточек ширина своя, лишнее срезалось справа. */
	body.stf-cart .woocommerce form.woocommerce-cart-form {
		overflow: visible;
	}

	body.stf-cart .woocommerce form.woocommerce-cart-form table.cart {
		min-width: 0;
	}

	body.stf-cart .woocommerce .shop_table.cart tbody {
		gap: 12px;
	}

	/* Карточка позиции: фото 88 слева, справа название, цена за штуку,
	   под ними счётчик и сумма в одну строку; крестик в правом верхнем углу. */
	body.stf-cart .woocommerce .shop_table.cart tr.cart_item {
		grid-template-columns: 88px minmax(0, 1fr) auto;
		grid-template-areas:
			"img name del"
			"img price price"
			"img qty sum";
		column-gap: 12px;
		row-gap: 6px;
		padding: 12px;
		align-items: start;
	}

	body.stf-cart .woocommerce .shop_table.cart tr.cart_item:hover {
		transform: none;
		box-shadow: none;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-thumbnail {
		width: 88px;
		height: 88px;
		border-radius: 12px;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-thumbnail img {
		padding: 4px;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-name {
		align-self: start;
		font-size: 16px;
		line-height: 20px;
		padding-right: 4px;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-price {
		font-size: 13px;
		line-height: 18px;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-quantity {
		align-self: center;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-quantity div.quantity {
		height: 40px;
		width: fit-content;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-quantity div.quantity .plusminus {
		width: 36px;
		height: 40px;
		font-size: 18px;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-quantity div.quantity input.qty {
		width: 36px;
		height: 40px;
		font-size: 15px;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-subtotal {
		align-self: center;
		font-size: 18px;
		line-height: 22px;
		min-width: 0;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-remove {
		align-self: start;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-remove a.remove {
		width: 36px;
		height: 36px;
		border-radius: 12px;
	}

	body.stf-cart .woocommerce .shop_table.cart .cart_item td.product-remove a.remove::before {
		border-radius: 12px;
	}

	/* Купон и «Очистить корзину» на всю ширину. */
	body.stf-cart .woocommerce .shop_table.cart td.actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 16px;
	}

	body.stf-cart .woocommerce .shop_table.cart td.actions .coupon {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	body.stf-cart .woocommerce .shop_table.cart td.actions .coupon input#coupon_code {
		width: 100%;
		height: 48px;
		padding: 0 16px;
	}

	body.stf-cart .woocommerce .shop_table.cart td.actions .coupon button.button[name="apply_coupon"] {
		width: 100%;
		height: 48px;
	}

	body.stf-cart .woocommerce a.stf-cart-clear {
		margin-left: 0;
		text-align: center;
	}

	/* Сводка и преимущества. */
	body.stf-cart .woocommerce .cart-collaterals .cart_totals {
		padding: 20px 16px;
		gap: 16px;
	}

	body.stf-cart.woocommerce-cart .cart-collaterals .cart_totals .shop_table tr.order-total {
		padding-top: 14px;
	}

	body.stf-cart.woocommerce-cart .cart-collaterals .cart_totals .shop_table tr.order-total td,
	body.stf-cart.woocommerce-cart .cart-collaterals .cart_totals .shop_table tr.order-total td strong,
	body.stf-cart.woocommerce-cart .cart-collaterals .cart_totals .shop_table tr.order-total td .amount {
		font-size: 24px;
		line-height: 28px;
	}

	body.stf-cart .stf-cart-pay {
		gap: 8px 12px;
	}

	body.stf-cart .stf-cart-pay img {
		height: 18px;
	}

	body.stf-cart .stf-cart-pay__yoo {
		font-size: 14px;
	}

	body.stf-cart .stf-cart-pay__yoo i {
		width: 18px;
		height: 18px;
		font-size: 11px;
	}

	body.stf-cart .stf-cart-perks {
		padding: 16px;
		gap: 12px;
	}

	body.stf-cart-empty .woocommerce .cart-empty.woocommerce-info {
		padding: 24px 20px 16px;
		font-size: 18px;
		line-height: 24px;
	}

	body.stf-cart-empty .woocommerce p.return-to-shop {
		padding: 0 20px 24px;
	}

	body.stf-cart .woocommerce .return-to-shop a.button {
		width: 100%;
	}

	/* ------------------------ оформление заказа ---------------------- */

	body.woocommerce-checkout #main-wrapper {
		padding-top: 95px;
	}

	.woocommerce-checkout .stfco__grid {
		gap: 12px;
	}

	/* repeat(12, 1fr) даёт колонкам минимум по содержимому: длинный
	   placeholder поля «Район» раздувал сетку, поля торчали из карточки. */
	.woocommerce-checkout .stfco-row {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.woocommerce-checkout .stfco-row > .form-row,
	.woocommerce-checkout .stfco-row > .form-row .woocommerce-input-wrapper {
		min-width: 0;
	}

	.woocommerce-checkout .stfco-row > .form-row input.input-text,
	.woocommerce-checkout .stfco-row > .form-row select,
	.woocommerce-checkout .stfco-row > .form-row textarea {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.woocommerce-checkout .stfco-card {
		padding: 16px;
		border-radius: 16px;
	}

	.woocommerce-checkout .stfco-card__title {
		font-size: 18px;
		line-height: 24px;
	}

	.woocommerce-checkout .stfco .order-review-container,
	.woocommerce-checkout .stfco__aside .stfco-card {
		padding: 16px;
	}

	.woocommerce-checkout .stfco #place_order,
	.woocommerce-checkout .stfco button#place_order {
		width: 100%;
	}
}