/*
 * М7. Карточка товара.
 *
 * Задача — уместить первый экран в 390×844 без прокрутки: изображение,
 * наименование, цена, переключатель носителей, срок доставки, условие
 * бесплатной доставки и кнопка покупки.
 *
 * Палитра проекта: #FFFBEE, #FFB5E4, #E79BCB, #2D2D2D.
 */

:root {
	--printort-bg: #FFFBEE;
	--printort-accent: #FFB5E4;
	--printort-accent-dark: #E79BCB;
	--printort-ink: #2D2D2D;
}

/* --- Переключатель носителей --- */

.printort-bases {
	margin: 12px 0 16px;
}

.printort-bases__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--printort-ink);
	margin-bottom: 8px;
}

.printort-bases__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.printort-bases__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.printort-bases__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 96px;
	padding: 8px 10px;
	border: 1px solid #E6E0D2;
	border-radius: 10px;
	background: #fff;
	color: var(--printort-ink);
	text-decoration: none;
	line-height: 1.25;
	transition: border-color .15s ease, background-color .15s ease;
}

a.printort-bases__link:hover,
a.printort-bases__link:focus-visible {
	border-color: var(--printort-accent-dark);
	background: var(--printort-bg);
}

/* Текущий носитель — состояние, а не ссылка: выделен и некликабелен. */
.printort-bases__item.is-current .printort-bases__link {
	border-color: var(--printort-accent-dark);
	background: var(--printort-accent);
	cursor: default;
	font-weight: 600;
}

/* Отсутствующие в наличии показываем, но приглушаем. */
.printort-bases__item.is-out .printort-bases__link {
	opacity: .55;
}

.printort-bases__name {
	font-size: 13px;
}

.printort-bases__price {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.printort-bases__note {
	font-size: 11px;
	color: #8A8A8A;
}

/* --- Доставка --- */

.printort-delivery,
.printort-freeship {
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--printort-ink);
}

.printort-freeship {
	color: #2E7D32;
	font-weight: 600;
}

/* --- Первый экран на мобильном --- */

@media (max-width: 767px) {
	/*
	 * Бюджет первого экрана на 390×844: шапка и хлебные крошки съедают ~187 px,
	 * остаётся ~657 px на изображение, наименование, цену, доставку,
	 * переключатель и кнопку. Отсюда все ограничения ниже — они не про красоту,
	 * а про то, чтобы кнопка покупки была видна без прокрутки.
	 */

	/* Изображение: пропорции сохраняются, обрезки нет. */
	.single-product .woocommerce-product-gallery img {
		max-height: 34vh;
		width: auto;
		margin: 0 auto;
		object-fit: contain;
	}

	.single-product .woocommerce-product-gallery {
		margin-bottom: 8px;
	}

	.single-product .product_title {
		font-size: 18px;
		line-height: 1.25;
		margin-bottom: 4px;
	}

	.single-product .summary .price {
		font-size: 22px;
		margin-bottom: 6px;
	}

	.printort-delivery,
	.printort-freeship {
		font-size: 13px;
		margin-bottom: 2px;
	}

	/*
	 * Переключатель в одну строку с горизонтальной прокруткой.
	 * В три ряда пять носителей занимали 190 px и выталкивали кнопку покупки
	 * под сгиб; полоса прокрутки — 60 px и все варианты остаются доступны.
	 */
	.printort-bases {
		margin: 8px 0 10px;
	}

	.printort-bases__label {
		margin-bottom: 6px;
	}

	.printort-bases__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		gap: 6px;
	}

	.printort-bases__list::-webkit-scrollbar {
		height: 3px;
	}

	.printort-bases__list::-webkit-scrollbar-thumb {
		background: var(--printort-accent-dark);
		border-radius: 2px;
	}

	.printort-bases__item {
		scroll-snap-align: start;
		flex: 0 0 auto;
	}

	.printort-bases__link {
		min-width: 0;
		max-width: 132px;
		padding: 6px 9px;
	}

	.printort-bases__name {
		font-size: 12px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.printort-bases__price {
		font-size: 12px;
	}

	/* Кнопка покупки должна быть заметной и попадать пальцем. */
	.single-product .single_add_to_cart_button {
		width: 100%;
		min-height: 48px;
	}

	/*
	 * Количество рядом с кнопкой, а не над ней — экономит строку.
	 *
	 * Переключатель выводится хуком `woocommerce_before_add_to_cart_button`,
	 * то есть лежит внутри той же формы. Без flex-basis: 100 % он встаёт в один
	 * ряд с кнопкой и накладывается на неё, поэтому строка ниже обязательна.
	 */
	.single-product form.cart {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}

	.single-product form.cart > .printort-bases {
		flex: 0 0 100%;
		min-width: 0;
	}

	.single-product form.cart .quantity {
		flex: 0 0 auto;
		margin: 0;
	}

	.single-product form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		width: auto;
	}
}