/* ТЗ-127 ч. 8 (26.09) — компоновка карточки товара. Подключается ПОСЛЕ product.css и usloviya.css и перекрывает
   раскладку сетки .product.

   Было: колонки «галерея | всё остальное»; вкладки стояли в правой колонке, а «Другие марки» и условия места
   в сетке не имели и автоматически падали в левую колонку ПОД галерею — ниже конца описания. Под галереей
   оставалась пустая колонка на всю длину вкладок, условия «висели» внизу, справа от них было пусто.

   Стало: первый экран — две колонки: слева галерея, справа название, наличие, артикул, характеристики, цена,
   количество, «Купить» / «Купить в 1 клик», под кнопками — «Другие марки» и условия (резка, доставка, самовывоз,
   НДС, отсрочка) компактным списком. Ниже — вкладки на всю ширину контейнера. У «Описания» текст читаемой колонкой
   до 800 px, справа — «Нужна консультация?» (только на широком экране). Телефон — одна колонка в порядке разметки:
   название, галерея, покупка, другие марки, условия, вкладки-аккордеон. */

/* ── первый экран: две колонки ── */
/* Промежутки между строками — отступами самих блоков, а не row-gap: «Других марок» у большинства товаров нет, и пустая
   строка сетки с row-gap давала лишнюю дыру между покупкой и условиями. */
@media (min-width: 993px) {
	.product {
		grid-template-columns: 473px minmax(0, 1fr);
		grid-template-rows: auto auto auto auto 1fr auto;
		row-gap: 0;
	}
	.product__img { grid-column: 1; grid-row: 1 / 6; align-self: start; }
	.product__top { grid-column: 2; grid-row: 1; }
	.product__card { grid-column: 2; grid-row: 2; margin-top: 24px; }
	.product > [data-blok="drugie-marki"] { grid-column: 2; grid-row: 3; margin-top: 24px; }
	.product > [data-blok="usloviya"] { grid-column: 2; grid-row: 4; margin-top: 20px; }
	.product__tabs { grid-column: 1 / -1; grid-row: 6; margin-top: 40px; }
}
@media (min-width: 993px) and (max-width: 1600px) {
	.product { grid-template-columns: 400px minmax(0, 1fr); }
}
/* 993–1280: правая колонка узкая и выше галереи — условия встают на всю ширину сразу под первым экраном, чтобы под
   галереей не оставалось пустоты */
@media (min-width: 993px) and (max-width: 1280px) {
	.product__img { grid-row: 1 / 4; }
	.product > [data-blok="usloviya"] { grid-column: 1 / -1; grid-row: 5; margin-top: 24px; }
}

/* планшет: название на всю ширину, галерея | покупка, дальше всё на всю ширину */
@media (min-width: 641px) and (max-width: 992px) {
	.product__top { grid-column: 1 / -1; grid-row: 1; }
	.product__img { grid-column: 1; grid-row: 2; }
	.product__card { grid-column: 2; grid-row: 2; }
	.product > [data-blok="drugie-marki"] { grid-column: 1 / -1; grid-row: 3; }
	.product > [data-blok="usloviya"] { grid-column: 1 / -1; grid-row: 4; }
	.product__tabs { grid-column: 1 / -1; grid-row: 5; }
}

/* телефон: одна колонка — название, галерея, покупка, другие марки, условия, вкладки-аккордеон. Порядок задан явно:
   product.css ставит карточке покупки order:2, и в одной колонке она уезжала под вкладки. */
@media (max-width: 640px) {
	.product__top, .product__img, .product__card, .product > [data-blok="drugie-marki"],
	.product > [data-blok="usloviya"], .product__tabs { grid-column: 1; grid-row: auto; }
	.product__top { order: 1; }
	.product__img { order: 2; }
	.product__card { order: 3; }
	.product > [data-blok="drugie-marki"] { order: 4; }
	.product > [data-blok="usloviya"] { order: 5; }
	.product__tabs { order: 6; }
}

/* «Другие марки» и условия внутри карточки — без полей секции и второго контейнера, заголовок поменьше */
.product > [data-blok="drugie-marki"] { margin-bottom: 0; padding: 0; }
.product > [data-blok="drugie-marki"] > .container { max-width: none; padding: 0; margin: 0; }
.product > [data-blok="drugie-marki"] .h2 { margin: 0 0 12px; font-size: 18px; line-height: 1.3; text-transform: none; }
.product > [data-blok="usloviya"] {
	margin-bottom: 0;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px 20px;
	padding: 16px 18px;
}

/* ── «Описание»: текст колонкой и консультация сбоку ── */
.opisanie { display: block; }
.opisanie__tekst { max-width: 800px; }
.opisanie__konsult { display: none; }
@media (min-width: 1200px) {
	.opisanie {
		display: grid;
		grid-template-columns: minmax(0, 800px) 320px;
		justify-content: space-between;
		gap: 40px;
		align-items: start;
	}
	.opisanie__konsult {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 24px;
		background-color: #f5f5f6;
		border-radius: 12px;
	}
}
.opisanie__konsult .opisanie__konsult-zagolovok { margin: 0; font-weight: 600; font-size: 20px; line-height: 1.3; color: #333; }
.opisanie__konsult .opisanie__konsult-tekst { margin: 0; font-size: 14px; line-height: 1.5; color: #5c6169; }
.opisanie__konsult-tel { font-weight: 600; font-size: 18px; color: #001960; text-decoration: none; }
.opisanie__konsult-tel:hover { text-decoration: underline; }
.opisanie__konsult-knopka { width: 100%; margin-top: 6px; }
.opisanie__konsult { margin: 0; align-self: start; }
.opisanie__konsult > * { margin: 0; }
/* .content * {color:#333} из general.css перекрашивал текст кнопки внутри вкладки */
.content .opisanie__konsult .opisanie__konsult-knopka,
.content .opisanie__konsult .opisanie__konsult-knopka * { color: #fff; }
.content .opisanie__konsult .opisanie__konsult-tel { color: #001960; }
/* консультация короче описания — едет рядом с текстом под липкой шапкой (80 px), а не висит сверху */
@media (min-width: 1200px) { .opisanie__konsult { position: sticky; top: 100px; } }

/* ТЗ-129 ч. 3 (27.09): «Этот размер в других марках стали» — компактная таблица: марка — цена — наличие — «→».
   Ширина по содержимому (не на весь контейнер): четыре коротких столбца растянутыми читались бы хуже. */
.marki-tablica{width:auto;min-width:min(100%,560px);border-collapse:collapse;font-size:15px;line-height:140%;color:#333}
.marki-tablica th{padding:8px 16px 8px 0;font-weight:400;font-size:13px;color:#5f6570;text-align:left;border-bottom:1px solid #e3e5e8}
.marki-tablica td{padding:9px 16px 9px 0;border-bottom:1px solid #eef0f2;white-space:nowrap}
.marki-tablica tbody tr:hover{background-color:#f5f5f6}
.marki-tablica__marka a{font-weight:600;color:#001960;text-decoration:none}
.marki-tablica__marka a:hover{text-decoration:underline}
.marki-tablica__cena{font-weight:600}
.marki-tablica__nalichie{color:#5f6570}
.marki-tablica__nalichie--est{color:#1f7a3a}
.marki-tablica__strelka{padding-right:0;text-align:right}
.marki-tablica__strelka a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:#001960;font-size:18px;text-decoration:none}
.marki-tablica__strelka a:hover{background-color:#001960;color:#fff}
.marki-tablica .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media screen and (max-width:640px){
	.marki-tablica{width:100%;min-width:0;font-size:14px}
	.marki-tablica th,.marki-tablica td{padding-right:10px}
	.marki-tablica__marka{white-space:normal}
}