/*
 * The size table, built by the [tabla_tallas] shortcode and by the size-guide
 * block. It lives in its own sheet because two pages need it — the product
 * page's modal and the size-guide page — and neither should have to pull the
 * whole of the other's stylesheet to get it.
 *
 * The table remains a table at every viewport. On phones it becomes denser,
 * instead of switching to cards or requiring horizontal scrolling, so each
 * measurement stays comparable at a glance.
 */
.ps-size-table-wrap {
	margin: 0 0 var(--ps-space-5);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ps-size-table {
	--ps-size-table-row: #faf9fa;
	--ps-size-table-row-alt: #f5f3f4;
	--ps-size-table-row-hover: #ebe8ea;
	width: 100%;
	/*
	 * Fixed at every width, not just on phones. Under the automatic algorithm a
	 * column is as wide as its widest cell, so «36 2/3» claims more room than
	 * «36» and every column after it starts further along: two tables of the
	 * same shape, shown one behind the other in the guide's tabs, refuse to line
	 * up and the whole grid appears to shift as you switch brand. Fixed splits
	 * the width evenly and makes the shift impossible.
	 */
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.ps-size-table :is(th, td) {
	padding: var(--ps-space-3) var(--ps-space-4);
	text-align: center;
	vertical-align: middle;
}

/*
 * The brand navy, not another shade of the rows. The head used to sit on
 * --ps-color-surface-subtle, two points away from the striped rows underneath,
 * so on a table of numbers it read as one more row rather than as the line that
 * names the columns.
 */
.ps-size-table thead th {
	background: var(--ps-color-brand-700);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The size names its row the way a heading names its column. */
.ps-size-table tbody th[scope='row'] {
	color: var(--ps-color-ink);
	font-weight: 800;
	white-space: nowrap;
}

.ps-size-table tbody td {
	color: var(--ps-color-text);
	font-variant-numeric: tabular-nums;
}

.ps-size-table tbody tr :is(th, td) {
	background: var(--ps-size-table-row);
}

/* Reading a row is easier when the eye has a rail to follow. */
.ps-size-table tbody tr:nth-child(even) :is(th, td) {
	background: var(--ps-size-table-row-alt);
}

.ps-size-table tbody tr :is(th, td) {
	transition: background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.ps-size-table tbody tr:hover :is(th, td) {
		background: var(--ps-size-table-row-hover);
	}
}

/*
 * The same rail for a finger, which cannot hover: assets/js/size-table.js marks
 * the tapped row and the mark stays while the row is read across.
 */
@media (hover: none), (pointer: coarse) {
	.ps-size-table tbody tr.is-marked :is(th, td) {
		background: var(--ps-size-table-row-hover);
	}

	/*
	 * `cursor: pointer` is not decoration here. iOS Safari only dispatches a
	 * click from an element it reads as interactive, and a bare <tr> is not
	 * one: a listener delegated on the document never hears the tap. Declaring
	 * the row clickable is what makes it heard, and it costs nothing on a
	 * screen with no cursor to show.
	 */
	.ps-size-table tbody tr {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
}

/* Tablet: the column is wider than a phone's and the type can follow it up. */
@media (min-width: 641px) and (max-width: 1199px) {
	.ps-size-table {
		font-size: 16px;
	}

	.ps-size-table thead th {
		font-size: 14px;
	}
}

@media (max-width: 1199px) {
	.ps-size-table tbody th[scope='row'] {
		padding-inline-start: var(--ps-space-4);
	}
}

@media (max-width: 640px) {
	.ps-size-table-wrap {
		overflow: hidden;
	}

	/*
	 * Four columns of short numbers. Shrinking them to 11px bought width the
	 * table did not need — «36 2/3», the longest thing in it, still leaves room
	 * at 13px — and cost the reader the only thing the table is for.
	 */
	.ps-size-table {
		font-size: 13px;
		line-height: 1.35;
	}

	.ps-size-table :is(th, td) {
		padding: 10px 4px;
		word-break: normal;
		overflow-wrap: anywhere;
	}

	.ps-size-table :is(th, td):first-child {
		width: 18%;
		padding-right: 4px;
		padding-left: 4px;
	}

	.ps-size-table :is(th, td):nth-child(2),
	.ps-size-table :is(th, td):nth-child(3) {
		width: 16%;
	}

	.ps-size-table :is(th, td):nth-child(4) {
		width: 25%;
	}

	.ps-size-table :is(th, td):nth-child(5) {
		width: 25%;
	}

	/*
	 * Four short words — EUR, US, UK, CM — do not need shrinking the way the
	 * numbers below them do. At 9px they were the smallest thing on the page
	 * and the hardest to read of the only four words in it.
	 */
	.ps-size-table thead th {
		font-size: 13px;
		letter-spacing: .04em;
		white-space: normal;
	}

	.ps-size-table thead th:first-child {
		font-size: 13px;
		white-space: nowrap;
	}

	.ps-size-table tbody th[scope='row'] {
		padding-inline: 4px;
		font-size: 13px;
	}
}