/* ===========================================================================
   STROM 17.08.2026 — калькулятор площади на карточке товара.
   Handle: strom-product-calc (deps: child-style, strom-product-card — оттуда токены
   --pd-*). Грузится только там, где секция печатается
   (inc/strom-product-calc.php: цена за м² + известная площадь поддона).

   Регистр секции намеренно ДРУГОЙ, чем у соседей: выше и ниже — белые панели с прозой и
   таблицей, здесь — светло-зелёный лист с ведомостью ввода слева и схемой объёма справа.
   Ничего не затемняем (требование заказчика): панель светлее страницы, не темнее.

   Разметка — в inc/strom-product-calc.php, числа считает assets/js/product-calc.js.
   =========================================================================== */

.strom-calc {
	--calc-ground: #eef3ef;
	--calc-area: rgba(14, 126, 80, .20);
	--calc-reserve: rgba(14, 126, 80, .38);
	--calc-fill: rgba(35, 38, 36, .10);
	margin: 40px 0 60px;
	/* Тот же отступ якоря от липкой шапки, что у блока схем укладки (60px строка + 30 воздуха). */
	scroll-margin-top: 90px;
}

.strom-calc__inner {
	padding: 30px 32px 32px;
	border-radius: 10px;
	background: var(--calc-ground);
}

/* --- 1. Шапка секции ----------------------------------------------------------- */

.strom-calc__head {
	max-width: 62ch;
	margin-bottom: 26px;
}

.strom-calc__eyebrow {
	margin: 0 0 8px;
	color: var(--pd-green);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Счёт 0,2,0: тема красит h2 своим --wd-title-color правилом на тег. */
.strom-calc .strom-calc__title {
	margin: 0 0 10px;
	color: var(--pd-ink);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.strom-calc__lead {
	margin: 0;
	color: var(--pd-sub);
	font-size: 14.5px;
	line-height: 1.55;
}

/* --- 2. Композиция ------------------------------------------------------------- */

.strom-calc__grid {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: 30px 40px;
}

.strom-calc__buy {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.strom-calc__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.strom-calc__inner {
		padding: 24px 18px 26px;
	}
}

/* --- 3. Ведомость ввода -------------------------------------------------------- */

.strom-calc__sheet {
	padding: 20px;
	border: 1px solid var(--pd-line);
	border-radius: 8px;
	background: #fff;
}

.strom-calc__label {
	display: block;
	margin-bottom: 7px;
	color: var(--pd-muted);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.2;
	text-transform: uppercase;
}

.strom-calc__control {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	border: 1px solid var(--pd-line);
	border-radius: 6px;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.strom-calc__control:focus-within {
	border-color: var(--pd-green);
	box-shadow: 0 0 0 3px rgba(14, 126, 80, .12);
}

/* Счёт 0,2,0 — тема задаёт поля правилами на тег (input[type="text"]). */
.strom-calc .strom-calc__num {
	width: 100%;
	min-width: 0;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--pd-ink);
	font-variant-numeric: tabular-nums;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-align: left;
}

.strom-calc .strom-calc__num:focus {
	border: 0;
	box-shadow: none;
	outline: none;
}

.strom-calc__dim {
	flex: 0 0 auto;
	color: var(--pd-muted);
	font-size: 13px;
	font-weight: 500;
}

.strom-calc__control--step {
	padding: 0 6px;
}

.strom-calc__control--step .strom-calc__num {
	text-align: center;
}

/* Счёт 0,2,0 — у темы свои правила на button. */
.strom-calc .strom-calc__step {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--pd-line);
	border-radius: 5px;
	background: #fff;
	color: var(--pd-sub);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.strom-calc .strom-calc__step:hover {
	border-color: var(--pd-green);
	color: var(--pd-green);
}

/* Связка полей — знак равенства на размерной линии: показывает, что поля одно и то же
   количество в двух единицах, а не два независимых ввода. */
.strom-calc__tie {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0;
}

.strom-calc__tie-line {
	flex: 1 1 auto;
	height: 1px;
	background: var(--pd-line);
}

.strom-calc__tie-mark {
	color: var(--pd-muted);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
}

.strom-calc__hint {
	margin: 6px 0 0;
	color: var(--pd-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Выбор раскладки = выбор запаса на подрез. Сетка 2×2, а не строка: подписи текстовые
   («ёлочка, диагональ»), в одну строку они не читаются даже на десктопе. */
.strom-calc__waste {
	margin-top: 20px;
}

.strom-calc__waste-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

/* Счёт 0,2,0 — у темы свои правила на button. */
.strom-calc .strom-calc__waste-btn {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 11px;
	border: 1px solid var(--pd-line);
	border-radius: 6px;
	background: #fff;
	color: var(--pd-sub);
	font-size: 12.5px;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.strom-calc .strom-calc__waste-btn:hover {
	border-color: rgba(14, 126, 80, .45);
	color: var(--pd-ink);
}

.strom-calc .strom-calc__waste-btn.is-active {
	border-color: var(--pd-green);
	background: rgba(14, 126, 80, .07);
	color: var(--pd-ink);
}

.strom-calc__waste-pct {
	color: var(--pd-green);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.strom-calc .strom-calc__waste-btn:not(.is-active) .strom-calc__waste-pct {
	color: var(--pd-muted);
}

.strom-calc__note {
	margin: 7px 0 0;
	color: var(--pd-muted);
	font-size: 12px;
	line-height: 1.45;
}

.strom-calc .strom-calc__reset {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid rgba(35, 38, 36, .25);
	background: none;
	color: var(--pd-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	line-height: 1.3;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}

.strom-calc .strom-calc__reset:hover {
	border-bottom-color: var(--pd-ink);
	color: var(--pd-ink);
}

/* --- 4. Схема объёма ---------------------------------------------------------- */

.strom-calc__bar-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.strom-calc__bar-title {
	color: var(--pd-muted);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.strom-calc__bar-total {
	color: var(--pd-ink);
	font-size: 14px;
	font-weight: 500;
}

.strom-calc__bar-total [data-calc] {
	font-variant-numeric: tabular-nums;
	font-size: 17px;
	letter-spacing: -.02em;
}

/* Полоса: три сегмента с размерными выносками. Ширины — flex-grow из JS (доли от
   «к оплате»), поэтому базис нулевой, а min-width:0 держит узкие сегменты от распирания. */
.strom-calc__bar {
	position: relative;
	display: flex;
	align-items: stretch;
	height: 64px;
	border-bottom: 1px solid var(--pd-line);
}

.strom-calc__seg {
	position: relative;
	flex: 0 1 0;
	min-width: 0;
	overflow: hidden;
	transition: flex-grow .2s ease;
}

/* Засечка на границе сегментов — как на размерной линии чертежа. */
.strom-calc__seg + .strom-calc__seg::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: rgba(35, 38, 36, .28);
}

.strom-calc__seg--area {
	background: var(--calc-area);
}

/* Запас — штриховка (это «не купленная площадь», а материальный запас). */
.strom-calc__seg--reserve {
	background:
		repeating-linear-gradient(45deg,
			var(--calc-reserve) 0 2px,
			transparent 2px 6px),
		rgba(14, 126, 80, .07);
}

/* Добор до поддона — самая светлая зона: она возникает не из потребности, а из отпуска. */
.strom-calc__seg--fill {
	background:
		repeating-linear-gradient(90deg,
			rgba(35, 38, 36, .22) 0 1px,
			transparent 1px 7px),
		rgba(35, 38, 36, .04);
}

.strom-calc__seg.is-empty {
	flex-grow: 0;
}

.strom-calc__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

/* Число в легенде — моно, чернилами: подпись объясняет, число отвечает. */
.strom-calc .strom-calc__legend b {
	color: var(--pd-ink);
	font-variant-numeric: tabular-nums;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: -.02em;
	white-space: nowrap;
}

/* Тема даёт li{margin-bottom:10px} — гасим (та же грабля, что на страницах услуг). */
.strom-calc .strom-calc__legend li {
	margin: 0;
	padding-left: 16px;
	position: relative;
	color: var(--pd-muted);
	font-size: 12px;
	line-height: 1.3;
}

.strom-calc .strom-calc__legend li::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

.strom-calc__legend-item--area::before {
	background: var(--calc-area);
}

.strom-calc__legend-item--reserve::before {
	background:
		repeating-linear-gradient(45deg,
			var(--calc-reserve) 0 2px,
			transparent 2px 5px),
		rgba(14, 126, 80, .07);
}

.strom-calc__legend-item--fill::before {
	background:
		repeating-linear-gradient(90deg,
			rgba(35, 38, 36, .22) 0 1px,
			transparent 1px 4px),
		rgba(35, 38, 36, .06);
}

/* Штабель поддонов: столько глифов, сколько поддонов (до 12, дальше «+N»). */
.strom-calc__stack {
	position: relative;
	margin-top: 24px;
	padding-top: 18px;
	/* Фоновая надпись крупная и центрирована — обрезаем её по блоку, чтобы она не выходила
	   за светлую панель секции на узких ширинах. */
	overflow: hidden;
	border-top: 1px solid var(--pd-line);
}

/* Фоновая надпись — приём блока бренда на главной (.sh-brand__ghost, assets/css/home.css:490):
   крупные буквы за содержимым, без переносов, не кликается и не выделяется.
   Цвет СЕРЫЙ (0.3 от --pd-muted), а не зелёный: с зелёным нарисованные поддоны сливались с
   подложкой (правка Романа 17.08.2026). По вертикали — по центру штабеля. */
.strom-calc__ghost {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	transform: translate(-50%, -50%);
	color: rgba(14, 126, 80, .04);
	font-size: clamp(5rem, 13vw, 10.5rem);
	font-weight: 700;
	line-height: .8;
	letter-spacing: -.04em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/* min-height держит место под фоновую надпись: она крупная и центрируется по этому блоку,
   иначе при пустом расчёте залезала бы на легенду выше. */
.strom-calc__stack-row {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	min-height: 104px;
}

/* Глиф крупнее фоновой надписи по весу: рядом со словом «РАСЧЁТ» в 120px мелкие поддоны
   читались случайными пятнами. */
.strom-calc__pallet {
	display: block;
	width: 56px;
	height: 51px;
}

/* Грани поддона: верх темнее боков — иначе изометрия читается плоским пятном. */
.strom-calc__pallet-top {
	fill: rgba(14, 126, 80, .55);
}

.strom-calc__pallet-l {
	fill: rgba(14, 126, 80, .3);
}

.strom-calc__pallet-r {
	fill: rgba(14, 126, 80, .18);
}

.strom-calc__pallet-b {
	fill: none;
	stroke: rgba(14, 126, 80, .45);
	stroke-width: 1.6;
}

.strom-calc__stack-more {
	align-self: center;
	color: var(--pd-sub);
	font-variant-numeric: tabular-nums;
	font-size: 15px;
}

/* Пустое состояние: полоса — пунктирная рамка с подсказкой, сегменты не залиты.
   Класс is-filled ставит JS, как только площадь введена. */
.strom-calc:not(.is-filled) .strom-calc__bar {
	border: 1px dashed var(--pd-line);
	border-radius: 6px;
}

.strom-calc:not(.is-filled) .strom-calc__seg {
	background: none;
}

.strom-calc:not(.is-filled) .strom-calc__seg + .strom-calc__seg::after {
	display: none;
}

.strom-calc__bar-hint {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--pd-muted);
	font-size: 13px;
	white-space: nowrap;
}

.strom-calc.is-filled .strom-calc__bar-hint {
	display: none;
}

/* --- 5. Касса ----------------------------------------------------------------- */

.strom-calc__buy {
	padding-top: 4px;
}

.strom-calc__buy-row {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 14px 18px;
	padding: 16px 18px;
	border: 1px solid var(--pd-line);
	border-radius: 8px;
	background: #fff;
}

.strom-calc__buy-row + .strom-calc__buy-row {
	margin-top: 10px;
	background: transparent;
}

.strom-calc__buy-k {
	color: var(--pd-ink);
	font-size: 14px;
	font-weight: 600;
}

.strom-calc__buy-q {
	color: var(--pd-sub);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

.strom-calc__buy-s {
	color: var(--pd-ink);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Кнопки: у поддонов — ведущая зелёная, у метров — обводка (это альтернатива, не дубль). */
.strom-calc .strom-calc__add {
	min-width: 156px;
	padding: 12px 20px;
	border: 1px solid var(--pd-green);
	border-radius: 5px;
	background: var(--pd-green);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}

.strom-calc .strom-calc__add:hover {
	border-color: var(--pd-green-h);
	background: var(--pd-green-h);
}

.strom-calc .strom-calc__buy-row[data-mode="unit"] .strom-calc__add {
	background: transparent;
	color: var(--pd-green);
}

.strom-calc .strom-calc__buy-row[data-mode="unit"] .strom-calc__add:hover {
	background: rgba(14, 126, 80, .08);
	color: var(--pd-green-h);
}

.strom-calc .strom-calc__add:disabled {
	border-color: var(--pd-line);
	background: rgba(35, 38, 36, .06);
	color: var(--pd-muted);
	cursor: default;
}

.strom-calc__buy-note {
	margin: 14px 0 0;
	max-width: 86ch;
	color: var(--pd-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

@media (max-width: 768px) {
	.strom-calc__buy-row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px 12px;
	}

	.strom-calc__buy-k {
		grid-column: 1 / -1;
	}

	.strom-calc__buy-s {
		text-align: left;
	}

	.strom-calc .strom-calc__add {
		grid-column: 1 / -1;
		width: 100%;
	}

	/* iOS зумит поля с кеглем меньше 16px. */
	.strom-calc .strom-calc__num {
		font-size: 20px;
	}
}

/* Спокойный режим: переходы сегментов и кнопок не нужны. */
@media (prefers-reduced-motion: reduce) {
	.strom-calc__seg,
	.strom-calc .strom-calc__add,
	.strom-calc__control {
		transition: none;
	}
}