/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 10 2026 | 15:38:38 */
/* =====================================================================
   Карточка товара: артикул, заголовок, таблица вариаций / исполнения
   (сниппет 013), цена.
   (08.10.2026, сведено из записей «Карточка товара», части Tables и Text.)
   ===================================================================== */

/* ===== Таблица вариаций / исполнения ===== */
table.prod_attr_table {
	border: 1px solid white;
}
table.prod_attr_table td {
	vertical-align: middle;
}
table.prod_attr_table a.image {
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
	border: 1px solid white;
}
table.prod_attr_table a img {
	transition: transform 0.3s ease;
	display: block;
}
table.prod_attr_table a:hover img {
	transform: scale(1.1);
}

/* ===== Таблица вариаций на телефоне — лента фотографий (все темы) =====
   Была шире экрана (фотографии + название в строку). Теперь фотографии
   строки — лента, которую листают пальцем (scroll-snap); название прижато к
   правому краю (sticky) и закрывает остальные фото; если фото несколько —
   поверх стрелки (ставит site-js.js). Одна фотография — без ленты.
   Сделано 10.10.2026 для темы 'landing', затем тёмной; с вечера 10.10.2026 —
   общее правило для всех тем. Цвета — переменные: здесь значения тёмной
   темы, theme-landing / theme-light задают свои:
     --sk-var-odd / --sk-var-even — фон названия в нечётных / чётных строках
                                    (= цвет строки таблицы);
     --sk-var-nav-bg / -fg / -line / -shadow — стрелки. */
@media (max-width: 767px) {
	table.prod_attr_table {
		--sk-var-odd: black;
		--sk-var-even: #5b5b5b;
		--sk-var-nav-bg: rgba(0, 0, 0, .75);
		--sk-var-nav-fg: white;
		--sk-var-nav-line: rgba(255, 255, 255, .6);
		--sk-var-nav-shadow: 0 2px 8px rgba(0, 0, 0, .5);
	}
	table.prod_attr_table,
	table.prod_attr_table tbody {
		display: block;
		width: 100%;
	}
	table.prod_attr_table tr {
		--sk-var-bg: var(--sk-var-odd);
		display: flex;
		align-items: stretch;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	table.prod_attr_table tr:nth-child(2n) {
		--sk-var-bg: var(--sk-var-even);
	}
	table.prod_attr_table tr::-webkit-scrollbar {
		display: none;
	}
	#page table.prod_attr_table td.empty-td {
		display: none;
	}
	#page table.prod_attr_table td.variation-image {
		flex: 0 0 auto;
		width: auto;
		padding: 8px 6px 8px 10px;
		scroll-snap-align: start;
		display: flex;
		align-items: center;
	}
	#page table.prod_attr_table td.variation-image img {
		max-height: 200px;
		width: auto;
		max-width: none;
	}
	/* название (у простого товара — ячейка без класса) */
	#page table.prod_attr_table td:not(.variation-image):not(.empty-td) {
		flex: 0 0 45%;
		position: sticky;
		right: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 8px 10px 8px 12px;
		background: var(--sk-var-bg);
	}
	#page table.prod_attr_table tr:not(:has(td.variation-image)) td:not(.empty-td) {
		flex-basis: 100%;
	}
	/* стрелки поверх фото: лежат в ячейке названия (она sticky — от неё и
	   считаются), «вперёд» — у правого края фото, «назад» — у левого */
	#page table.prod_attr_table button.sk-var-nav {
		position: absolute;
		top: 50%;
		translate: 0 -50%;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 1px solid var(--sk-var-nav-line);
		border-radius: 50%;
		background: var(--sk-var-nav-bg);
		color: var(--sk-var-nav-fg);
		box-shadow: var(--sk-var-nav-shadow);
		cursor: pointer;
	}
	#page table.prod_attr_table button.sk-var-nav[hidden] {
		display: none;
	}
	#page table.prod_attr_table button.sk-var-nav--next {
		left: -44px;
	}
	#page table.prod_attr_table button.sk-var-nav--prev {
		left: calc(18px - var(--sk-var-slot, 150px));
	}
	/* без подсветки строки: на телефоне после касания «наведение» залипает */
	#page .content-area table.prod_attr_table tbody tr:hover {
		background-color: transparent;
	}
}
/* Узкий телефон: под фотографии — одно место шириной --sk-var-slot (150 px),
   название — вся остальная ширина; каждая следующая фотография при
   пролистывании встаёт ровно на это место. Шире (560–767 px) две фотографии
   и название помещаются в строку и так. */
@media (max-width: 559px) {
	table.prod_attr_table {
		--sk-var-slot: 150px;
	}
	#page table.prod_attr_table td.variation-image {
		flex: 0 0 var(--sk-var-slot);
		justify-content: center;
	}
	#page table.prod_attr_table td.variation-image img {
		max-width: 100%;
		height: auto;
		max-height: 220px;
	}
	#page table.prod_attr_table td:not(.variation-image):not(.empty-td) {
		flex-basis: calc(100% - var(--sk-var-slot));
	}
}

/* ===== Артикул и заголовок ===== */
.woocommerce .prod-art {
	display: block;
}
@media (orientation: landscape) and (max-width: 1024px) {
	#content h1.product_title {
		margin-top: 0;
		margin-bottom: 0.5em;
	}
	.prod-art {
		margin-top: 0.5em;
		display: block;
	}
}
@media (orientation: portrait) and (max-width: 1024px) {
	#content h1.product_title {
		margin-top: 0;
		margin-bottom: 0.5em;
	}
	.prod-art {
		margin-top: 0.5em;
		display: block;
	}
}

/* Пустые ячейки, которыми выравниваются строки таблицы вариаций */
td.empty-td {
	padding: 0 !important;
}

.prod_attr_table {
	border-radius: 2px;
}

/* Основной блок карточки — на всю ширину */
body.single-product div.product .summary {
	width: 100%;
	float: none;
	overflow: auto;
}
body.single-product .widget-area .widget_product_categories {
	display: block;
}
body.single-product .prod-art {
	font-size: 1.5em;
	color: gray;
}

td.variation-image {
	width: 5%;
}
td.variation-image img {
	max-width: none;
	max-height: 200px;
	width: auto;
}

.single-product div.product p.price {
	margin: 0;
}

@media (max-width: 768px) {
	.single-product div.product .summary {
		margin-bottom: 0 !important;
	}
}