/* PINAX shipping table and waitlist form: the commerce components other templates embed (product page, the
   shipping page, [px_shipping_table] and [px_waitlist] shortcodes). Split out of 60-cart-checkout.css so those views
   do not load the cart and checkout sheet. Owner: commerce agent. Tokens only (00-tokens.css). Flat colour.

   Contrast pairs used (WCAG 2.x, from 00-tokens.css): ink on paper 14.89, ink on mustard 8.33, paper on green 7.77,
   grey on paper 6.06 (14px min), red on paper 5.00, paper on red 5.00, paper on ink 14.89. */

.px-ship [hidden],
.px-waitlist [hidden] { display: none !important; }

/* ==========================================================================
   1. Shipping table (shipping page, [px_shipping_table])
   ========================================================================== */

.px-ship { container-type: inline-size; }
.px-ship__status {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--px-space-2) var(--px-space-3);
	margin: 0 0 var(--px-space-4);
}
.px-ship__flag {
	padding: 0.3rem 0.6rem 0.2rem;
	background: var(--px-mustard);
	color: var(--px-ink);
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.px-ship__aside { color: var(--px-grey); font-size: var(--px-text-sm); }
.px-ship__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

.px-ship__table {
	width: 100%;
	min-width: 0;
	border-collapse: collapse;
	color: var(--px-ink);
	background: transparent;
	font-size: 1rem;
	font-variant-numeric: tabular-nums lining-nums;
}
.px-ship__table thead th {
	padding: 0 var(--px-space-3) var(--px-space-2) 0;
	border-bottom: var(--px-rule);
	color: var(--px-grey);
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}
.px-ship__table tbody :where(th, td) {
	padding: var(--px-space-4) var(--px-space-3) var(--px-space-4) 0;
	border-bottom: var(--px-hairline);
	text-align: left;
	vertical-align: top;
}
.px-ship__zone { min-width: 12rem; font-weight: 400; }
.px-ship__code {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.3em 0.45em 0.2em;
	background: var(--px-green);
	color: var(--px-paper);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: 0.04em;
}
.px-ship__name { display: block; font-weight: 700; font-size: var(--px-text-lg); line-height: 1.25; }
.px-ship__countries { display: block; color: var(--px-grey); font-size: var(--px-text-sm); line-height: 1.4; }
.px-ship__you {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.25rem 0.5rem 0.15rem;
	background: var(--px-mustard);
	color: var(--px-ink);
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.04em;
}
.px-ship__num { font-weight: 600; white-space: nowrap; }
.px-ship__ddp {
	display: inline-block;
	margin-right: 0.35rem;
	padding: 0.15rem 0.35rem 0.05rem;
	background: var(--px-ink);
	color: var(--px-paper);
	font-weight: 700;
	font-size: var(--px-text-sm);
	letter-spacing: 0.06em;
}
.px-ship__pending {
	display: block;
	width: max-content;
	max-width: 100%;
	color: var(--px-red);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: normal;
}
.px-ship__pending + * { margin-top: 0.3rem; }
.px-ship__none { font-weight: 400; }
.px-ship__notes { min-width: 16rem; }
.px-ship__notes ul { margin: 0; font-size: 0.9375rem; line-height: 1.45; }
.px-ship__notes li + li { margin-top: 0.3rem; }

.px-ship__row.is-closed :where(td, .px-ship__name) { color: var(--px-grey); }
.px-ship__row.is-closed .px-ship__code { background: var(--px-grey); }
.px-ship__row.is-closed .px-ship__pending { color: var(--px-red); }
.px-ship__row.is-closed.is-current :where(td, .px-ship__name) { color: var(--px-ink); }

.px-ship__foot { margin: var(--px-space-4) 0 0; color: var(--px-grey); font-size: var(--px-text-sm); line-height: 1.5; max-width: 48rem; }

@container (max-width: 46rem) {
	.px-ship__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.px-ship__table,
	.px-ship__table tbody,
	.px-ship__table tr { display: block; }
	.px-ship__table tbody { border-top: var(--px-rule); }
	.px-ship__table tr {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--px-space-3) var(--px-space-2);
		padding: var(--px-space-4) 0;
		border-bottom: var(--px-hairline);
	}
	.px-ship__table tbody :where(th, td) { display: block; padding: 0; border: 0; min-width: 0; }
	.px-ship__table tbody th { grid-column: 1 / -1; }
	.px-ship__table tbody td:nth-of-type(4),
	.px-ship__notes { grid-column: 1 / -1; }
	.px-ship__table tbody td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.2rem;
		color: var(--px-grey);
		font-weight: 700;
		font-size: var(--px-text-sm);
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.px-ship__num { white-space: normal; }
}

/* ==========================================================================
   2. Waitlist form (product page, [px_waitlist])
   Inherits the text colour of its container; works on paper, pale and mustard. Green and ink containers swap the eyebrow.
   ========================================================================== */

.px-waitlist {
	position: relative;
	display: grid;
	gap: var(--px-space-3);
	margin: 0;
	color: inherit;
}
.px-waitlist__eyebrow { margin: 0; }
.px-waitlist__el {
	display: block;
	color: var(--px-red);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: var(--px-h4);
	line-height: 1;
	letter-spacing: 0.14em;
}
.px-waitlist__en {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.75rem;
	line-height: 0.95;
	text-transform: uppercase;
}
:where(.px-field--green, .px-field--violet, .px-field--ink, .px-notice--ink, .px-on-dark) .px-waitlist__el { color: var(--px-mustard); }
:where(.px-field--red, .px-field--mustard, .px-field--honey, .px-notice--warn) .px-waitlist__el { color: inherit; }
.px-waitlist__lede { margin: 0; font-weight: 400; line-height: 1.5; max-width: 36rem; }
.px-waitlist__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--px-space-2);
	max-width: 36rem;
}
.px-waitlist__label { font-weight: 600; font-size: 0.9375rem; color: inherit; }
.px-waitlist__input { width: 100%; }
.px-waitlist__submit {
	min-height: 3rem;
	padding: 0.8rem 1.25rem 0.6rem;
	border: 2px solid var(--px-mustard);
	border-radius: var(--px-radius);
	background: var(--px-mustard);
	color: var(--px-ink);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--px-dur) var(--px-ease), border-color var(--px-dur) var(--px-ease), color var(--px-dur) var(--px-ease);
}
.px-waitlist__submit:hover { background: var(--px-ink); border-color: var(--px-ink); color: var(--px-mustard); }
:where(.px-field--mustard, .px-field--honey, .px-notice--warn) .px-waitlist__submit { background: var(--px-ink); border-color: var(--px-ink); color: var(--px-paper); }
.px-waitlist__submit[aria-busy="true"] { cursor: progress; }
@media (min-width: 30rem) {
	.px-waitlist__row { grid-template-columns: minmax(0, 1fr) auto; }
	.px-waitlist__label { grid-column: 1 / -1; }
}
.px-waitlist__status { margin: 0; padding: var(--px-space-2) var(--px-space-3); font-weight: 600; font-size: 1rem; line-height: 1.45; max-width: 36rem; }
.px-waitlist__status.is-ok { background: var(--px-green); color: var(--px-paper); }
.px-waitlist__status.is-error { background: var(--px-red); color: var(--px-paper); }
.px-waitlist__trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.px-waitlist__privacy { margin: 0; font-size: var(--px-text-sm); line-height: 1.5; max-width: 36rem; }
.px-waitlist__privacy a { color: inherit; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
	.px-ship *,
	.px-waitlist * { transition: none !important; }
}