/* SN Frame Mats - size chart ([sn_frame_size_chart]) */

.sn-size-chart {
	margin: 0;
	padding-right: 20px;
	font-family: inherit;
	font-weight: 300;
	color: inherit;
}

.sn-size-chart__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sn-size-chart table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.1;
}

.sn-size-chart th,
.sn-size-chart td {
	text-align: left;
	padding: 10px 40px 10px 0;
	border-bottom: 1px solid rgba(15, 15, 15, 0.12);
	white-space: nowrap;
	font-size: 13px;
	font-weight: 300;
}

.sn-size-chart thead th {
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.75;
	border-bottom-width: 1.5px;
}

.sn-size-chart tbody tr:last-child td {
	border-bottom: none;
}

.sn-size-chart th:last-child,
.sn-size-chart td:last-child {
	padding-right: 0;
}

.sn-size-chart__note {
	margin: 14px 0 0;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	opacity: 0.7;
	white-space: normal;
}

/* Stacked cards on narrow screens */
@media (max-width: 600px) {
	.sn-size-chart table,
	.sn-size-chart thead,
	.sn-size-chart tbody,
	.sn-size-chart tr,
	.sn-size-chart th,
	.sn-size-chart td {
		display: block;
	}

	.sn-size-chart thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.sn-size-chart tr {
		padding: 10px 0;
		border-bottom: 1.5px solid rgba(15, 15, 15, 0.15);
	}

	.sn-size-chart tbody tr:last-child {
		border-bottom: none;
	}

	.sn-size-chart td {
		border: none;
		padding: 3px 0;
		white-space: normal;
		display: flex;
		justify-content: space-between;
		gap: 1.5em;
	}

	.sn-size-chart td::before {
		content: attr(data-label);
		font-size: 13px;
		font-weight: 300;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		opacity: 0.6;
		flex: 0 0 auto;
	}
}