/**
 * PhotoCab order-received page.
 *
 * Numbers are transcribed from the prototype
 * ("PhotoCab Order Received.dc.html", the styles() block):
 *
 *   stack          cards on --pc-page, 20px apart, 1290px container
 *   hero           white card, 32px padding, 56px tick circle on
 *                  --pc-ok-100, 24px beside the text
 *   meta tiles     four across, 18px 20px, borderless, total on --pc-accent-100
 *   card           white, 1px border, 12px radius, 24px padding, 16px gaps
 *   steps          four columns, 4px rule + name + note
 *   item row       88px thumb + name/quantity + total, 18px 0, 1px divider
 *   totals         label / value, 14px 0, "Всього" at the card heading size
 *   bottom row     "Доставка" and "Що далі" side by side
 *
 * The page is WooCommerce's, wrapped by Blocksy. Three blocks are ours -
 * the hero, the meta tiles and the status card, all from
 * woocommerce/checkout/thankyou.php - and everything between them is Woo's
 * own output, re-boxed here the same way the account order view is in
 * assets/css/account.css:
 *
 *   section.woocommerce-order-details
 *     span.pc-ty-count                  (photocab_thankyou_item_count())
 *     h2.woocommerce-order-details__title
 *     table.shop_table.order_details
 *       thead > tr > th.product-name / th.product-total
 *       tbody > tr.order_item > td.product-name + td.product-total
 *       tfoot > tr > th + td            (Разом / Доставка / Всього / Оплата)
 *   section.woocommerce-customer-details.pc-ty-card
 *     h2.pc-ty-card__title              (woocommerce/order/order-details-customer.php)
 *     [section.col2-set > div.woocommerce-column]
 *     .pc-ty-note                       (photocab_thankyou_customer_note())
 *   section.pc-ty-next
 *
 * The status pill, the progress bar and the buttons repeat the `pc-order-*`
 * classes of the account order view; the rules there are scoped to
 * `.woocommerce-MyAccount-content`, so the declarations are restated rather
 * than shared - one page's design can move without dragging the other.
 *
 * Breadcrumbs are deliberately not touched.
 */

/* ------------------------------------------------------------ The page -- */

/*
 * Blocksy prints the page title above the content ("Оформлення замовлення").
 * The hero card is the page's heading here, and it carries the <h1>.
 */
body.woocommerce-order-received .entry-header .page-title {
	display: none;
}

body.woocommerce-order-received .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ---- The stack, and the two-column row at its foot ---- */

/*
 * Grid items stretch by default, which is what the bottom row wants: the two
 * cards there are the same height whichever of them has more in it. Every
 * other card is alone on its row, so the row is its own height anyway.
 */
body.woocommerce-order-received .woocommerce-order {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pc-space-5);
}

body.woocommerce-order-received .woocommerce-order > * {
	grid-column: 1 / -1;
}

/*
 * "Доставка" and "Що далі" are the last two cards and share a row. Without a
 * customer-details section - a guest opening someone else's order link - the
 * "Що далі" card keeps the full width instead of half of it.
 */
body.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details,
body.woocommerce-order-received .woocommerce-order > .pc-ty-next {
	grid-column: auto;
}

body.woocommerce-order-received .woocommerce-order:not(:has(.woocommerce-customer-details)) > .pc-ty-next {
	grid-column: 1 / -1;
}

/* --------------------------------------------------------------- Hero -- */

body.woocommerce-order-received .pc-ty-hero {
	display: flex;
	align-items: flex-start;
	gap: var(--pc-space-6);
	padding: var(--pc-space-8);
	box-sizing: border-box;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
}

body.woocommerce-order-received .pc-ty-hero__tick {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--pc-ok-100);
	color: var(--pc-ok-600);
	animation: pc-ty-pop 420ms var(--pc-ease) both;
}

@keyframes pc-ty-pop {
	from {
		transform: scale(0.82);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-order-received .pc-ty-hero__tick {
		animation: none;
	}
}

body.woocommerce-order-received .pc-ty-hero__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

body.woocommerce-order-received .pc-ty-hero__kicker {
	font-size: var(--pc-fs-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pc-ok-600);
}

body.woocommerce-order-received .pc-ty-hero__title {
	margin: 0;
	font-size: var(--pc-fs-h1);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-tight);
	letter-spacing: var(--pc-ls-h1);
	color: var(--pc-ink-900);
}

body.woocommerce-order-received .pc-ty-hero__lead {
	margin: 0;
	max-width: 640px;
	font-size: var(--pc-fs-body);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-700);
	text-wrap: pretty;
}

body.woocommerce-order-received .pc-ty-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--pc-space-1);
}

/* -------------------------------------------------------------- Buttons -- */

body.woocommerce-order-received .pc-order-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 var(--pc-space-5);
	box-sizing: border-box;
	border-radius: var(--pc-radius-ctl);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	text-decoration: none;
	white-space: nowrap;
	transition:
		background var(--pc-dur-fast) ease,
		color var(--pc-dur-fast) ease,
		border-color var(--pc-dur-fast) ease;
}

body.woocommerce-order-received .pc-order-btn--dark {
	background: var(--pc-ink-900);
	border: 1px solid var(--pc-ink-900);
	color: var(--pc-surface);
}

body.woocommerce-order-received .pc-order-btn--dark:hover {
	background: var(--pc-ink-700);
	border-color: var(--pc-ink-700);
	color: var(--pc-surface);
}

body.woocommerce-order-received .pc-order-btn--ghost {
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	color: var(--pc-ink-900);
}

body.woocommerce-order-received .pc-order-btn--ghost:hover {
	background: var(--pc-surface-2);
	border-color: var(--pc-ink-900);
	color: var(--pc-ink-900);
}

/* ---------------------------------------------------------- Meta tiles -- */

/*
 * The tiles keep WooCommerce's `order_details` class - it is the hook other
 * code uses to find the overview - which brings `.woocommerce ul.order_details
 * li` with it: floated, uppercased, .715em, dashed rule down the right. Hence
 * the resets - `border: 0` covers that rule as well as the tiles' own, which
 * the design drops - and the tag in the selectors to outweigh it.
 */
body.woocommerce-order-received ul.pc-ty-meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

body.woocommerce-order-received ul.pc-ty-meta::before,
body.woocommerce-order-received ul.pc-ty-meta::after {
	display: none;
	content: none;
}

body.woocommerce-order-received li.pc-ty-tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	float: none;
	min-width: 0;
	margin: 0;
	padding: 18px var(--pc-space-5);
	box-sizing: border-box;
	list-style: none;
	font-size: var(--pc-fs-body);
	line-height: var(--pc-lh-card);
	text-transform: none;
	background: var(--pc-surface);
	border: 0;
	border-radius: var(--pc-radius-card);
}

body.woocommerce-order-received li.pc-ty-tile--accent {
	background: var(--pc-accent-100);
}

body.woocommerce-order-received .pc-ty-tile__key,
body.woocommerce-order-received .pc-ty-note__key {
	font-size: var(--pc-fs-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-ink-400);
}

body.woocommerce-order-received .pc-ty-tile__value {
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-card);
	letter-spacing: var(--pc-ls-heading);
	color: var(--pc-ink-900);
}

body.woocommerce-order-received .pc-ty-tile__value--big,
body.woocommerce-order-received .pc-ty-tile__value--big .amount {
	font-size: var(--pc-fs-h3);
	color: var(--pc-accent-700);
}

/* ---------------------------------------- The card shell, in three parts -- */

body.woocommerce-order-received .pc-ty-card,
body.woocommerce-order-received .woocommerce-order-details {
	margin: 0;
	padding: var(--pc-space-6);
	box-sizing: border-box;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
}

body.woocommerce-order-received .pc-ty-card {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-4);
}

body.woocommerce-order-received .pc-ty-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-4);
	flex-wrap: wrap;
}

body.woocommerce-order-received :is(.pc-ty-card__title, .woocommerce-order-details__title) {
	margin: 0;
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-heading);
	letter-spacing: var(--pc-ls-heading);
	color: var(--pc-ink-900);
}

/* ---- Status pill; tones follow the account order view ---- */

body.woocommerce-order-received .pc-order-head__badge {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--pc-surface-2);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	white-space: nowrap;
}

body.woocommerce-order-received .pc-order-head__badge--processing {
	background: var(--pc-accent-100);
	color: var(--pc-accent-700);
}

body.woocommerce-order-received .pc-order-head__badge--on-hold {
	background: var(--pc-cat-camera);
	color: var(--pc-cat-camera-fg);
}

body.woocommerce-order-received .pc-order-head__badge--pending {
	background: var(--pc-surface-2);
	color: var(--pc-ink-700);
	box-shadow: inset 0 0 0 1px var(--pc-border);
}

body.woocommerce-order-received .pc-order-head__badge--completed {
	background: var(--pc-ok-100);
	color: var(--pc-ok-600);
}

/* ---- Progress bar ---- */

body.woocommerce-order-received .pc-order-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pc-space-4);
	margin: 0;
	padding: var(--pc-space-4) 0 0;
	list-style: none;
	border-top: 1px solid var(--pc-border);
}

body.woocommerce-order-received .pc-order-step {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	min-width: 0;
	margin: 0;
	list-style: none;
}

body.woocommerce-order-received .pc-order-step__bar {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--pc-border);
}

body.woocommerce-order-received :is(.pc-order-step--done, .pc-order-step--current) .pc-order-step__bar {
	background: var(--pc-accent-500);
}

body.woocommerce-order-received .pc-order-step__name {
	font-size: var(--pc-fs-card);
	color: var(--pc-ink-400);
}

body.woocommerce-order-received :is(.pc-order-step--done, .pc-order-step--current) .pc-order-step__name {
	color: var(--pc-ink-900);
}

body.woocommerce-order-received .pc-order-step--current .pc-order-step__name {
	font-weight: var(--pc-fw-medium);
}

body.woocommerce-order-received .pc-order-step__note {
	font-size: var(--pc-fs-old);
	color: var(--pc-ink-400);
}

/* -------------------------------------------------- Order details card -- */

/*
 * The heading and the item count sit on one line, and the count is printed
 * before the heading (it hangs off the only hook inside the section), so both
 * are placed by hand; everything else in the section follows in its own row.
 */
body.woocommerce-order-received .woocommerce-order-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--pc-space-4);
}

body.woocommerce-order-received .woocommerce-order-details > * {
	grid-column: 1 / -1;
}

body.woocommerce-order-received .woocommerce-order-details__title {
	grid-row: 1;
	grid-column: 1;
}

body.woocommerce-order-received .pc-ty-count {
	grid-row: 1;
	grid-column: 2;
	justify-self: end;
	font-size: var(--pc-fs-card);
	color: var(--pc-ink-400);
}

/* ---- The order table, re-boxed as grid rows ---- */

body.woocommerce-order-received .woocommerce-order table.order_details {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
}

body.woocommerce-order-received .woocommerce-order table.order_details :is(thead, tbody, tfoot) {
	display: block;
}

body.woocommerce-order-received .woocommerce-order table.order_details tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--pc-space-4);
	background: none;
}

body.woocommerce-order-received .woocommerce-order table.order_details :is(th, td) {
	padding: 0;
	border: 0;
	background: none;
	font-weight: var(--pc-fw-regular);
	text-align: left;
}

body.woocommerce-order-received .woocommerce-order table.order_details thead tr {
	align-items: baseline;
	padding-bottom: var(--pc-space-3);
}

body.woocommerce-order-received .woocommerce-order table.order_details thead th {
	font-size: var(--pc-fs-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-ink-400);
}

body.woocommerce-order-received .woocommerce-order table.order_details thead th.product-total {
	text-align: right;
}

/* ---- Item rows: thumbnail, then name over quantity, then the total ---- */

body.woocommerce-order-received .woocommerce-order table.order_details tbody tr {
	align-items: center;
	padding: 18px 0;
	border-top: 1px solid var(--pc-border);
}

body.woocommerce-order-received .woocommerce-order table.order_details tbody td.product-name {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	column-gap: 18px;
	min-width: 0;
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-900);
}

/* A line item that is no longer a product has no thumbnail; see
   woocommerce/order/order-details-item.php. */
body.woocommerce-order-received .woocommerce-order table.order_details tbody td.product-name:has(.pc-order-item__thumb) {
	grid-template-columns: 88px minmax(0, 1fr);
}

body.woocommerce-order-received .woocommerce-order table.order_details .pc-order-item__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	padding: 6px;
	box-sizing: border-box;
	background: var(--pc-surface-2);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	overflow: hidden;
}

body.woocommerce-order-received .woocommerce-order table.order_details .pc-order-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body.woocommerce-order-received .woocommerce-order table.order_details .pc-order-item__text {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	min-width: 0;
}

body.woocommerce-order-received .woocommerce-order table.order_details tbody td.product-name a {
	color: inherit;
	text-decoration: none;
	transition: color var(--pc-dur-fast) ease;
}

body.woocommerce-order-received .woocommerce-order table.order_details tbody td.product-name a:hover {
	color: var(--pc-accent-500);
}

body.woocommerce-order-received .woocommerce-order table.order_details .product-quantity {
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-regular);
	color: var(--pc-ink-400);
}

body.woocommerce-order-received .woocommerce-order table.order_details .wc-item-meta {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--pc-fs-old);
	color: var(--pc-ink-400);
}

body.woocommerce-order-received .woocommerce-order table.order_details .wc-item-meta p {
	margin: 0;
	display: inline;
}

body.woocommerce-order-received .woocommerce-order table.order_details tbody td.product-total {
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	color: var(--pc-ink-900);
	text-align: right;
	white-space: nowrap;
}

/* ---- Totals ---- */

/*
 * The label keeps its own width and the value takes the rest: the shipping
 * line carries the carrier and the tariff note ("Нова пошта, в поштомат · За
 * тарифами перевізника"), which is longer than the column an `auto` track
 * would give it and would otherwise run over the label.
 */
body.woocommerce-order-received .woocommerce-order table.order_details tfoot tr {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	padding: 14px 0;
	border-top: 1px solid var(--pc-border);
}

body.woocommerce-order-received .woocommerce-order table.order_details tfoot th {
	font-size: var(--pc-fs-card);
	color: var(--pc-ink-600);
	white-space: nowrap;
}

body.woocommerce-order-received .woocommerce-order table.order_details tfoot td {
	font-size: var(--pc-fs-price);
	color: var(--pc-ink-900);
	text-align: right;
}

/* The order total is the one line the design sets in the card heading size;
   the marker span comes from photocab_mark_order_total(). */
body.woocommerce-order-received .woocommerce-order table.order_details tfoot tr:has(.pc-order-total) td {
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-heading);
}

/*
 * The customer's note is drawn inside the "Доставка" card instead - see
 * photocab_thankyou_customer_note(). Its row is the only one in the foot with
 * a <th> that carries neither `scope` nor the actions class, which is what
 * tells it apart from the totals.
 */
body.woocommerce-order-received .woocommerce-order table.order_details tfoot tr:has(th:not([scope]):not(.order-actions--heading)) {
	display: none;
}

/* ---- The "Дії:" row, for an order still waiting to be paid ---- */

body.woocommerce-order-received .woocommerce-order table.order_details tfoot tr:has(.order-actions--heading) {
	align-items: center;
}

body.woocommerce-order-received .woocommerce-order table.order_details tfoot .order-actions--heading {
	white-space: nowrap;
}

body.woocommerce-order-received .woocommerce-order table.order_details tfoot tr:has(.order-actions--heading) td {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

body.woocommerce-order-received .woocommerce-order table.order_details .order-actions-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-height: 0;
	padding: 0 var(--pc-space-4);
	box-sizing: border-box;
	border-radius: var(--pc-radius-ctl);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	text-decoration: none;
	white-space: nowrap;
	--theme-button-min-height: 40px;
	transition:
		background-color var(--pc-dur-fast) ease,
		border-color var(--pc-dur-fast) ease,
		color var(--pc-dur-fast) ease;
}

body.woocommerce-order-received .woocommerce-order table.order_details .order-actions-button.pay {
	--theme-button-background-initial-color: var(--pc-ink-900);
	--theme-button-background-hover-color: var(--pc-ink-700);
	--theme-button-text-initial-color: var(--pc-surface);
	--theme-button-text-hover-color: var(--pc-surface);
	--theme-button-border: 1px solid var(--pc-ink-900);
	background-color: var(--pc-ink-900);
	border: 1px solid var(--pc-ink-900);
	color: var(--pc-surface);
}

body.woocommerce-order-received .woocommerce-order table.order_details .order-actions-button:not(.pay) {
	--theme-button-background-initial-color: var(--pc-surface);
	--theme-button-background-hover-color: var(--pc-surface-2);
	--theme-button-text-initial-color: var(--pc-ink-900);
	--theme-button-text-hover-color: var(--pc-ink-900);
	--theme-button-border: 1px solid var(--pc-border);
	background-color: var(--pc-surface);
	border: 1px solid var(--pc-border);
	color: var(--pc-ink-900);
}

body.woocommerce-order-received .woocommerce-order table.order_details .order-actions-button:not(.pay):hover {
	--theme-button-border: 1px solid var(--pc-ink-900);
	background-color: var(--pc-surface-2);
	border-color: var(--pc-ink-900);
	color: var(--pc-ink-900);
}

/* ---- Downloads, when the order carries any ---- */

body.woocommerce-order-received .woocommerce-order-downloads {
	margin: 0;
}

/* ------------------------------------------------------ Доставка card -- */

/*
 * One card whatever WooCommerce prints inside it: the billing block alone, or
 * both addresses in a .col2-set. The design has no room for two columns here -
 * the card is already half the row - so they stack, each under its own label.
 */
body.woocommerce-order-received .woocommerce-customer-details .col2-set {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-4);
	margin: 0;
}

body.woocommerce-order-received .woocommerce-customer-details .col2-set::before,
body.woocommerce-order-received .woocommerce-customer-details .col2-set::after {
	display: none;
	content: none;
}

body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.woocommerce-order-received .woocommerce-column__title {
	margin: 0;
	font-size: var(--pc-fs-label);
	font-weight: var(--pc-fw-regular);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-ink-400);
}

body.woocommerce-order-received .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-style: normal;
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-600);
}

body.woocommerce-order-received .woocommerce-customer-details address :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email) {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

body.woocommerce-order-received .woocommerce-customer-details address :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email)::before {
	display: none;
	content: none;
}

body.woocommerce-order-received .pc-ty-note {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px var(--pc-space-4);
	box-sizing: border-box;
	background: var(--pc-surface-2);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
}

body.woocommerce-order-received .pc-ty-note__text {
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-700);
}

/* ------------------------------------------------------- Що далі card -- */

body.woocommerce-order-received .pc-ty-next__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-order-received .pc-ty-next__item {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	margin: 0;
	list-style: none;
}

body.woocommerce-order-received .pc-ty-next__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--pc-accent-100);
	color: var(--pc-accent-700);
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-medium);
}

body.woocommerce-order-received .pc-ty-next__text {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-1);
	min-width: 0;
}

body.woocommerce-order-received .pc-ty-next__title {
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-heading);
	color: var(--pc-ink-900);
}

body.woocommerce-order-received .pc-ty-next__body {
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-600);
	text-wrap: pretty;
}

/* `margin-top: auto` keeps the button at the foot of a stretched card. */
body.woocommerce-order-received .pc-ty-next__cta {
	align-self: flex-start;
	width: max-content;
	margin-top: auto;
}

/* ---------------------------------------------------------- Tablet -- */

@media (max-width: 999.98px) {
	body.woocommerce-order-received .woocommerce-order {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	body.woocommerce-order-received .woocommerce-order > * {
		grid-column: 1 / -1;
	}

	body.woocommerce-order-received .pc-ty-hero {
		gap: var(--pc-space-5);
		padding: 26px;
	}

	body.woocommerce-order-received .pc-ty-hero__tick {
		width: 52px;
		height: 52px;
	}

	body.woocommerce-order-received ul.pc-ty-meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	body.woocommerce-order-received li.pc-ty-tile {
		padding: var(--pc-space-4) 18px;
	}

	body.woocommerce-order-received .pc-ty-card,
	body.woocommerce-order-received .woocommerce-order-details {
		padding: var(--pc-space-5);
	}
}

/* ---------------------------------------------------------- Mobile -- */

@media (max-width: 689.98px) {
	body.woocommerce-order-received .woocommerce-order {
		gap: var(--pc-space-4);
	}

	body.woocommerce-order-received .pc-ty-hero {
		flex-direction: column;
		gap: 14px;
		padding: var(--pc-space-5);
	}

	body.woocommerce-order-received .pc-ty-hero__tick {
		width: 46px;
		height: 46px;
	}

	body.woocommerce-order-received .pc-ty-hero__actions .pc-order-btn {
		flex: 1 1 auto;
	}

	body.woocommerce-order-received ul.pc-ty-meta {
		gap: var(--pc-space-3);
	}

	body.woocommerce-order-received li.pc-ty-tile {
		padding: 14px var(--pc-space-4);
	}

	body.woocommerce-order-received .pc-ty-card,
	body.woocommerce-order-received .woocommerce-order-details {
		padding: var(--pc-space-4);
	}

	/* Two stages a row, and the item total under the name rather than beside it. */
	body.woocommerce-order-received .pc-order-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pc-space-3);
	}

	body.woocommerce-order-received .woocommerce-order table.order_details tbody tr {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--pc-space-3);
	}

	body.woocommerce-order-received .woocommerce-order table.order_details tbody td.product-name:has(.pc-order-item__thumb) {
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: var(--pc-space-3);
	}

	body.woocommerce-order-received .woocommerce-order table.order_details .pc-order-item__thumb {
		width: 72px;
		height: 72px;
	}

	/* Under the name rather than beside it, kept clear of the thumbnail. */
	body.woocommerce-order-received .woocommerce-order table.order_details tbody td.product-total {
		padding-left: calc(72px + var(--pc-space-3));
		text-align: left;
	}

	body.woocommerce-order-received .woocommerce-order table.order_details thead th.product-total {
		display: none;
	}
}