/**
 * Shipping & Returns: page-templates/shipping.php.
 * From 1280 (2174:657): title card 176px (the cart's); "Countries we ship
 * to" 24px above the table, 60px under it. Table (core Table block): white,
 * line border, radius 20; header row green dark, white 16px semibold, 18px
 * top and bottom; rows 22px, line between them; 32px at the sides; columns
 * 280 / 320 / 260 / 180 / 176 plus the sides. Country and cost semibold,
 * "free above" green; the country has a 24px flag circle (cream placeholder
 * in the frame).
 * Policies (shared, pages/base.css): 24px above, 140px under; mascot
 * (parcel) 756px wide, its top 723px shown, 783px from the content's left
 * edge (497px before its right edge).
 * Below 768 (not designed): each table row is a card, the column headings as
 * labels.
 */

.shipping-countries {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding-bottom: 10px; /* phones (client, 19 Oct 2026) */
}

@media (min-width: 768px) {
	.shipping-countries {
		padding-bottom: clamp(40px, 34.1634px + 1.5564vw, 60px);
	}
}

.shipping-page .wp-block-table {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: 20px;
	background: var(--color-white);
}

.shipping-page .wp-block-table table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	color: var(--color-ink);
	font-size: var(--text-body-m);
	text-align: left;
}

.shipping-page .wp-block-table thead {
	border: 0;
	background: var(--color-green-dark);
	color: var(--color-white);
}

.shipping-page .wp-block-table th,
.shipping-page .wp-block-table td {
	box-sizing: border-box;
	border: 0;
	padding: 22px 16px 22px 0;
	vertical-align: middle;
	line-height: var(--leading-body-m);
	overflow-wrap: anywhere;
}

.shipping-page .wp-block-table th {
	padding-top: 18px;
	padding-bottom: 18px;
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.shipping-page .wp-block-table th:first-child,
.shipping-page .wp-block-table td:first-child {
	padding-left: 32px;
}

.shipping-page .wp-block-table th:last-child,
.shipping-page .wp-block-table td:last-child {
	padding-right: 32px;
}

.shipping-page .wp-block-table th:nth-child(1) {
	width: 24.41%;
}

.shipping-page .wp-block-table th:nth-child(2) {
	width: 25.04%;
}

.shipping-page .wp-block-table th:nth-child(3) {
	width: 20.34%;
}

.shipping-page .wp-block-table th:nth-child(4) {
	width: 14.08%;
}

.shipping-page .wp-block-table tbody tr + tr {
	border-top: 1px solid var(--color-line);
}

.shipping-page .wp-block-table td:nth-child(1),
.shipping-page .wp-block-table td:nth-child(4) {
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.shipping-page .wp-block-table td:nth-child(5) {
	color: var(--color-green);
}

/* Flag placeholder (2174:814): cream circle with a line border. */
.shipping-page .wp-block-table td:first-child::before {
	content: "";
	display: inline-block;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	margin-right: 10px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-cream);
	vertical-align: middle;
}

.shipping-page .wp-block-table figcaption {
	margin: 0;
	padding: 12px 32px;
	color: var(--color-muted);
	font-size: var(--text-body-s);
}

/* Policies (pages/base.css): the parcel mascot. */
.shipping-page .policies {
	--policies-bottom: 140px;
	--mascot-width: 756px;
	--mascot-height: 723px;
	--mascot-right: 497px;
	--mascot-ratio: 756 / 723;
}

/* Phones: each country is a card; the first cell is its title. */
@media (max-width: 767px) {
	.shipping-page .wp-block-table thead {
		position: absolute;
		overflow: hidden;
		width: 1px;
		height: 1px;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.shipping-page .wp-block-table table,
	.shipping-page .wp-block-table tbody,
	.shipping-page .wp-block-table tr,
	.shipping-page .wp-block-table td {
		display: block;
		width: auto;
	}

	.shipping-page .wp-block-table tr {
		padding: 18px 20px;
	}

	.shipping-page .wp-block-table td,
	.shipping-page .wp-block-table td:first-child,
	.shipping-page .wp-block-table td:last-child {
		display: flex;
		gap: var(--space-sm);
		justify-content: space-between;
		padding: 4px 0;
	}

	.shipping-page .wp-block-table td[data-label]:not(:first-child)::before {
		content: attr(data-label);
		color: var(--color-muted);
		font-weight: var(--weight-regular);
	}

	.shipping-page .wp-block-table td:first-child {
		justify-content: flex-start;
		align-items: center;
		gap: 10px;
		padding-bottom: 8px;
	}

	.shipping-page .wp-block-table td:first-child::before {
		flex: none;
		margin: 0;
	}

	.shipping-page .wp-block-table td:not(:first-child) {
		text-align: right;
	}
}