/**
 * Société Jersiaise, cart and checkout
 *
 * Loads after shop.css on the cart, checkout and order received pages.
 * Buttons, fields, notices and prices all come from shop.css; this file is the
 * layout plus the two components unique to the purchase flow, the progress
 * indicator and the order summary.
 *
 * Scoped under .sj-shop, like the rest. See the note at the top of shop.css.
 *
 * Many selectors here target WooCommerce's own class names. That is deliberate
 * and unavoidable on checkout: the payment section, the shipping methods and
 * the validation states are rendered by Woo and by each gateway, and forking
 * those templates is exactly what section 8 of the brief warns against.
 *
 * @package sj-child
 */

/* -------------------------------------------------------------------------
 * Shared surfaces
 * ---------------------------------------------------------------------- */

.sj-shop .sj-panel {
	padding: var(--sj-space-5);
	border: var(--sj-border-width) solid var(--sj-color-border);
	border-radius: var(--sj-radius-lg);
	background-color: var(--sj-color-surface);
}

@media (min-width: 48rem) {

	.sj-shop .sj-panel {
		padding: var(--sj-space-6);
	}
}

/* -------------------------------------------------------------------------
 * Page header band
 * ---------------------------------------------------------------------- */

.sj-shop .sj-page-head {
	border-block-end: var(--sj-border-width) solid var(--sj-color-border);
	background-color: var(--sj-color-surface);
}

.sj-shop .sj-page-head__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sj-space-4);
	padding-block: var(--sj-space-5);
}

/**
 * Small screens: the title centres and the back link goes.
 *
 * The step indicator already says where you are and the browser's own back
 * control is a thumb's reach away, so a text link competing with the heading
 * for a 390px row earns nothing.
 */

@media (max-width: 47.99rem) {

	.sj-shop .sj-page-head__inner {
		flex-direction: column;
		justify-content: center;
		gap: var(--sj-space-3);
		text-align: center;
	}

	.sj-shop .sj-page-head__back {
		display: none;
	}
}

/**
 * Flush to the container edge on desktop, by request, so the title sits one
 * gutter to the left of the cards beneath it.
 *
 * The breakpoint is the container width plus both gutters, 1500 + 32 + 32. Only
 * above that does the container actually have room to centre, and only then is
 * there a container edge to be flush with. Below it the container fills the
 * viewport, so removing the padding does not move the title relative to a
 * container, it moves it hard against the browser window: measured at
 * titleLeft 0 on a 1440 and a 1280 viewport, with the cards still at 32.
 */
@media (min-width: 97.75rem) {

	.sj-shop .sj-page-head__inner {
		padding-inline: 0;
	}
}

.sj-shop .sj-page-head__title {
	margin: 0;
	font-size: var(--sj-text-2xl);
	line-height: var(--sj-leading-tight);
	letter-spacing: var(--sj-tracking-caps);
	text-wrap: pretty;
}

.sj-shop .sj-page-head__back {
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-semibold);
	letter-spacing: var(--sj-tracking-none);
	text-decoration: none;
	white-space: nowrap;
	color: var(--sj-color-navy);
}

.sj-shop .sj-page-head__back:hover {
	text-decoration: underline;
	text-underline-offset: var(--sj-border-width-thick);
}

/* -------------------------------------------------------------------------
 * Progress indicator
 * ---------------------------------------------------------------------- */

.sj-shop .sj-steps__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sj-space-3);
	padding: 0;
	margin: 0;
	list-style: none;
}

.sj-shop .sj-steps__item {
	display: flex;
	align-items: center;
	gap: var(--sj-space-2);
	font-size: var(--sj-text-2xs);
	letter-spacing: var(--sj-tracking-none);
	color: var(--sj-color-ink-body);
}

/* The connector between steps, drawn rather than added as an element. */

.sj-shop .sj-steps__item + .sj-steps__item::before {
	content: "";
	inline-size: var(--sj-space-6);
	block-size: var(--sj-border-width);
	margin-inline-end: var(--sj-space-1);
	background-color: var(--sj-color-border);
}

.sj-shop .sj-steps__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--sj-space-5);
	block-size: var(--sj-space-5);
	border: var(--sj-border-width) solid var(--sj-color-border);
	border-radius: var(--sj-radius-pill);
	font-size: var(--sj-text-3xs);
	font-weight: var(--sj-weight-bold);
	line-height: 1;
	color: var(--sj-color-ink-body);
}

.sj-shop .sj-steps__item--current {
	font-weight: var(--sj-weight-bold);
	color: var(--sj-color-ink);
}

.sj-shop .sj-steps__item--current .sj-steps__marker {
	background-color: var(--sj-color-navy);
	border-color: var(--sj-color-navy);
	color: var(--sj-color-ink-inverse);
}

.sj-shop .sj-steps__item--done .sj-steps__marker {
	background-color: var(--sj-color-info-bg);
	border-color: var(--sj-color-navy);
	color: var(--sj-color-navy);
}

@media (max-width: 47.99rem) {

	/* On a narrow screen the labels go and the markers carry the progress. */

	.sj-shop .sj-steps__item:not(.sj-steps__item--current) .sj-steps__label {
		position: absolute;
		inline-size: var(--sj-border-width);
		block-size: var(--sj-border-width);
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/**
 * Notices and the coupon toggle sit outside the page's own container, because
 * Woo prints them straight into the shortcode output before our markup starts.
 * Constraining them here keeps them on the same left edge as everything else
 * instead of running the full width of the screen.
 */

/**
 * Notices and the coupon and login toggles sit outside the page's own
 * container, because Woo prints them into the shortcode output before our
 * markup starts. Constraining them here keeps them on the same left edge as
 * everything else instead of running the full width of the screen.
 *
 * The :where() is doing real work. WooCommerce wraps shortcode output in a
 * div.woocommerce, and on the cart it also wraps notices in
 * div.woocommerce-notices-wrapper, while on checkout it sometimes does not.
 * Matching either depth covers both shapes without three separate rules.
 */

.sj-shop--page :where( .woocommerce, .woocommerce-notices-wrapper ) > .woocommerce-notices-wrapper,
.sj-shop--page :where( .woocommerce, .woocommerce-notices-wrapper ) > .woocommerce-message,
.sj-shop--page :where( .woocommerce, .woocommerce-notices-wrapper ) > .woocommerce-info,
.sj-shop--page :where( .woocommerce, .woocommerce-notices-wrapper ) > .woocommerce-error,
.sj-shop--page :where( .woocommerce, .woocommerce-notices-wrapper ) > .woocommerce-form-coupon-toggle,
.sj-shop--page :where( .woocommerce, .woocommerce-notices-wrapper ) > .woocommerce-form-login-toggle,
.sj-shop--page :where( .woocommerce, .woocommerce-notices-wrapper ) > form.woocommerce-form-coupon,
.sj-shop--page :where( .woocommerce, .woocommerce-notices-wrapper ) > form.woocommerce-form-login,
.sj-shop--page > .woocommerce-notices-wrapper,
.sj-shop--page > .woocommerce-message,
.sj-shop--page > .woocommerce-info,
.sj-shop--page > .woocommerce-error {
	inline-size: 100%;
	max-inline-size: var(--sj-container-product);
	margin-block-start: var(--sj-space-5);
	margin-inline: auto;
}

/* The wrapper carries the gutter; the notice inside it must not double it. */

.sj-shop--page .woocommerce-notices-wrapper {
	padding-inline: var(--sj-gutter);
}

.sj-shop--page .woocommerce-notices-wrapper > .woocommerce-message,
.sj-shop--page .woocommerce-notices-wrapper > .woocommerce-info,
.sj-shop--page .woocommerce-notices-wrapper > .woocommerce-error {
	max-inline-size: none;
	margin-block-start: 0;
	padding-inline: var(--sj-space-5);
}

.sj-shop--page .woocommerce-notices-wrapper:empty {
	display: none;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Cart and checkout shell
 * ---------------------------------------------------------------------- */

.sj-shop .sj-cart,
.sj-shop .sj-checkout {
	padding-block: var(--sj-space-7) var(--sj-section-y);
}

.sj-shop .sj-cart__layout,
.sj-shop .sj-checkout__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sj-space-5);
	align-items: start;
}

@media (min-width: 64rem) {

	.sj-shop .sj-cart__layout,
	.sj-shop .sj-checkout__layout {
		grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
		gap: var(--sj-space-6);
	}

	/**
	 * The basket summary follows you down the page. The checkout review
	 * deliberately does not: the billing form is tall enough that a panel
	 * pinned beside it ends up floating against empty space for most of the
	 * scroll, and on a shorter viewport it clips its own Place order button.
	 */

	.sj-shop .sj-cart__summary {
		position: sticky;
		inset-block-start: var(--sj-space-5);
	}
}

/**
 * The parent theme's reset styles every table on the site like a data table:
 *
 *   table td, table th { border: 1px solid hsla(0,0%,50%,.502) }
 *   table tbody > tr:nth-child(2n+1) > td { background: hsla(0,0%,50%,.071) }
 *
 * Setting only border-block-end here leaves the other three borders and the
 * zebra stripe in place, which is what made the basket look like a spreadsheet.
 * Every side is reset first, then the one rule we actually want is applied.
 */

.sj-shop .sj-cart__table {
	inline-size: 100%;
	border-collapse: collapse;
	background-color: transparent;
}

.sj-shop .sj-cart__table tr,
.sj-shop .sj-cart__table tbody > tr:nth-child(2n + 1) > td,
.sj-shop .sj-cart__table tbody > tr:nth-child(2n + 1) > th {
	background-color: transparent;
}

.sj-shop .sj-cart__table td,
.sj-shop .sj-cart__table th,
.sj-shop .sj-cart__table thead tr:first-child td,
.sj-shop .sj-cart__table thead tr:first-child th {
	border: 0;
}

.sj-shop .sj-cart__table th {
	padding-block-end: var(--sj-space-3);
	padding-inline: 0 var(--sj-space-4);
	border-block-end: var(--sj-border-width) solid var(--sj-color-border);
	font-size: var(--sj-text-3xs);
	font-weight: var(--sj-weight-bold);
	letter-spacing: var(--sj-tracking-caps);
	text-transform: uppercase;
	text-align: start;
	color: var(--sj-color-ink-muted);
}

.sj-shop .sj-cart__table td {
	padding-block: var(--sj-space-4);
	padding-inline: 0 var(--sj-space-4);
	border-block-end: var(--sj-border-width) solid var(--sj-color-border);
	vertical-align: middle;
}

.sj-shop .sj-cart__table tr:last-child td {
	border-block-end: 0;
}

.sj-shop .sj-cart__table td.product-thumbnail {
	inline-size: var(--sj-space-10);
	padding-inline-end: var(--sj-space-4);
}

.sj-shop .sj-cart__table td.product-thumbnail img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--sj-ratio-product);
	object-fit: contain;
	background-color: var(--sj-color-surface);
	border: var(--sj-border-width) solid var(--sj-color-border);
	border-radius: var(--sj-radius-sm);
}

.sj-shop .sj-cart__table td.product-name {
	font-size: var(--sj-text-xs);
	font-weight: var(--sj-weight-semibold);
	line-height: var(--sj-leading-snug);
	color: var(--sj-color-ink);
	text-wrap: pretty;
}

.sj-shop .sj-cart__table td.product-name a {
	color: inherit;
	text-decoration: none;
}

.sj-shop .sj-cart__table td.product-name a:hover {
	color: var(--sj-color-navy);
}

.sj-shop .sj-cart__table td.product-price,
.sj-shop .sj-cart__table td.product-subtotal {
	font-size: var(--sj-text-2xs);
	color: var(--sj-color-ink);
}

.sj-shop .sj-cart__table td.product-subtotal {
	font-weight: var(--sj-weight-bold);
}

.sj-shop .sj-cart__remove,
.sj-shop .sj-cart__table a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--sj-tap-target-sm);
	block-size: var(--sj-tap-target-sm);
	border-radius: var(--sj-radius-pill);
	background-color: var(--sj-color-surface-tint);
	font-size: var(--sj-text-md);
	line-height: 1;
	text-decoration: none;
	color: var(--sj-color-ink-body);
	transition: background-color var(--sj-duration-fast) var(--sj-ease),
		color var(--sj-duration-fast) var(--sj-ease);
}

.sj-shop .sj-cart__remove:hover,
.sj-shop .sj-cart__table a.remove:hover {
	background-color: var(--sj-color-error-bg);
	color: var(--sj-color-error);
}

.sj-shop .sj-cart__table td.actions {
	border-block-end: 0;
}

.sj-shop .sj-cart__coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sj-space-2);
}

.sj-shop .sj-cart__coupon .sj-field__label {
	inline-size: 100%;
}

.sj-shop .sj-cart__coupon .sj-field__input {
	inline-size: auto;
	flex: 1 1 var(--sj-space-10);
	max-inline-size: var(--sj-search-width);
}

/* -------------------------------------------------------------------------
 * Quantity stepper
 * ---------------------------------------------------------------------- */

.sj-shop .quantity {
	display: inline-flex;
	align-items: center;
}

.sj-shop .sj-stepper {
	border: var(--sj-border-width) solid var(--sj-color-border);
	border-radius: var(--sj-radius-pill);
	background-color: var(--sj-color-surface);
}

.sj-shop .sj-stepper__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--sj-tap-target-sm);
	block-size: var(--sj-tap-target-sm);
	padding: 0;
	border: 0;
	border-radius: var(--sj-radius-pill);
	background-color: transparent;
	font-size: var(--sj-text-md);
	line-height: 1;
	color: var(--sj-color-ink);
	cursor: pointer;
}

.sj-shop .sj-stepper__button:hover {
	background-color: transparent;
	color: var(--sj-color-navy);
}

.sj-shop .sj-stepper input.qty {
	inline-size: var(--sj-space-7);
	min-block-size: var(--sj-tap-target-sm);
	padding: 0;
	border: 0;
	background-color: transparent;
	font-family: var(--sj-font);
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-semibold);
	text-align: center;
	color: var(--sj-color-ink);
	appearance: textfield;
}

.sj-shop .sj-stepper input.qty::-webkit-outer-spin-button,
.sj-shop .sj-stepper input.qty::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

/* -------------------------------------------------------------------------
 * Order summary
 * ---------------------------------------------------------------------- */

.sj-shop .sj-summary__title {
	margin-block: 0 var(--sj-space-4);
	font-size: var(--sj-text-xl);
	line-height: var(--sj-leading-snug);
	letter-spacing: var(--sj-tracking-heading);
	text-transform: none;
	color: var(--sj-color-navy);
}

.sj-shop .sj-summary__items {
	padding: 0;
	margin: 0 0 var(--sj-space-4);
	list-style: none;
}

.sj-shop .sj-summary__item {
	display: grid;
	grid-template-columns: var(--sj-space-8) minmax(0, 1fr) auto;
	gap: var(--sj-space-3);
	align-items: center;
	padding-block: var(--sj-space-3);
	border-block-end: var(--sj-border-width) solid var(--sj-color-border);
}

.sj-shop .sj-summary__thumb {
	position: relative;
	display: block;
}

.sj-shop .sj-summary__thumb img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--sj-ratio-product);
	object-fit: contain;
	background-color: var(--sj-color-surface);
	border: var(--sj-border-width) solid var(--sj-color-border);
	border-radius: var(--sj-radius-sm);
}

.sj-shop .sj-summary__qty {
	position: absolute;
	inset-block-start: calc(var(--sj-space-2) * -1);
	inset-inline-end: calc(var(--sj-space-2) * -1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--sj-space-5);
	min-block-size: var(--sj-space-5);
	padding-inline: var(--sj-space-1);
	border-radius: var(--sj-radius-pill);
	background-color: var(--sj-color-navy);
	font-size: var(--sj-text-3xs);
	font-weight: var(--sj-weight-bold);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--sj-color-ink-inverse);
}

.sj-shop .sj-summary__name {
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-semibold);
	line-height: var(--sj-leading-snug);
	color: var(--sj-color-ink);
	text-wrap: pretty;
}

.sj-shop .sj-summary__price {
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-bold);
	white-space: nowrap;
	color: var(--sj-color-ink);
}

.sj-shop .sj-summary__rows {
	display: flex;
	flex-direction: column;
	gap: var(--sj-space-3);
}

.sj-shop .sj-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sj-space-4);
	font-size: var(--sj-text-2xs);
	letter-spacing: var(--sj-tracking-none);
}

.sj-shop .sj-summary__label {
	color: var(--sj-color-ink-body);
}

.sj-shop .sj-summary__value {
	font-weight: var(--sj-weight-semibold);
	text-align: end;
	color: var(--sj-color-ink);
}

.sj-shop .sj-summary__row--total {
	padding-block-start: var(--sj-space-3);
	border-block-start: var(--sj-border-width) solid var(--sj-color-border);
}

.sj-shop .sj-summary__row--total .sj-summary__label {
	font-size: var(--sj-text-xs);
	font-weight: var(--sj-weight-bold);
	color: var(--sj-color-ink);
}

.sj-shop .sj-summary__row--total .sj-summary__value {
	font-size: var(--sj-text-xl);
	font-weight: var(--sj-weight-bold);
	color: var(--sj-color-navy);
}

/**
 * Shipping choices. Woo renders them as a table row of its own.
 *
 * Written for real once weight based shipping was switched back on. Until then
 * no zone produced a rate, so this row rendered as a single line of text and
 * was styled as one: a right aligned flex row at the smallest type size. With
 * live rates it is a set of radio buttons the customer has to choose between,
 * including collection, so it is a form control and needs to behave like one.
 */

.sj-shop .woocommerce-shipping-totals {
	display: block;
}

.sj-shop .woocommerce-shipping-totals th {
	display: block;
	padding-block-end: var(--sj-space-2);
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-semibold);
	letter-spacing: var(--sj-tracking-caps);
	text-transform: uppercase;
	text-align: start;
	color: var(--sj-color-ink-muted);
}

.sj-shop .woocommerce-shipping-totals td {
	display: block;
	text-align: start;
}

.sj-shop ul#shipping_method {
	display: flex;
	flex-direction: column;
	gap: var(--sj-space-1);
	padding: 0;
	margin: 0;
	list-style: none;
}

/**
 * The li is the row, not the label.
 *
 * Woo prints the radio and its label as siblings rather than nesting one in the
 * other, so the label cannot be stretched to make the row clickable. The li
 * carries the 44px row instead, and the radio is sized to 24px so that it also
 * clears WCAG 2.5.8 on its own rather than depending on the label's `for`.
 */
.sj-shop ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: var(--sj-space-3);
	min-block-size: var(--sj-tap-target);
	padding: var(--sj-space-1) var(--sj-space-3);
	margin: 0;
	border-radius: var(--sj-radius-sm);
	transition: background-color var(--sj-duration-fast) var(--sj-ease);
}

.sj-shop ul#shipping_method li:hover {
	background-color: var(--sj-color-surface-tint);
}

/**
 * The label is NOT a flex container, deliberately.
 *
 * wc_cart_totals_shipping_method_label() returns "Jersey: <span>£19.43</span>",
 * a text node followed by an element. Under flex those become two items and the
 * whitespace between them collapses, so it renders as "Jersey:£19.43". The li
 * above is already centring its children, so the label does not need flex to
 * sit on the row.
 */
.sj-shop ul#shipping_method li label {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--sj-text-sm);
	line-height: var(--sj-leading-snug);
	color: var(--sj-color-ink-body);
	cursor: pointer;
}

.sj-shop ul#shipping_method li input.shipping_method {
	flex: 0 0 auto;
	inline-size: var(--sj-control-check);
	block-size: var(--sj-control-check);
	min-block-size: var(--sj-control-check);
	margin: 0;
	accent-color: var(--sj-color-navy);
	cursor: pointer;
}

.sj-shop ul#shipping_method li input.shipping_method:focus-visible {
	outline: var(--sj-focus-width) solid var(--sj-focus-color);
	outline-offset: var(--sj-focus-offset);
}

.sj-shop ul#shipping_method li input.shipping_method:checked + label {
	font-weight: var(--sj-weight-semibold);
	color: var(--sj-color-navy);
}

.sj-shop .woocommerce-shipping-destination {
	margin-block: var(--sj-space-2) 0;
	font-size: var(--sj-text-2xs);
	color: var(--sj-color-ink-muted);
}

/**
 * Checkboxes Woo writes by hand.
 *
 * "Ship to a different address" and "Create an account" only appear once
 * shipping is live, so they were never visible while this file was first
 * written. Both were measured at 16px, under the 24px WCAG 2.5.8 minimum.
 */

.sj-shop .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var(--sj-space-3);
	min-block-size: var(--sj-tap-target);
	font-size: var(--sj-text-sm);
	color: var(--sj-color-ink-body);
	cursor: pointer;
}

.sj-shop .woocommerce-form__input-checkbox {
	flex: 0 0 auto;
	inline-size: var(--sj-control-check);
	block-size: var(--sj-control-check);
	min-block-size: var(--sj-control-check);
	margin: 0;
	accent-color: var(--sj-color-navy);
	cursor: pointer;
}

.sj-shop .woocommerce-form__input-checkbox:focus-visible {
	outline: var(--sj-focus-width) solid var(--sj-focus-color);
	outline-offset: var(--sj-focus-offset);
}

.sj-shop .sj-summary__actions {
	margin-block-start: var(--sj-space-5);
}

.sj-shop .sj-summary__actions .checkout-button,
.sj-shop .sj-summary__actions .button {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: var(--sj-control-height);
	padding-inline: var(--sj-space-5);
	border: var(--sj-border-width) solid var(--sj-color-navy);
	border-radius: var(--sj-radius-sm);
	background-color: var(--sj-color-navy);
	font-family: var(--sj-font);
	font-size: var(--sj-text-sm);
	font-weight: var(--sj-weight-bold);
	letter-spacing: var(--sj-tracking-tight);
	text-align: center;
	text-decoration: none;
	text-transform: none;
	color: var(--sj-color-ink-inverse);
}

.sj-shop .sj-summary__actions .checkout-button:hover,
.sj-shop .sj-summary__actions .button:hover {
	background-color: var(--sj-color-navy-deep);
	border-color: var(--sj-color-navy-deep);
	color: var(--sj-color-ink-inverse);
}

.sj-shop .sj-summary__reassurance {
	display: flex;
	align-items: flex-start;
	gap: var(--sj-space-2);
	margin-block: var(--sj-space-4) 0;
	font-size: var(--sj-text-3xs);
	line-height: var(--sj-leading-normal);
	letter-spacing: var(--sj-tracking-none);
	color: var(--sj-color-ink-body);
}

.sj-shop .sj-summary__lock {
	flex: none;
}

/* -------------------------------------------------------------------------
 * Checkout form
 * ---------------------------------------------------------------------- */

.sj-shop .sj-checkout__details {
	display: flex;
	flex-direction: column;
	gap: var(--sj-space-5);
}

.sj-shop .sj-checkout__details .col2-set {
	display: flex;
	flex-direction: column;
	gap: var(--sj-space-5);
}

.sj-shop .sj-checkout__review-title {
	margin-block: 0 var(--sj-space-4);
	font-size: var(--sj-text-xl);
	line-height: var(--sj-leading-snug);
	letter-spacing: var(--sj-tracking-heading);
	text-transform: none;
	color: var(--sj-color-navy);
}

.sj-shop .woocommerce-billing-fields h3,
.sj-shop .woocommerce-shipping-fields h3,
.sj-shop .woocommerce-additional-fields h3 {
	margin-block: 0 var(--sj-space-4);
	font-size: var(--sj-text-lg);
	font-weight: var(--sj-weight-bold);
	line-height: var(--sj-leading-snug);
	letter-spacing: var(--sj-tracking-heading);
	text-transform: none;
	color: var(--sj-color-navy);
}

/* Two column field pairs, using Woo's own form-row classes. */

.sj-shop .woocommerce-billing-fields__field-wrapper,
.sj-shop .woocommerce-shipping-fields__field-wrapper,
.sj-shop .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--sj-space-4);
}

@media (min-width: 30rem) {

	.sj-shop .woocommerce-billing-fields__field-wrapper,
	.sj-shop .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.sj-shop .form-row-wide,
	.sj-shop .form-row-full {
		grid-column: 1 / -1;
	}
}

.sj-shop .form-row {
	margin: 0 0 var(--sj-space-4);
}

/* Woo marks required fields with an abbr and optional ones in the label. */

.sj-shop .required {
	text-decoration: none;
	color: var(--sj-color-error);
}

.sj-shop .optional {
	font-weight: var(--sj-weight-regular);
	color: var(--sj-color-ink-body);
}

.sj-shop .woocommerce-invalid .sj-field__input,
.sj-shop .woocommerce-invalid .sj-field__select {
	border-color: var(--sj-color-error);
	border-inline-start-width: var(--sj-border-width-thick);
}

.sj-shop .woocommerce-validated .sj-field__input {
	border-color: var(--sj-color-success);
}

.sj-shop #ship-to-different-address {
	display: flex;
	align-items: center;
	gap: var(--sj-space-3);
	margin-block-end: var(--sj-space-4);
}

.sj-shop #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: var(--sj-space-3);
	margin: 0;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Coupon
 *
 * A panel like the others, not a notice. A native details element carries the
 * open state, so it works with JavaScript off and the state is exposed to
 * assistive technology without any ARIA of ours.
 * ---------------------------------------------------------------------- */

.sj-shop .sj-coupon__disclosure {
	inline-size: 100%;
}

/* Set like the other card headings, so the panel reads as their peer. */

.sj-shop .sj-coupon__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sj-space-3);
	cursor: pointer;
	list-style: none;
	font-size: var(--sj-text-lg);
	font-weight: var(--sj-weight-bold);
	line-height: var(--sj-leading-snug);
	letter-spacing: var(--sj-tracking-heading);
	color: var(--sj-color-navy);
}

.sj-shop .sj-coupon__summary::-webkit-details-marker {
	display: none;
}

.sj-shop .sj-coupon__summary:hover {
	color: var(--sj-color-navy);
}

.sj-shop .sj-coupon__marker {
	flex: none;
	font-size: var(--sj-text-2xs);
	color: var(--sj-color-ink-body);
	transition: transform var(--sj-duration-fast) var(--sj-ease);
}

.sj-shop .sj-coupon__disclosure[open] .sj-coupon__marker {
	transform: rotate(180deg);
}

.sj-shop .sj-coupon__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sj-space-3);
	margin-block-start: var(--sj-space-4);
	padding-block-start: var(--sj-space-4);
	border-block-start: var(--sj-border-width) solid var(--sj-color-border);
}

.sj-shop .sj-coupon__field {
	flex: 1 1 var(--sj-space-10);
	max-inline-size: var(--sj-search-width);
	margin-block-end: 0;
}

.sj-shop .sj-coupon__field .sj-field__input {
	inline-size: 100%;
}

/* Matched to the field beside it, rather than taking the button's own padding. */

.sj-shop .sj-coupon__apply {
	flex: none;
	block-size: var(--sj-tap-target);
	min-block-size: var(--sj-tap-target);
	padding-block: 0;
	padding-inline: var(--sj-space-5);
}

/* -------------------------------------------------------------------------
 * Select2
 *
 * WooCommerce replaces the country and state selects with Select2, hiding the
 * real select and drawing its own widget beside it. Styling .sj-field__select
 * therefore does nothing visible: it is applied to an element with
 * .select2-hidden-accessible on it. These rules dress the replacement so it
 * matches the plain fields either side of it.
 *
 * The dropdown panel is appended to the end of the document, outside the
 * .sj-shop wrapper, so those rules cannot take the usual scope. They are keyed
 * to Select2's own classes instead. Select2 only loads on WooCommerce pages, so
 * this cannot reach an Elementor built page.
 * ---------------------------------------------------------------------- */

.sj-shop .select2-container {
	inline-size: 100%;
}

.sj-shop .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	block-size: var(--sj-tap-target);
	padding: 0 var(--sj-space-3);
	border: var(--sj-border-width) solid var(--sj-color-border);
	border-radius: var(--sj-radius-sm);
	background-color: var(--sj-color-surface);
	transition: border-color var(--sj-duration-fast) var(--sj-ease);
}

.sj-shop .select2-container--default .select2-selection--single:hover {
	border-color: var(--sj-color-ink-muted);
}

.sj-shop .select2-container--open .select2-selection--single,
.sj-shop .select2-container--focus .select2-selection--single {
	border-color: var(--sj-color-navy);
}

.sj-shop .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	font-family: var(--sj-font);
	font-size: var(--sj-text-sm);
	line-height: var(--sj-leading-normal);
	letter-spacing: var(--sj-tracking-body);
	color: var(--sj-color-ink);
}

.sj-shop .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--sj-color-ink-body);
}

/**
 * Select2 draws its arrow as a CSS triangle made of borders. Ours is the same
 * chevron the sort control uses, so the two read as one control type.
 */

.sj-shop .select2-container--default .select2-selection--single .select2-selection__arrow {
	inset-block-start: 0;
	inset-inline-end: var(--sj-space-3);
	block-size: 100%;
	inline-size: var(--sj-space-4);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right var(--sj-space-2) center, right var(--sj-space-1) center;
	background-size: var(--sj-border-width-thick) var(--sj-border-width-thick),
		var(--sj-border-width-thick) var(--sj-border-width-thick);
	background-repeat: no-repeat;
	color: var(--sj-color-ink-body);
}

.sj-shop .select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

/* The dropdown panel, which Select2 appends to the end of the document. */

.select2-container--default .select2-dropdown {
	border: var(--sj-border-width) solid var(--sj-color-navy);
	border-radius: var(--sj-radius-sm);
	background-color: var(--sj-color-surface);
	box-shadow: var(--sj-shadow-md);
}

.select2-container--default .select2-search--dropdown {
	padding: var(--sj-space-2);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	min-block-size: var(--sj-tap-target-sm);
	padding: var(--sj-space-2) var(--sj-space-3);
	border: var(--sj-border-width) solid var(--sj-color-border);
	border-radius: var(--sj-radius-sm);
	font-family: var(--sj-font);
	font-size: var(--sj-text-2xs);
	color: var(--sj-color-ink);
}

.select2-container--default .select2-results__option {
	padding: var(--sj-space-2) var(--sj-space-3);
	font-family: var(--sj-font);
	font-size: var(--sj-text-2xs);
	letter-spacing: var(--sj-tracking-none);
	color: var(--sj-color-ink);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--sj-color-surface-tint);
	color: var(--sj-color-navy);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background-color: var(--sj-color-info-bg);
	font-weight: var(--sj-weight-semibold);
	color: var(--sj-color-navy);
}

/* -------------------------------------------------------------------------
 * Payment
 *
 * Rendered by WooCommerce and by each gateway. Styled, never restructured.
 * ---------------------------------------------------------------------- */

.sj-shop #payment {
	margin-block-start: var(--sj-space-5);
	padding-block-start: var(--sj-space-5);
	border-block-start: var(--sj-border-width) solid var(--sj-color-border);
	background-color: transparent;
}

.sj-shop #payment ul.payment_methods {
	display: flex;
	flex-direction: column;
	gap: var(--sj-space-3);
	padding: 0;
	margin: 0 0 var(--sj-space-4);
	border: 0;
	list-style: none;
}

.sj-shop #payment ul.payment_methods li {
	padding: 0;
}

.sj-shop #payment ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: var(--sj-space-2);
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-semibold);
	color: var(--sj-color-ink);
	cursor: pointer;
}

.sj-shop #payment div.payment_box {
	padding: var(--sj-space-3) var(--sj-space-4);
	margin-block-start: var(--sj-space-2);
	border-radius: var(--sj-radius-sm);
	background-color: var(--sj-color-surface-tint);
	font-size: var(--sj-text-3xs);
	line-height: var(--sj-leading-normal);
	color: var(--sj-color-ink-body);
}

.sj-shop #payment div.payment_box::before {
	content: none;
}

.sj-shop .woocommerce-privacy-policy-text {
	font-size: var(--sj-text-3xs);
	line-height: var(--sj-leading-normal);
	color: var(--sj-color-ink-body);
}

.sj-shop .woocommerce-privacy-policy-text a {
	color: var(--sj-color-navy);
	text-decoration: underline;
	text-underline-offset: var(--sj-border-width-thick);
}

.sj-shop #payment .form-row.place-order {
	margin: var(--sj-space-4) 0 0;
	padding: 0;
}

.sj-shop #place_order {
	inline-size: 100%;
	min-block-size: var(--sj-control-height);
	padding-inline: var(--sj-space-5);
	border: var(--sj-border-width) solid var(--sj-color-navy);
	border-radius: var(--sj-radius-sm);
	background-color: var(--sj-color-navy);
	font-family: var(--sj-font);
	font-size: var(--sj-text-sm);
	font-weight: var(--sj-weight-bold);
	letter-spacing: var(--sj-tracking-tight);
	text-transform: none;
	color: var(--sj-color-ink-inverse);
	cursor: pointer;
}

.sj-shop #place_order:hover {
	background-color: var(--sj-color-navy-deep);
	border-color: var(--sj-color-navy-deep);
}

/* -------------------------------------------------------------------------
 * Empty basket
 * ---------------------------------------------------------------------- */

.sj-shop .sj-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sj-space-4);
	max-inline-size: var(--sj-container-narrow);
}

.sj-shop .sj-cart__empty-title {
	margin: 0;
	font-size: var(--sj-text-xl);
	text-transform: none;
	color: var(--sj-color-navy);
}

.sj-shop .sj-cart__empty-text {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Order received
 * ---------------------------------------------------------------------- */

.sj-shop .woocommerce-order {
	padding-block: var(--sj-space-7) var(--sj-section-y);
}

.sj-shop .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sj-space-5);
	padding: var(--sj-space-5);
	margin-block: var(--sj-space-5);
	border: var(--sj-border-width) solid var(--sj-color-border);
	border-radius: var(--sj-radius-lg);
	background-color: var(--sj-color-surface);
	list-style: none;
}

.sj-shop .woocommerce-order-overview li {
	display: flex;
	flex-direction: column;
	gap: var(--sj-space-1);
	font-size: var(--sj-text-3xs);
	letter-spacing: var(--sj-tracking-caps);
	text-transform: uppercase;
	color: var(--sj-color-ink-muted);
}

.sj-shop .woocommerce-order-overview li strong {
	font-size: var(--sj-text-xs);
	letter-spacing: var(--sj-tracking-none);
	text-transform: none;
	color: var(--sj-color-ink);
}