/* SHOPSTYLE — страница /razmery/ «Таблица размеров» (ТЗ п.11).
   Разметка — Gutenberg (без WPBakery), 4 группы .ss-size (бывшие vc_row):
   .ss-size-intro  — p.ss-size-lead + группа-nav .ss-size-nav (внутри абзац со ссылками-якорями #platya/#verh/#niz/#verhnyaya);
   .ss-size-figure — «Колонки» .ss-size-figure-cols: 1/3 — core/html со схемой svg.ss-size-fig, 2/3 — h2.ss-size-h, список ol.ss-size-how, p.ss-size-note;
   .ss-size-tables — p.ss-size-note.ss-size-placeholder, затем 4× (h2.ss-size-h с якорем + «Таблица» figure.ss-size-table), p.ss-size-note;
   .ss-size-cta    — группа .ss-size-cta-box (p.ss-size-cta-title, p.ss-size-cta-text, «Кнопки» .ss-size-cta-btns → .ss-size-cta-btn)
                     + core/html со скриптом, который проставляет ячейкам data-label из шапки (мобильные карточки).
   Все селекторы с префиксом .wp-block-group.ss-size (специфичность 0,3,0): Woodmart base.css правилом
   :is(.entry-content,.is-layout-flow,…)>*{margin-block:0 var(--wd-block-spacing)} и …>:where(*:last-child){margin-bottom:0}
   (0,2,0) идёт в каскаде ПОЗЖЕ этого файла и перебивает равную специфичность; CSS core-блоков (wp-block-table-inline-css:
   border 1px, padding .5em) тоже печатается после — поэтому (0,2,0) недостаточно.
   Вертикальный ритм как в WPBakery-версии: 35px после каждого бывшего текстового блока, 20px после группы (даёт Woodmart). */

/* группы — BFC: 35px последнего блока входят в высоту группы и не схлопываются с её 20px (у vc_row это делал clearfix) */
.wp-block-group.ss-size { display: flow-root; }

.wp-block-group.ss-size .ss-size-lead {
	max-width: 640px;
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 18px;
}
.wp-block-group.ss-size .ss-size-nav { margin: 0 0 35px; }
.wp-block-group.ss-size .ss-size-nav p {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
}
.wp-block-group.ss-size .ss-size-nav a {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--ss-line);
	padding-bottom: 2px;
}
.wp-block-group.ss-size .ss-size-nav a:hover { border-color: var(--ss-accent); }

.wp-block-group.ss-size .ss-size-h {
	font-size: 18px;
	letter-spacing: 0.14em;
	margin: 0 0 16px;
	padding-top: 8px;
	scroll-margin-top: 100px;
}

/* схема фигуры: колонки 1/3 + 2/3 с полями 15px, как vc_col-sm-4 / vc_col-sm-8 */
.wp-block-group.ss-size .ss-size-figure-cols {
	display: flex;
	gap: 0;
	margin: 0 -15px 35px;
}
.wp-block-group.ss-size .ss-size-figure-cols > .wp-block-column {
	box-sizing: border-box;
	min-width: 0;
	padding: 0 15px;
}
.wp-block-group.ss-size .ss-size-fig {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	margin: 0 auto;
}
.wp-block-group.ss-size .ss-size-fig text { font-family: var(--wd-text-font); }

/* как снять мерку — нумерованный список с терракотовыми номерами, как на схеме.
   Пункт: <strong>название</strong><br>описание; strong — блоком, <br> после него скрыт */
.wp-block-group.ss-size .ss-size-how {
	list-style: none;
	counter-reset: ss;
	margin: 0 0 20px;
	padding: 0;
}
.wp-block-group.ss-size .ss-size-how li {
	counter-increment: ss;
	position: relative;
	padding: 0 0 14px 40px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--ss-line);
	color: var(--color-gray-700, #58524C);
}
.wp-block-group.ss-size .ss-size-how li:last-child { border-bottom: 0; margin-bottom: 0; }
.wp-block-group.ss-size .ss-size-how li::before {
	content: counter(ss);
	position: absolute;
	left: 0;
	top: 1px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ss-accent);
	color: var(--ss-bg);
	font-size: 12px;
	font-weight: 500;
	line-height: 24px;
	text-align: center;
}
.wp-block-group.ss-size .ss-size-how strong {
	display: block;
	color: var(--ss-text);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
	margin-bottom: 3px;
}
.wp-block-group.ss-size .ss-size-how strong + br { display: none; }

.wp-block-group.ss-size .ss-size-note {
	font-size: 13px;
	color: var(--ss-muted);
	line-height: 1.55;
	max-width: 640px;
	margin: 0 0 35px;
}
.wp-block-group.ss-size-figure .ss-size-note { margin-bottom: 0; }
.wp-block-group.ss-size .ss-size-placeholder { color: var(--ss-accent); }

/* таблицы — тонкие горизонтальные линии, без заливки (перебиваем wp-block-table-inline-css и Woodmart) */
.wp-block-group.ss-size .ss-size-table { margin: 0 0 35px; }
.wp-block-group.ss-size .ss-size-table:has(+ .ss-size-note) { margin-bottom: 12px; }
.wp-block-group.ss-size .ss-size-table table {
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	margin: 0;
	border: 0;
}
.wp-block-group.ss-size .ss-size-table thead { border-bottom: 0; }
.wp-block-group.ss-size .ss-size-table th,
.wp-block-group.ss-size .ss-size-table td {
	padding: 11px 14px;
	text-align: center;
	border: 0;
	border-bottom: 1px solid var(--ss-line) !important;
	background: transparent;
	font-size: 14px;
}
.wp-block-group.ss-size .ss-size-table th {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ss-muted);
	border-bottom-color: var(--brdcolor-gray-500) !important;
}
.wp-block-group.ss-size .ss-size-table th:first-child,
.wp-block-group.ss-size .ss-size-table td:first-child { text-align: left; font-weight: 500; }
.wp-block-group.ss-size .ss-size-table tbody tr:hover td { background: rgba(43, 39, 36, 0.04); }

/* CTA внизу */
.wp-block-group.ss-size.ss-size-cta { margin-bottom: 0; }
.wp-block-group.ss-size .ss-size-cta-box {
	border-top: 1px solid var(--ss-line);
	padding: 36px 0 12px;
	margin: 0 0 35px;
	text-align: center;
}
.wp-block-group.ss-size .ss-size-cta-title {
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.wp-block-group.ss-size .ss-size-cta-text {
	max-width: 520px;
	margin: 0 auto 20px;
	color: var(--ss-muted);
	line-height: 1.55;
}
.wp-block-group.ss-size .ss-size-cta-btns { margin: 0; }
/* кнопка — как .btn дочерней темы (style.css «Кнопки»: тонкая рамка, hover-инверсия) */
.wp-block-group.ss-size .ss-size-cta-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	color: var(--ss-text);
	border: 1px solid var(--ss-text);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--wd-text-font);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 26px;
	line-height: 18px;
	transition: background-color .25s, color .25s;
}
.wp-block-group.ss-size .ss-size-cta-btn .wp-block-button__link:hover { background-color: var(--ss-text); color: var(--ss-bg); }

/* 768–781px: core/columns стекует колонки до 782px через !important — держим 1/3 + 2/3, как vc_col-sm */
@media (min-width: 768px) {
	.wp-block-group.ss-size .ss-size-figure-cols { flex-wrap: nowrap !important; }
	.wp-block-group.ss-size .ss-size-figure-cols > .wp-block-column:first-child { flex-basis: 33.333% !important; }
	.wp-block-group.ss-size .ss-size-figure-cols > .wp-block-column:last-child { flex-basis: 66.667% !important; }
}

/* ============ мобайл: строка таблицы → карточка (ТЗ п.11, без бокового скролла) ============ */
@media (max-width: 767.98px) {
	.wp-block-group.ss-size .ss-size-figure-cols { display: block; margin-bottom: 43px; }
	.wp-block-group.ss-size .ss-size-figure-cols > .wp-block-column:first-child { margin-bottom: 43px; }
	.wp-block-group.ss-size .ss-size-fig { max-width: 200px; }
	.wp-block-group.ss-size .ss-size-h { font-size: 16px; }

	.wp-block-group.ss-size .ss-size-table thead { display: none; }
	.wp-block-group.ss-size .ss-size-table table,
	.wp-block-group.ss-size .ss-size-table tbody,
	.wp-block-group.ss-size .ss-size-table tr,
	.wp-block-group.ss-size .ss-size-table td { display: block; width: 100%; }
	.wp-block-group.ss-size .ss-size-table tr {
		border: 1px solid var(--ss-line);
		padding: 10px 14px 6px;
		margin-bottom: 10px;
	}
	.wp-block-group.ss-size .ss-size-table tr:last-child { margin-bottom: 0; }
	.wp-block-group.ss-size .ss-size-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		padding: 5px 0;
		border-bottom: 1px solid var(--brdcolor-gray-200) !important;
		text-align: right;
		font-size: 14px;
	}
	.wp-block-group.ss-size .ss-size-table td:last-child { border-bottom: 0 !important; }
	.wp-block-group.ss-size .ss-size-table td::before {
		content: attr(data-label);
		flex: 1 0 auto;
		text-align: left;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ss-muted);
	}
	/* первая ячейка — заголовок карточки: «XS» крупно */
	.wp-block-group.ss-size .ss-size-table td:first-child {
		display: block;
		text-align: left;
		font-size: 17px;
		font-weight: 500;
		letter-spacing: 0.06em;
		padding-bottom: 8px;
		margin-bottom: 4px;
		border-bottom: 1px solid var(--ss-line) !important;
	}
	.wp-block-group.ss-size .ss-size-table td:first-child::before { display: none; }
	.wp-block-group.ss-size .ss-size-table tbody tr:hover td { background: transparent; }
	.wp-block-group.ss-size .ss-size-cta-box { padding-top: 28px; }
	.wp-block-group.ss-size .ss-size-cta-btn,
	.wp-block-group.ss-size .ss-size-cta-btn .wp-block-button__link { width: 100%; }
}