.krep-fastener-helper {
	width: 100%;
}

.krep-fastener-helper__table-wrap {
	overflow-x: auto;
}

.krep-fastener-helper__table {
	table-layout: fixed;
	min-width: 1180px;
	margin-bottom: 0;
}

.krep-fastener-helper__col-type {
	width: 135px;
}

.krep-fastener-helper__col-standard {
	width: 155px;
}

.krep-fastener-helper__col-diameter,
.krep-fastener-helper__col-length {
	width: 130px;
}

.krep-fastener-helper__col-cover {
	width: 145px;
}

.krep-fastener-helper__col-strength {
	width: 155px;
}

.krep-fastener-helper__col-count,
.krep-fastener-helper__col-weight {
	width: 160px;
}

.krep-fastener-helper__col-action {
	width: 48px;
}

.krep-fastener-helper__table th,
.krep-fastener-helper__table td {
	padding: 14px 12px;
	vertical-align: middle;
	white-space: nowrap;
}

.krep-fastener-helper__table th {
	font-weight: 600;
	font-size: 14px;
	text-transform: none;
}

.krep-fastener-helper__table :is(select, input) {
	margin-bottom: 0;
}

.krep-fastener-helper__table th:last-child,
.krep-fastener-helper__table td:last-child {
	width: 48px;
	text-align: center;
}

.krep-fastener-helper__table tfoot td {
	padding-top: 16px;
}

.krep-fastener-helper__total-label {
	text-align: right;
	font-weight: 600;
}

.krep-fastener-helper [data-ui-component="fastener-calculator-add-row"],
.krep-fastener-helper [data-ui-component="fastener-calculator-remove-row"] {
	min-width: 34px;
	padding-right: 0;
	padding-left: 0;
}

@media (max-width: 1024px) {
	.krep-fastener-helper__table {
		min-width: 1080px;
	}

	.krep-fastener-helper__table th,
	.krep-fastener-helper__table td {
		padding: 10px 8px;
	}
}

@media (max-width: 767px) {
	.krep-fastener-helper__table-wrap {
		overflow-x: visible;
	}

	.krep-fastener-helper__table,
	.krep-fastener-helper__table tbody,
	.krep-fastener-helper__table tfoot,
	.krep-fastener-helper__table tr,
	.krep-fastener-helper__table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.krep-fastener-helper__table {
		table-layout: auto;
		border: 0;
	}

	.krep-fastener-helper__table colgroup,
	.krep-fastener-helper__table thead {
		display: none;
	}

	.krep-fastener-helper__table tbody tr {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 12px;
		padding: 14px 48px 14px 0;
		border-bottom: 1px solid var(--brdcolor-gray-300);
	}

	.krep-fastener-helper__table tbody tr:last-child {
		border-bottom: 0;
	}

	.krep-fastener-helper__table tbody td,
	.krep-fastener-helper__table tfoot td {
		padding: 0;
		white-space: normal;
		text-align: start;
		border: 0;
	}

	.krep-fastener-helper__table tbody td::before,
	.krep-fastener-helper__table tfoot td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 6px;
		color: var(--color-gray-800);
		font-weight: 600;
		font-size: 12px;
		line-height: 1.2;
	}

	.krep-fastener-helper__table tbody td[data-label="Тип покрытия"],
	.krep-fastener-helper__table tbody td[data-label="Класс прочности"] {
		grid-column: 1 / -1;
	}

	.krep-fastener-helper__table tbody td:last-child {
		position: absolute;
		right: 0;
		bottom: 14px;
		grid-column: auto;
		display: flex;
		justify-content: flex-end;
		width: 36px;
		text-align: end;
	}

	.krep-fastener-helper__table tbody td:last-child::before,
	.krep-fastener-helper__table tfoot td:not([data-label])::before {
		content: none;
	}

	.krep-fastener-helper__table tfoot tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 12px;
		margin-top: 4px;
		padding-top: 14px;
		border-top: 1px solid var(--brdcolor-gray-300);
	}

	.krep-fastener-helper__table tfoot .krep-fastener-helper__total-label {
		grid-column: 1 / -1;
		padding-bottom: 2px;
		font-size: 16px;
		text-align: start;
	}

	.krep-fastener-helper__table tfoot td:last-child {
		display: none;
	}

	.krep-fastener-helper [data-ui-component="fastener-calculator-add-row"],
	.krep-fastener-helper [data-ui-component="fastener-calculator-remove-row"] {
		min-width: 34px;
		height: 42px;
	}
}

@media (max-width: 420px) {
	.krep-fastener-helper__table tbody tr,
	.krep-fastener-helper__table tfoot tr {
		grid-template-columns: 1fr;
	}

	.krep-fastener-helper__table tbody tr {
		padding-right: 0;
		padding-bottom: 62px;
	}

	.krep-fastener-helper__table tbody td:last-child {
		width: 100%;
	}
}