/* ---------------------------------------------------------------------------
 * The booking funnel — cart, checkout, my account.
 *
 * Loaded only on those three screens (see pickleball_enqueue_woocommerce_styles()
 * in inc/setup.php). Presentation only: not one rule changes what the funnel
 * does, which order it collects, or what the deposits plugin calculates.
 *
 * Three surfaces, three reasons this file exists rather than theme.json:
 *
 *  1. The cart is the woocommerce/cart block. Its inner blocks are WooCommerce's
 *     own (wc-block-*), not core blocks, so theme.json has no styles.blocks entry
 *     for any of them.
 *  2. Checkout and My Account are the classic [woocommerce_checkout] and
 *     [woocommerce_my_account] shortcodes. Their markup is a shortcode's output,
 *     which theme.json cannot select at all.
 *  3. Both need media queries, and WP_Theme_JSON::process_blocks_custom_css()
 *     drops at-rules.
 *
 * Every value below is a theme.json token. Nothing new is invented.
 *
 * Specificity note: motion.css owns the field focus ring (border-color success
 * plus a 3px glow) at `input:focus`, which is a weaker selector than the resting
 * rules here. Leaving the focus state to motion.css alone would let these resting
 * borders out-specify it and the ring would never appear, so each focus state is
 * restated here at matching specificity, from the same tokens.
 * ------------------------------------------------------------------------ */

/* --- Shared: form controls ----------------------------------------------
 * One control look across the checkout form, the account forms and the
 * login form. WooCommerce's own stylesheets size these from
 * --wp--preset--font-size--small. That slug is not in this theme's scale —
 * which runs xs / sm / base / md / lg / xl / xxl / xxxl — but it resolves
 * anyway, because WordPress emits its own default size presets alongside a
 * theme's and core's `small` is 13px. So the fallback WooCommerce wrote next
 * to it never runs and the controls come out at a size nobody here chose.
 * These rules set them from a preset the theme actually declares. The same
 * variable is why the block cart's line items needed re-sizing; see the 809
 * section. */

.pickleball-checkout form .form-row input.input-text,
.pickleball-checkout form .form-row input[type="date"],
.pickleball-checkout form .form-row select,
.pickleball-checkout form .form-row textarea.input-text,
.pickleball-account form input.input-text,
.pickleball-account form input[type="text"],
.pickleball-account form input[type="email"],
.pickleball-account form input[type="tel"],
.pickleball-account form input[type="password"],
.pickleball-account form input[type="date"],
.pickleball-account form select,
.pickleball-account form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--chip);
}

.pickleball-checkout form .form-row input.input-text:focus,
.pickleball-checkout form .form-row input[type="date"]:focus,
.pickleball-checkout form .form-row select:focus,
.pickleball-checkout form .form-row textarea.input-text:focus,
.pickleball-account form input.input-text:focus,
.pickleball-account form input[type="text"]:focus,
.pickleball-account form input[type="email"]:focus,
.pickleball-account form input[type="tel"]:focus,
.pickleball-account form input[type="password"]:focus,
.pickleball-account form input[type="date"]:focus,
.pickleball-account form select:focus,
.pickleball-account form textarea:focus {
	border-color: var(--wp--preset--color--success);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp--preset--color--success) 18%, transparent);
	outline: none;
}

/* select2 draws its own box over the native select on the country and state
 * fields, so it needs the same treatment or those two rows look unrelated to
 * the eight around them. */
.pickleball-checkout .select2-container .select2-selection--single,
.pickleball-account .select2-container .select2-selection--single {
	height: auto;
	background-color: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--chip);
}

.pickleball-checkout .select2-container .select2-selection--single .select2-selection__rendered,
.pickleball-account .select2-container .select2-selection--single .select2-selection__rendered {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}

.pickleball-checkout .select2-container--open .select2-selection--single,
.pickleball-account .select2-container--open .select2-selection--single {
	border-color: var(--wp--preset--color--success);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp--preset--color--success) 18%, transparent);
}

.pickleball-checkout form .form-row label,
.pickleball-account form label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.pickleball-checkout form .form-row .required,
.pickleball-account form .required {
	color: var(--wp--preset--color--alert);
	text-decoration: none;
}

/* Checkbox rows — newsletter opt-in, terms, "ship to a different address" —
 * are labels wrapping an input, so the block above would stretch them to full
 * width and stack the text under the box. */
.pickleball-checkout form .form-row label.checkbox,
.pickleball-checkout form .form-row label.woocommerce-form__label-for-checkbox,
.pickleball-account form label.checkbox,
.pickleball-account form label.woocommerce-form__label-for-checkbox {
	display: block;
	position: relative;
	padding-inline-start: 28px;
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1.5;
}

/* A hanging indent rather than a flex row. The terms label holds three
 * children — the box, the wrapped sentence, and a separate `*` span — and as
 * flex items those become three columns, which is how the required marker
 * ends up alone on the far right of a two-line sentence. Taking the box out
 * of flow puts the sentence and its marker back in one text flow. */
.pickleball-checkout form .form-row label.checkbox input[type="checkbox"],
.pickleball-checkout form .form-row label.woocommerce-form__label-for-checkbox input[type="checkbox"],
.pickleball-account form label.checkbox input[type="checkbox"],
.pickleball-account form label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
	position: absolute;
	inset-inline-start: 0;
	top: 0.3em;
	margin: 0;
}

/* --- Shared: the funnel's buttons ---------------------------------------
 * theme.json's elements.button emits its pill onto .wp-element-button and
 * .wp-block-button__link only. Nothing WooCommerce prints carries either
 * class, so the same six token values are restated here. */

/* Element-qualified on purpose. WooCommerce's own rule is `.woocommerce
 * a.button`, which is one element more specific than a bare `.pickleball-account
 * .button` — so the plain-class version loses and every <a class="button"> in
 * the account (View order, Confirm email address, the pagination) keeps
 * WooCommerce's lavender --wc-secondary. Matching its shape and winning on
 * source order is what puts these on the site's pill. */
.pickleball-checkout a.button,
.pickleball-checkout button.button,
.pickleball-checkout input.button,
.pickleball-account a.button,
.pickleball-account button.button,
.pickleball-account input.button,
.pickleball-account a.woocommerce-Button,
.pickleball-account button.woocommerce-Button,
.pickleball-account input.woocommerce-Button,
.pbt-account-addons button.button.pbt-account-addons__submit,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-button:not(.wc-block-components-totals-coupon__button) {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: 12px 22px;
	text-decoration: none;
	cursor: pointer;
}

/* `.alt` is in the list because woocommerce-blocktheme.css fades the alt
 * button to opacity .9 at `.woocommerce a.button.alt:hover`, one class more
 * specific than the rest of this list. */
.pickleball-checkout a.button:hover,
.pickleball-checkout button.button:hover,
.pickleball-checkout input.button:hover,
.pickleball-checkout a.button:focus,
.pickleball-checkout button.button:focus,
.pickleball-checkout a.button.alt:hover,
.pickleball-checkout button.button.alt:hover,
.pickleball-checkout input.button.alt:hover,
.pickleball-account a.button:hover,
.pickleball-account button.button:hover,
.pickleball-account input.button:hover,
.pickleball-account a.button:focus,
.pickleball-account a.button.alt:hover,
.pickleball-account button.button.alt:hover,
.pickleball-account input.button.alt:hover,
.pickleball-account a.woocommerce-Button:hover,
.pickleball-account button.woocommerce-Button:hover,
.pickleball-account input.woocommerce-Button:hover,
.pbt-account-addons button.button.pbt-account-addons__submit:hover,
.pbt-account-addons button.button.pbt-account-addons__submit:focus-visible,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:focus {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--success);
	opacity: 1;
}

/* --- Shared: WooCommerce's notice boxes ---------------------------------
 * The funnel talks to the customer through these: "returning customer?",
 * "have a coupon", "that card was declined".
 *
 * WooCommerce 11 prints them from the block notice component — markup like
 * `.wc-block-components-notice-banner.is-info` — on the classic checkout as
 * well as in the cart block. The legacy `.woocommerce-info` classes are kept
 * below because other WooCommerce screens and third-party plugins still emit
 * them, and a notice the customer cannot read is worse than a notice that is
 * merely the wrong green. */

.pickleball-checkout .wc-block-components-notice-banner,
.pickleball-account .wc-block-components-notice-banner,
.wp-block-woocommerce-cart .wc-block-components-notice-banner,
.pickleball-checkout .woocommerce-info,
.pickleball-checkout .woocommerce-message,
.pickleball-checkout .woocommerce-error,
.pickleball-account .woocommerce-info,
.pickleball-account .woocommerce-message,
.pickleball-account .woocommerce-error {
	border-top: 0;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--wp--custom--radius--chip);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--base);
	list-style: none;
}

/* The banner's leading icon is an inline SVG that WooCommerce fills white and
 * sits on a painted #007cba disc. Both have to go, or a blue circle floats on
 * a green field; fill alone leaves the disc behind. */
.pickleball-checkout .wc-block-components-notice-banner>svg,
.pickleball-account .wc-block-components-notice-banner>svg,
.wp-block-woocommerce-cart .wc-block-components-notice-banner>svg {
	fill: currentColor;
	background-color: transparent;
}

.pickleball-checkout .wc-block-components-notice-banner.is-info,
.pickleball-account .wc-block-components-notice-banner.is-info,
.wp-block-woocommerce-cart .wc-block-components-notice-banner.is-info,
.pickleball-checkout .woocommerce-info,
.pickleball-account .woocommerce-info {
	color: var(--wp--preset--color--calm);
	background-color: var(--wp--preset--color--calm-bg);
	border-color: color-mix(in oklab, var(--wp--preset--color--calm) 30%, transparent);
}

.pickleball-checkout .wc-block-components-notice-banner.is-success,
.pickleball-account .wc-block-components-notice-banner.is-success,
.wp-block-woocommerce-cart .wc-block-components-notice-banner.is-success,
.pickleball-checkout .woocommerce-message,
.pickleball-account .woocommerce-message {
	color: var(--wp--preset--color--success);
	background-color: var(--wp--preset--color--calm-bg);
	border-color: color-mix(in oklab, var(--wp--preset--color--success) 40%, transparent);
}

.pickleball-checkout .wc-block-components-notice-banner.is-error,
.pickleball-checkout .wc-block-components-notice-banner.is-warning,
.pickleball-account .wc-block-components-notice-banner.is-error,
.pickleball-account .wc-block-components-notice-banner.is-warning,
.wp-block-woocommerce-cart .wc-block-components-notice-banner.is-error,
.wp-block-woocommerce-cart .wc-block-components-notice-banner.is-warning,
.pickleball-checkout .woocommerce-error,
.pickleball-account .woocommerce-error {
	color: var(--wp--preset--color--alert);
	background-color: var(--wp--preset--color--alert-bg);
	border-color: color-mix(in oklab, var(--wp--preset--color--alert) 35%, transparent);
}

/* --- 809 Cart: the woocommerce/cart block -------------------------------
 * The block ships its own complete stylesheet; these rules pull its radii,
 * rules and type onto the site's tokens.
 *
 * Type is most of the section, and one variable is the reason. cart.css
 * sizes nearly every string in a line item from
 * `var(--wp--preset--font-size--small, 14px)`, or from an x-small that is
 * itself `calc(small * .875)`. This theme's scale is xs / sm / base / md /
 * lg / xl / xxl / xxxl, so it never declares either slug — but WordPress
 * emits its own default presets alongside a theme's, and core's `small` is
 * 13px. The 14px fallback written into cart.css therefore never runs: the
 * cart resolves against a size this theme did not choose, and the metadata
 * line, whose x-small genuinely is undefined, lands on the literal
 * calc(13px * .875) = 11.375px.
 *
 * Measured against a 19px body that produced a $3,950 trip name at 13px and
 * its room and dates at 11.375px, two rules under a 46px page title and
 * beside a 20px "Estimated total". Nothing was wrong with the totals column
 * or the title; the line items were three steps too small to be read as the
 * most expensive thing on the screen. The rules below put them back on this
 * theme's scale — name at body size, meta one step down and muted, money at
 * body size in Archivo — and leave the totals panel alone.
 *
 * Specificity: cart.css qualifies the row rules with the table element, as
 * `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-…` — (0,3,1),
 * one more class and one more element than the `.wp-block-woocommerce-cart`
 * prefix the rest of this file uses. Each rule below repeats enough of that
 * chain to out-weigh it on its own. No declaration in this section needs
 * !important. */

.wp-block-woocommerce-cart .wc-block-cart-items__header {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* "Product" and "Total" label the columns, they do not head the section.
 * The site's eyebrow, matching the totals title opposite. cart.css sets the
 * weight on the cells rather than the row, so the row alone cannot carry
 * this. */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.wp-block-woocommerce-cart .wc-block-cart-items__row td,
.wp-block-woocommerce-cart .wc-block-cart-items__row {
	border-color: var(--wp--preset--color--line);
}

/* The trip name. Body size, so it reads as the row's subject rather than as
 * a caption, and Archivo 600 to separate it from the meta beneath — but no
 * larger, because the "Estimated total" beside it is 20px and has to stay
 * the biggest number on the page.
 *
 * `max-width: max-content` is cart.css's, and it has to go: it lets the name
 * set the column's width, which on a phone pushes a two-line trip title into
 * one long line and squeezes the price column to nothing. */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.25;
	max-width: none;
	color: var(--wp--preset--color--contrast);
}

/* The same figure appears twice in every row: once under the name as the
 * unit price, once in the total column. Only one of the two can be the loud
 * one, and it is the one in the column headed "Total". */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-muted);
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
}

.wp-block-woocommerce-cart .wc-block-cart-item__wrap .wc-block-components-product-metadata {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-muted);
}

/* Doubled class because that is how cart.css writes it — the x-small rule is
 * `.wc-block-components-product-details.wc-block-components-product-details`
 * and a single class cannot reach it. */
.wp-block-woocommerce-cart .wc-block-components-product-metadata .wc-block-components-product-details.wc-block-components-product-details {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

/* One fact per line. An add-on carries two — what was booked ("Extra nights:
 * 30-31 Jan 2027 · 2 nights before the trip · 1 room (Double)") and which
 * trip it hangs off — and run together inline they read as a single sentence
 * that does not parse. The children here are the per-attribute wrappers;
 * the label and value inside each stay inline, which is cart.css's own
 * arrangement and the right one. */
.wp-block-woocommerce-cart .wc-block-components-product-details > * {
	display: block;
}

/* Running them inline is what the separator was for: WooCommerce closes every
 * detail but the last with a real `<span aria-hidden="true"> / </span>`, not
 * a pseudo-element. Stacked, it dangles at the end of each line. It is
 * already hidden from assistive technology, so removing it takes nothing
 * with it. */
.wp-block-woocommerce-cart .wc-block-components-product-details > * > span[aria-hidden="true"]:last-child {
	display: none;
}

.wp-block-woocommerce-cart .wc-block-components-product-details__name {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.wp-block-woocommerce-cart .wc-block-cart-item__image img {
	border-radius: var(--wp--custom--radius--chip);
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-muted);
}

/* The quantity stepper and the coupon field are the only two controls in the
 * block cart; both are boxes, so both take the chip radius. */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector,
.wp-block-woocommerce-cart .wc-block-components-text-input input[type="text"],
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__input input[type="text"] {
	border-radius: var(--wp--custom--radius--chip);
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--line);
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector::after {
	border-radius: var(--wp--custom--radius--chip);
}

/* cart.css sizes the stepper from the same 13px `small` and names no family
 * at all, so the one number on this screen the customer can edit was 13px
 * Arial on a page set in Karla. The 16px floor is forms.css's, for its
 * reason: below it iOS zooms the page when the field takes focus, and a
 * cart that jumps on tap looks broken. */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	font-family: var(--wp--preset--font-family--karla);
	font-size: max(16px, var(--wp--preset--font-size--base));
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--contrast-muted);
}

/* The totals column reads as one panel rather than three stacked rules. */
.wp-block-woocommerce-cart .wc-block-components-sidebar .wc-block-components-totals-wrapper {
	border-color: var(--wp--preset--color--line);
}

/* The summary rows — coupon toggle, subtotal, fees — come in on the same
 * 13px `small` as the line items did. The footer item below keeps its own
 * 20px and stays the loudest thing in the column. */
.wp-block-woocommerce-cart .wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
}

.wp-block-woocommerce-cart .wc-block-cart__totals-title {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--contrast-muted);
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* The container class is here to win, not to scope: the shared button rule
 * above sets 15px at the same weight as the plain
 * `.wp-block-woocommerce-cart .wc-block-cart__submit-button`, and equal
 * specificity plus source order was not settling it in the block cart's
 * favour. One more class and the element name decide it outright. */
.wp-block-woocommerce-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-container button.wc-block-cart__submit-button {
	width: 100%;
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--base);
}

/* The deposits plugin renders the deposit choice and the payment schedule
 * into the block cart's totals column. Only its box is touched: the amounts
 * keep the plugin's own colours, because a deposit figure is the single most
 * consequential number on this screen and it is not worth restyling to match
 * a palette. */
.wp-block-woocommerce-cart .awcdp-blocks-container,
.wp-block-woocommerce-cart .awcdp-blocks-deposit-slider {
	border-radius: var(--wp--custom--radius--chip);
}

.wp-block-woocommerce-cart .awcdp-option {
	border-radius: var(--wp--custom--radius--chip);
}

/* Empty cart: the heading core prints carries WooCommerce's icon class. */
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
	font-family: var(--wp--preset--font-family--archivo);
}

/* --- 810 Checkout: the classic [woocommerce_checkout] form ---------------
 * Page 810 is a `wp-block-group.pickleball-checkout` wrapping the
 * [woocommerce_checkout] shortcode, so everything below the wrapper is
 * WooCommerce's own markup: a `form.checkout` with three element children —
 * #customer_details, #order_review_heading and #order_review — plus whatever
 * the deposits plugin and the checkout field editor add.
 *
 * The page it sits on is this theme's templates/page-checkout.html, which
 * exists only to replace WooCommerce's. Woo's page-checkout template prints
 * a stripped "distraction-free" header from its own bundled theme, no page
 * title, and no footer at all. The customer reaches this screen from a cart
 * that has the site's header, an h1 and the site's footer; losing all three
 * at the last step reads as having been handed to a different company. The
 * theme's copy is Woo's page-cart template with the checkout's content
 * wrapper — same header, same h1, same footer, so cart and checkout are
 * visibly two steps of one thing.
 *
 * Two columns on desktop, one on mobile. The receipt is NOT sticky, and that
 * is a decision rather than an omission: with the deposits plugin's payment
 * panel and schedule inside it the receipt is routinely taller than the
 * viewport, and a sticky box taller than its scrollport pins its own top and
 * puts everything below — here, the terms checkbox and Place order — out of
 * reach for good. There is no CSS conditional on element height, so the
 * choice is sticky-and-sometimes-broken or not sticky. It is separated
 * instead: a raised card with the card radius, a hairline and the card
 * shadow, which is the same object the trip pages use for their booking
 * panel. */

.pickleball-checkout {
	/* The receipt's width, named once because the coupon and login notices
	 * above the form have to line up with the field column and can only work
	 * that out by subtracting it. */
	--pickleball-checkout-aside: 28rem;

	/* The money column inside the receipt. A ceiling, and only a ceiling.
	 *
	 * Capped rather than left to max-content because the deposits plugin
	 * prints a payment schedule under the amount, and its longest line on
	 * this site is "$1,660.00 due 10/18/2026 (40%)" (measured on a Dinking
	 * Dutch Apr 2027 line, deposit 20% + two instalments of 40%). An auto
	 * track sized to that string takes the money past 170px of a 448px
	 * receipt and leaves the trip's own name wrapping four words to a line.
	 *
	 * It was written `min(9rem, 42%)` with a comment calling the percentage
	 * "the floor on a phone". min() returns the SMALLER of the two, so the
	 * percentage was a second ceiling, and on a 390px viewport it was the
	 * one that bound: measured, the money track took 132.7px and the name
	 * track 167.3px. 167px is not a name column — the trip's name, its
	 * quantity and two variation rows all wrap inside it, and the receipt
	 * pays for it in height.
	 *
	 * The percentage is gone rather than turned into a max(), because a
	 * floor would have made the money column wider still and squeezed the
	 * name further. A phone does not get a two-track line item at all; see
	 * the stacking rule on tr.cart_item below. At every width that does keep
	 * two tracks the receipt is 28rem (the aside) or wider, and 9rem is the
	 * only cap that has to hold. */
	--pickleball-checkout-money: 9rem;

	margin-top: var(--wp--preset--spacing--40);
}

/* woocommerce-blocktheme.css caps the whole funnel at
 * `.woocommerce-checkout main .woocommerce { max-width: 1000px }` — (0,2,1)
 * — with no auto margins, so inside a 1280px alignwide block the checkout
 * sat flush left and read as a column that had slipped off centre. One class
 * more specific wins it without !important.
 *
 * 75rem is chosen backwards from the field column: 75rem less the 28rem
 * receipt less the spacing-60 gutter leaves 680px, which is this theme's
 * content measure to the pixel. A billing address ends up exactly as wide as
 * a paragraph on /about/. */
.woocommerce-checkout .pickleball-checkout > .woocommerce {
	max-width: 75rem;
	margin-inline: auto;
}

/* Same measure for the title, which core prints outside the block wrapper
 * and blocktheme.css caps at the same left-aligned 1000px. */
.woocommerce-checkout .wp-block-post-title {
	max-width: 75rem;
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* "Billing details" and "Your order" are the two section heads under a 46px
 * page title. At the xl this file used before the title existed they were
 * 30px and competed with it; lg is the step forms.css already gives a
 * Gravity section title, and the pair now reads 46 / 24 / 19. */
.pickleball-checkout form.checkout h3,
.pickleball-checkout form.checkout #order_review_heading {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
}

.pickleball-checkout #pbt-checkout-travellers {
	margin-block: var(--wp--preset--spacing--30);
}

.pickleball-checkout #pbt-checkout-travellers fieldset {
	min-width: 0;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.pickleball-checkout #pbt-checkout-travellers legend {
	padding-inline: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.pickleball-checkout form.checkout .col2-set .col-1,
.pickleball-checkout form.checkout .col2-set .col-2 {
	float: none;
	width: auto;
}

.pickleball-checkout form.checkout .col2-set .col-2:not(:empty) {
	margin-top: var(--wp--preset--spacing--40);
}

/* The rows. WooCommerce floats .form-row-first left and .form-row-last right
 * and expects the two to be DOM neighbours; on this site the checkout field
 * editor does not guarantee it, and a full-width row landing between a pair
 * of floats leaves them straddling it at different heights. Every row is
 * therefore reset to full width and the pairing is put back below, by a
 * selector that can only match when the two really are neighbours. */
.pickleball-checkout form .form-row {
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.pickleball-checkout form .form-row-first,
.pickleball-checkout form .form-row-last,
.pickleball-checkout form .form-row-wide {
	float: none;
	width: 100%;
	clear: both;
}

/* Two-up pairs, without the float bug. The field wrapper becomes a two-track
 * grid in which every row spans both tracks by default; only a
 * .form-row-first that is immediately followed by a .form-row-last drops to
 * one track, and its neighbour takes the other. :has() is what makes that
 * expressible — the pairing is decided by the DOM as rendered, so a field
 * order that separates the two (the case that forced the single column
 * before) simply leaves both full width instead of breaking the layout.
 *
 * As the fields stand today this gives First / Last on one row and
 * Town / State on another, and leaves country, street, apartment, ZIP,
 * phone and email full width. */
@media (min-width: 560px) {
	.pickleball-checkout .woocommerce-billing-fields__field-wrapper,
	.pickleball-checkout .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--20);
	}

	.pickleball-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
	.pickleball-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
		grid-column: 1 / -1;
	}

	.pickleball-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first:has(+ .form-row-last),
	.pickleball-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first:has(+ .form-row-last) {
		grid-column: 1;
	}

	.pickleball-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first:has(+ .form-row-last) + .form-row-last,
	.pickleball-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first:has(+ .form-row-last) + .form-row-last {
		grid-column: 2;
	}
}

.pickleball-checkout .woocommerce-billing-fields,
.pickleball-checkout .woocommerce-shipping-fields,
.pickleball-checkout .woocommerce-additional-fields {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* --- The receipt -------------------------------------------------------- */

.pickleball-checkout #order_review {
	background-color: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	padding: var(--wp--preset--spacing--20);
}

@media (min-width: 600px) {
	.pickleball-checkout #order_review {
		padding: var(--wp--preset--spacing--30);
	}
}

/* The review table stops being a table.
 *
 * Its widest line is an add-on — "Extra nights: 30-31 Jan 2027 · 2 nights
 * before the trip · 1 room (Double)" plus the trip it belongs to — and in a
 * receipt 400px wide, automatic table layout gave the name column 192px and
 * the amount column 108px, which ragged the add-on into six short lines and
 * still left the deposit breakdown stacked one word per line beside it.
 * Laid out as grid rows the name track simply takes what is left after the
 * amount, and the amount is never wider than the money in it.
 *
 * Every selector is written with child combinators, and that matters: the
 * deposits plugin nests a real table — its payment schedule — inside one of
 * these rows, and it has three columns and must stay a table. Descendant
 * selectors would flatten it too. */
.pickleball-checkout #order_review > table.shop_table,
.pickleball-checkout #order_review > table.shop_table > thead,
.pickleball-checkout #order_review > table.shop_table > tbody,
.pickleball-checkout #order_review > table.shop_table > tfoot {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.pickleball-checkout #order_review > table.shop_table > * > tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--pickleball-checkout-money));
	column-gap: var(--wp--preset--spacing--20);
	align-items: baseline;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* The deposits plugin's two rows carry a single full-width cell. */
.pickleball-checkout #order_review > table.shop_table > * > tr:has(> :only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.pickleball-checkout #order_review > table.shop_table > * > tr:last-child {
	border-bottom: 0;
}

.pickleball-checkout #order_review > table.shop_table > * > tr > th,
.pickleball-checkout #order_review > table.shop_table > * > tr > td {
	display: block;
	width: auto;
	padding: var(--wp--preset--spacing--20) 0;
	border: 0;
	text-align: left;
}

.pickleball-checkout #order_review > table.shop_table > * > tr > :last-child:not(:only-child) {
	text-align: right;
}

.pickleball-checkout #order_review > table.shop_table > thead > tr > th {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

/* A line item: what was booked, at body size, and what it costs.
 *
 * overflow-wrap belongs on this cell and nowhere wider. An add-on's title is
 * a sentence — "Extra Hotel Night 30-31 Jan 2027 · 2 nights before the trip ·
 * 1 room (Double)" — and needs to break inside a word in a 230px column.
 * Set on the shared cell rule instead, it inherited into the deposits
 * plugin's nested schedule table two rows down and broke "$2,370.00" across
 * two lines, which in a receipt is worse than any amount of ragging. */
.pickleball-checkout #order_review .cart_item > .product-name {
	overflow-wrap: anywhere;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.pickleball-checkout #order_review .cart_item > .product-name .product-quantity {
	font-weight: 400;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast-muted);
}

/* The variation list. WooCommerce floats the dt and leaves the dd a block,
 * so "For:" ended on one line and the trip it referred to on the next,
 * indented under nothing. Inline dt and dd read as the sentence they are,
 * and the empty block after each dd is what starts the next pair on its own
 * line without a float to clear. */
.pickleball-checkout #order_review .cart_item dl.variation {
	display: block;
	margin: 0.45rem 0 0;
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-checkout #order_review .cart_item dl.variation dt {
	display: inline;
	float: none;
	clear: none;
	margin: 0 0.3em 0 0;
	padding: 0;
	font-weight: 600;
}

.pickleball-checkout #order_review .cart_item dl.variation dd {
	display: inline;
	margin: 0;
	padding: 0;
}

.pickleball-checkout #order_review .cart_item dl.variation dd p {
	display: inline;
	margin: 0;
}

/* THE ADD-ON DESCRIPTOR IS PRINTED TWICE, SO ONE COPY IS HIDDEN HERE.
 *
 * CartAddons appends a <span class="pbt-addons__line"> to the add-on's
 * product NAME, and WooCommerce separately renders the same string as
 * dl.variation ("Extra nights: 14-15 Apr 2027 · 2 nights before the trip ·
 * 1 room (Double)"). Both land in the same cell. The span is styled in the
 * plugin only under `.pbt-addons`, which does not match inside a receipt, so
 * it inherited this section's 19px/600 and shouted the line twice.
 *
 * The dl.variation copy is the one kept: it carries a LABEL ("Extra
 * nights:"), it is what WooCommerce renders for every other product's
 * options, and it is already styled as meta here. The span is the duplicate,
 * so the span goes.
 *
 * Hidden rather than removed in PHP because the span is right where it is
 * rendered — on the trip page and in the cart it is the only copy, and a
 * filter that stripped it would take it from those too. */
.pickleball-checkout #order_review .cart_item .pbt-addons__line {
	display: none;
}

.pickleball-checkout #order_review .cart_item dl.variation dd::after {
	content: "";
	display: block;
	height: 0.3em;
}

/* THE FIRST FIGURE IN THIS CELL IS NOT ALWAYS THE PRICE, AND PROMOTING IT
 * PUT THE WRONG NUMBER ON THE PAGE A CUSTOMER PAYS FROM.
 *
 * On a line with a payment plan the deposits plugin does not append to the
 * amount column — it REPLACES what is in it. Measured on a real checkout
 * (Dinking Dutch, trip $4,150 + 2 extra nights $240, Subtotal $4,390) the
 * trip's cell contains:
 *
 *     <span class="woocommerce-Price-amount">$830.00</span>   <- the DEPOSIT
 *     <br>
 *     <small class="…-departure-payment-schedule">Departure: …
 *         Due today: $830.00 (20%) … $1,660.00 due … $1,660.00 due …</small>
 *
 * The trip's own $4,150 is not in the cell at all. A `:first-child` rule
 * promoted that $830.00 to 19px/600 under a column headed "Subtotal", so the
 * receipt showed the deposit as though it were the line price — and the four
 * promoted figures across the rows summed to nothing that appeared anywhere
 * on the page.
 *
 * `:only-child` is the fix, and it is structural rather than a guess at a
 * vendor class name. A line with a schedule has three element children (the
 * amount, a <br>, the schedule); a line PAID IN FULL — every add-on is,
 * because extras bought after checkout are never on a plan — has exactly one.
 * So the amount is promoted precisely when it IS the line's whole price, and
 * a cell carrying a schedule stays uniform, reading as the block of schedule
 * text it actually is. Nothing masquerades as a price.
 *
 * The money the customer owes today is not lost by this: the tfoot carries
 * "Due Today" and "Future Payments" as their own rows. */
.pickleball-checkout #order_review .cart_item > .product-total {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-checkout #order_review .cart_item > .product-total > .woocommerce-Price-amount:only-child {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
}

.pickleball-checkout #order_review > table.shop_table > tfoot > tr > th {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-checkout #order_review > table.shop_table > tfoot > tr > td {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
}

/* The figure being agreed to. Same weight and the same step above its
 * neighbours as "Estimated total" has in the cart, so the two screens end on
 * the same note. The deposits plugin's "Due Today" and "Future Payments"
 * sit under it at the base size: they explain the total, they do not
 * replace it. */
.pickleball-checkout #order_review > table.shop_table > tfoot > tr.order-total > th,
.pickleball-checkout #order_review > table.shop_table > tfoot > tr.order-total > td {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* The deposits plugin's payment-option panel is one of those full-width
 * rows. Its own colours — the rule down its left edge, the green on the
 * chosen amount — are left exactly as it ships them: the deposit figure is
 * the number this page exists to state, the customer has already seen this
 * panel in the cart one step earlier, and recolouring it to match a palette
 * would be the one restyling with a price attached.
 *
 * Only the box is brought inside the card. The plugin prints
 * `width: 100%; padding: 15px` inline with a 4px left border, and nothing
 * else on this page gives it a box-sizing, so it laid out 34px wider than
 * the card around it and its right edge hung outside the receipt. */
.pickleball-checkout #order_review .awcdp-checkout-departure-options,
.pickleball-checkout #order_review .awcdp-checkout-departure-options * {
	box-sizing: border-box;
	max-width: 100%;
}

.pickleball-checkout .awcdp-payment-option-wrapper,
.pickleball-checkout [class*="awcdp"] table {
	border-radius: var(--wp--custom--radius--chip);
}

/* --- Payment and the last button ---------------------------------------- */

.pickleball-checkout #payment {
	background-color: transparent;
	border-radius: 0;
	margin-top: var(--wp--preset--spacing--30);
}

.pickleball-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	list-style: none;
}

/* Stripe is the only gateway this site takes and it is not active locally,
 * so this list renders empty in development and as one radio in production.
 * An empty list must not leave a rule floating above the terms. */
.pickleball-checkout #payment ul.payment_methods:empty {
	border-bottom: 0;
}

.pickleball-checkout #payment ul.payment_methods > li {
	margin: 0 0 var(--wp--preset--spacing--20);
	list-style: none;
}

.pickleball-checkout #payment ul.payment_methods > li:last-child {
	margin-bottom: 0;
}

.pickleball-checkout #payment div.form-row {
	margin: 0;
	padding: var(--wp--preset--spacing--30) 0 0;
}

.pickleball-checkout #payment .payment_box {
	background-color: var(--wp--preset--color--base-sunken);
	border-radius: var(--wp--custom--radius--chip);
}

.pickleball-checkout #payment .payment_box::before {
	border-bottom-color: var(--wp--preset--color--base-sunken);
}

.pickleball-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--wp--preset--spacing--20);
}

.pickleball-checkout .woocommerce-privacy-policy-text p {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-muted);
}

/* Place order — the funnel's one irreversible button. Same pill as every
 * other button on the site, sized up on the spacing scale because it is the
 * last thing the customer presses. */
.pickleball-checkout #place_order,
.pickleball-checkout #payment .form-row #place_order {
	display: block;
	width: 100%;
	float: none;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}

.pickleball-checkout #place_order:hover,
.pickleball-checkout #place_order:focus {
	background-color: var(--wp--preset--color--success);
	color: var(--wp--preset--color--base);
	opacity: 1;
}

/* --- Two columns -------------------------------------------------------- */

/* Fields left, receipt right, the same shape as the block cart one step
 * earlier in the funnel. The form has exactly three element children that
 * are meant to be seen — #customer_details, #order_review_heading and
 * #order_review — plus the order-attribution hidden inputs, so every child
 * gets a full-width default first and only those three are placed. Anything
 * a plugin adds later lands in its own full-width row rather than in a cell
 * it was never meant for. */
@media (min-width: 900px) {
	.pickleball-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--pickleball-checkout-aside));
		column-gap: var(--wp--preset--spacing--60);
		align-items: start;
	}

	.pickleball-checkout form.checkout > * {
		grid-column: 1 / -1;
	}

	/* ROW 1 IS RESERVED FOR THE ERRORS, AND THAT IS THE WHOLE REASON THE
	 * OTHER THREE START AT ROW 2.
	 *
	 * WooCommerce's checkout.js does not append its validation errors — it
	 * PREPENDS them, as the first child of form.checkout (submit_error(), and
	 * update_order_review does the same). With the three visible children
	 * pinned to rows 1 and 2, both rows were full, so the DOM-first notice was
	 * auto-placed into row 3: measured at y=2265 against a form starting at
	 * y=359, i.e. below the entire receipt. scroll_to_notices() then animated
	 * the customer down to it, away from every field they had to correct.
	 *
	 * An empty row 1 costs nothing here because this grid sets column-gap
	 * only; with no notice present the row collapses to zero.
	 *
	 * scroll-margin-top keeps that scroll from parking the notice underneath
	 * the sticky site header. */
	.pickleball-checkout form.checkout > .woocommerce-NoticeGroup,
	.pickleball-checkout form.checkout > .woocommerce-error,
	.pickleball-checkout form.checkout > .woocommerce-message,
	.pickleball-checkout form.checkout > .woocommerce-info {
		grid-column: 1;
		grid-row: 1;
		scroll-margin-top: calc(var(--wp-admin--admin-bar--position-offset, 0px) + 110px);
	}

	.pickleball-checkout form.checkout > #customer_details {
		grid-column: 1;
		grid-row: 2 / span 2;
	}

	.pickleball-checkout form.checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 2;
	}

	.pickleball-checkout form.checkout > #order_review {
		grid-column: 2;
		grid-row: 3;
	}

	/* The login and coupon toggles are siblings above the form, outside the
	 * grid, so they have to be told where the field column ends. Subtracting
	 * the receipt and the gutter is exact at every width; a repeated 44rem
	 * would only be right at the widest one. */
	.pickleball-checkout .woocommerce-form-login-toggle,
	.pickleball-checkout .woocommerce-form-coupon-toggle,
	.pickleball-checkout form.woocommerce-form-login,
	.pickleball-checkout form.checkout_coupon {
		max-width: calc(100% - var(--pickleball-checkout-aside) - var(--wp--preset--spacing--60));
	}
}

.pickleball-checkout .woocommerce-form-coupon-toggle {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* --- Order received and order history: the purchase receipt --------------
 * The deposits plugin reuses the order-details table on the thank-you page
 * and prints its own payment schedule immediately after it. Keep both in the
 * same visual language as the checkout receipt without changing order data. */

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) .woocommerce-order-details__title,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) .awcdp_deposits_summary_title {
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary {
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--base-raised);
	box-shadow: var(--wp--custom--shadow--card);
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details th,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details td,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary th,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
	text-align: left;
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details thead th,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary thead th {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
	background: var(--wp--preset--color--base-sunken);
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details thead th:first-child,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary thead th:first-child {
	border-top-left-radius: var(--wp--custom--radius--card);
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details thead th:last-child,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary thead th:last-child {
	border-top-right-radius: var(--wp--custom--radius--card);
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details tbody tr:last-child td,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary tbody tr:last-child td,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details tfoot tr:last-child th,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details .product-name > a {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 700;
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details .product-quantity {
	margin-left: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details .wc-item-meta {
	margin: var(--wp--preset--spacing--10) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
	color: var(--wp--preset--color--contrast-muted);
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details .wc-item-meta li {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--10);
	margin: var(--wp--preset--spacing--10) 0 0;
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details .wc-item-meta p {
	display: inline;
	margin: 0;
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details .product-total,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details tfoot td,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary th:nth-child(3),
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td:nth-child(3) {
	text-align: right;
	white-space: nowrap;
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details tfoot th,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details tfoot td {
	background: var(--wp--preset--color--base-sunken);
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details tfoot th {
	font-weight: 600;
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details tfoot tr:last-child th {
	border-bottom-left-radius: var(--wp--custom--radius--card);
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom-right-radius: var(--wp--custom--radius--card);
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details a,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary a {
	color: var(--wp--preset--color--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details a:hover,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details a:focus-visible,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary a:hover,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary a:focus-visible {
	color: var(--wp--preset--color--success);
	text-decoration-thickness: 2px;
}

/* Payment actions are still buttons; underline their labels while retaining
 * the primary button colours and focus treatment used elsewhere in the funnel. */
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary a.button.pay {
	display: inline-block;
	padding: 12px 22px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	white-space: normal;
}

:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary a.button.pay:hover,
:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary a.button.pay:focus-visible {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--success);
}

@media (max-width: 900px) {
	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details th,
	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details td {
		padding: var(--wp--preset--spacing--20);
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.woocommerce-table--order-details .product-total {
		width: 30%;
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary,
	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary tbody {
		display: block;
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
		padding: var(--wp--preset--spacing--20);
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary tbody tr:last-child {
		border-bottom: 0;
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td {
		display: block;
		min-width: 0;
		padding: 0;
		border: 0;
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td::before {
		display: block;
		font-family: var(--wp--preset--font-family--archivo);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--wp--preset--color--contrast-muted);
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td:nth-child(1)::before {
		content: "ID";
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td:nth-child(2) {
		grid-column: 1;
		grid-row: 2;
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td:nth-child(2)::before {
		content: "Payment";
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td:nth-child(3) {
		grid-column: 2;
		grid-row: 2;
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td:nth-child(3)::before {
		content: "Amount";
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td:nth-child(4) {
		grid-column: 2;
		grid-row: 1;
		text-align: right;
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td:nth-child(4)::before {
		content: "Status";
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td:nth-child(5) {
		grid-column: 1 / -1;
		grid-row: 3;
		padding-top: var(--wp--preset--spacing--10);
	}

	:is(body.woocommerce-order-received, .pickleball-account .woocommerce) table.awcdp_deposits_summary td:nth-child(5):not(:has(a)) {
		display: none;
	}
}

/* --- 811 My Account ------------------------------------------------------ */

.pickleball-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	margin-bottom: var(--wp--preset--spacing--40);
}

.pickleball-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pickleball-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	border: 0;
}

/* The tabs are the site's chip: pill, Archivo, a hairline that fills in on
 * the current page. */
.pickleball-account .woocommerce-MyAccount-navigation ul li a {
	display: inline-block;
	padding: 10px 18px;
	font-family: var(--wp--preset--font-family--karla);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
}

.pickleball-account .woocommerce-MyAccount-navigation ul li a:hover,
.pickleball-account .woocommerce-MyAccount-navigation ul li a:focus {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--success);
	border-color: var(--wp--preset--color--success);
}

.pickleball-account .woocommerce-MyAccount-navigation ul li.is-active a,
.pickleball-account .woocommerce-MyAccount-navigation ul li a[aria-current="page"] {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.pickleball-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.pickleball-account .woocommerce-MyAccount-content h2,
.pickleball-account .woocommerce-MyAccount-content h3 {
	margin-top: var(--wp--preset--spacing--40);
}

.pickleball-account .woocommerce-MyAccount-content> :first-child {
	margin-top: 0;
}

/* Orders, downloads, addresses and the GravityView liability list are all
 * tables of the customer's own records. One table look for all of them.
 *
 * Both wrappers are named on every rule because the two shortcodes sit in
 * sibling groups on the page, not nested: [woocommerce_my_account] renders
 * inside .pickleball-account and [gravityview] inside .pickleball-account-forms,
 * so a `.pickleball-account .gv-table-view` would never match anything.
 * GravityView also puts .gv-table-view on the wrapping div as well as on the
 * table, which is why the table rules below say `table.gv-table-view`. */
.pickleball-account table.shop_table,
.pickleball-account table.woocommerce-orders-table,
.pickleball-account table.woocommerce-MyAccount-downloads,
.pickleball-account-forms table.gv-table-view {
	width: 100%;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	margin-bottom: var(--wp--preset--spacing--40);
}

.pickleball-account table.shop_table th,
.pickleball-account table.shop_table td,
.pickleball-account-forms table.gv-table-view th,
.pickleball-account-forms table.gv-table-view td {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: middle;
}

.pickleball-account table.shop_table thead th,
.pickleball-account-forms table.gv-table-view thead th {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
	background-color: transparent;
}

/* The liability list has as many columns as the form has fields and no
 * responsive fallback of its own, so it scrolls inside its own box rather than
 * pushing the page sideways.
 *
 * WooCommerce's account tables are deliberately left out. They already stack
 * into label/value rows below 768px via woocommerce-smallscreen.css, so they
 * never need to scroll — and making .woocommerce-MyAccount-content a scroll
 * container would compute overflow-y to auto as well and clip the country
 * dropdown on the edit-address form. */
.pickleball-account-forms .gv-table-container {
	overflow-x: auto;
}

.pickleball-account .woocommerce-Address,
.pickleball-account .woocommerce-Address-title {
	margin-bottom: var(--wp--preset--spacing--20);
}

.pickleball-account .woocommerce-Address address {
	padding: var(--wp--preset--spacing--30);
	font-style: normal;
	background-color: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

/* Login and register: the only two forms a logged-out visitor sees here. */
.pickleball-account .woocommerce-form-login,
.pickleball-account .woocommerce-form-register {
	max-width: 34rem;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.pickleball-account .woocommerce-form-row {
	margin-bottom: var(--wp--preset--spacing--20);
}

.pickleball-account-forms {
	max-width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
	padding-top: 1em;
}


@media (min-width: 900px) {
	.pickleball-account .woocommerce-MyAccount-navigation ul {
		gap: 12px;
	}
}

/* --- 811 My Account, logged out: the sign-in screen ----------------------
 *
 * Everything in this block is scoped to `body:not(.logged-in)` on purpose.
 * /my-account/ is two different screens behind one URL: a sign-in form for a
 * visitor, and a dashboard with a navigation rail for a customer. Centring a
 * narrow column is right for the first and would wreck the second, and
 * WordPress's own `logged-in` body class is the thing that already knows which
 * one is being rendered.
 * ------------------------------------------------------------------------- */

/* The form column. 460px is the measure the fields want — wider and the two
 * inputs stretch into something that reads like a checkout. */
body:not(.logged-in) .pickleball-account .woocommerce {
	max-width: 460px;
	margin-inline: auto;
}

body:not(.logged-in) .pickleball-account .woocommerce-form-login {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
}

/* WooCommerce prints <h2>Login</h2> above the form. Hidden rather than deleted:
 * removing it outright would leave the page with no heading at all, and
 * wp-login.php solves the same problem the same way — core's own login screen
 * carries an <h1 class="screen-reader-text">. A template override would be the
 * alternative, and owning a copy of form-login.php to delete one line is a
 * maintenance cost with no return. */
body:not(.logged-in) .pickleball-account .woocommerce > h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The liability forms section is a heading plus [gravityview id='6414'] in the
 * page's own content. GravityView renders nothing for a visitor who is not
 * logged in, so logged out the heading sits alone above empty space. The
 * section stays in the content — a signed-in customer still needs it — and is
 * simply not shown to someone who has nothing in it. */
body:not(.logged-in) .pickleball-account-forms {
	display: none;
}

/* The fields.
 *
 * `.pickleball-account form input.input-text` already exists above and was
 * meant to style these, but it loses: WooCommerce's own stylesheet ships
 * `.woocommerce form .form-row .input-text` — three classes to the theme rule's
 * two — so the account fields have been rendering with WooCommerce's
 * `rgba(32,7,7,.8)` border and 4px radius all along, not the theme's line
 * colour and chip radius. `.pickleball-checkout` already carries `.form-row`
 * for exactly this reason; the account selector never did.
 *
 * Fixed here only for the logged-out form, because that is the screen in hand
 * and the logged-in account forms could not be checked in the same pass. The
 * same one-word fix applies to the rule above whenever those are looked at.
 *
 * The 16px floor is the iOS one — anything smaller and the browser zooms the
 * page on focus. */
body:not(.logged-in) .pickleball-account .woocommerce-form-login .form-row .input-text,
body:not(.logged-in) .pickleball-account .woocommerce-form-login .form-row input[type="password"] {
	padding: 12px var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--karla);
	font-size: max(16px, var(--wp--preset--font-size--base));
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);

	/* True white, not base-raised: the card behind it is base-raised, and a
	 * field has to read as a hole in that card rather than as part of it. */
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--chip);
}

body:not(.logged-in) .pickleball-account .woocommerce-form-login .form-row .input-text:focus,
body:not(.logged-in) .pickleball-account .woocommerce-form-login .form-row input[type="password"]:focus {
	border-color: var(--wp--preset--color--success);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp--preset--color--success) 18%, transparent);
	outline: none;
}

body:not(.logged-in) .pickleball-account .woocommerce-form-login label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--contrast-muted);
}

body:not(.logged-in) .pickleball-account .woocommerce-form-login input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--wp--preset--color--primary);
	flex: none;
}

/* --- The form's own rows ------------------------------------------------- */

body:not(.logged-in) .pickleball-account .woocommerce-form-login .form-row {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Remember me and the submit share one row in WooCommerce's template, with the
 * button floated. Stacked instead, so the button is full width and the
 * checkbox sits on its own line — the same shape as wp-login.php. */
body:not(.logged-in) .pickleball-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
}

body:not(.logged-in) .pickleball-account .woocommerce-form-login__rememberme {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-muted);
}

body:not(.logged-in) .pickleball-account .woocommerce-form-login__submit {
	float: none;
	width: 100%;
	margin: 0;
}

body:not(.logged-in) .pickleball-account .woocommerce-LostPassword {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
}

/* --- The Google button --------------------------------------------------- */

/* The same treatment wp-login.php gets in login.css: the theme's secondary
 * button, with an "or" rule above it carrying the label on the card's ground.
 * The two screens are the same decision, so they should not look like two
 * different ones. */

body:not(.logged-in) .pickleball-account .wp_google_login {
	position: relative;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

body:not(.logged-in) .pickleball-account .wp_google_login::before {
	content: var(--pbt-login-or, "or");
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 10px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
	background-color: var(--wp--preset--color--base-raised);
}

body:not(.logged-in) .pickleball-account .wp_google_login__button-container {
	margin: 0;
}

body:not(.logged-in) .pickleball-account .wp_google_login__button {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 22px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	transition:
		background-color var(--wp--custom--duration--press, 160ms) var(--wp--custom--ease--out, ease),
		border-color var(--wp--custom--duration--press, 160ms) var(--wp--custom--ease--out, ease);
}

body:not(.logged-in) .pickleball-account .wp_google_login__button:hover,
body:not(.logged-in) .pickleball-account .wp_google_login__button:focus {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base-sunken);
	border-color: color-mix(in oklab, var(--wp--preset--color--contrast) 24%, transparent);
}

body:not(.logged-in) .pickleball-account .wp_google_login__google-icon {
	width: 20px;
	height: 20px;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	body:not(.logged-in) .pickleball-account .wp_google_login__button {
		transition: none;
	}
}

/* --- 811 My Account, logged out: the register form -----------------------
 *
 * Switching woocommerce_enable_myaccount_registration on — see
 * inc/registration.php for why that option and deliberately not
 * users_can_register — changes the shape of this screen rather than adding to
 * it. templates/myaccount/form-login.php stops printing one form and starts
 * printing two, wrapped in `div.u-columns.col2-set#customer_login` holding a
 * `.u-column1` / `.u-column2` pair, with the two <h2>s moved inside those
 * columns. Not one selector in the block above had ever seen that markup, so
 * three of its rules quietly stopped doing their job. Each repair below names
 * the rule it repairs.
 * ------------------------------------------------------------------------- */

/* (b) The wrapper's measure. 460px is what ONE form wants and it crushes two:
 * #customer_login inherits the clamp and WooCommerce's `.col2-set .col-1
 * { width:48% }` then takes 48% of it, so each card comes out at about 220px
 * — narrower than the fields inside it.
 *
 * Widened only while the two-column markup is actually on the page, so every
 * other state of this screen keeps the 460px it was designed at: the
 * lost-password endpoint, and the whole site again if registration is ever
 * switched back off. :has() carries the specificity of its argument, so it is
 * the #customer_login id inside it that beats the 460px rule — and matching on
 * that id is also what makes this rule turn itself off rather than becoming a
 * second thing to remember. */
body:not(.logged-in) .pickleball-account .woocommerce:has(#customer_login) {
	max-width: 60rem;
}

/* Grid rather than WooCommerce's floats. woocommerce-layout.css lays the pair
 * out as `float:left` / `float:right` on 48% with a clearfix, which gives two
 * cards of different heights no shared start edge and a gutter that is a
 * percentage of whatever the page happens to be. */
body:not(.logged-in) .pickleball-account #customer_login {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);

	/* The login card is taller — it carries Remember me, the lost-password
	 * link and the Google button — and stretched cards would put the two
	 * Register/Log in buttons at different heights for no reason. */
	align-items: start;
}

/* woocommerce-layout.css clearfixes this wrapper with
 * `.col2-set::before, .col2-set::after { content:" "; display:table }`, and a
 * generated pseudo-element of a grid container IS A GRID ITEM. So the grid
 * above laid out four items, not two: ::before took the first cell, pushing
 * Login into the right-hand column of row 1 and Register into the left-hand
 * column of row 2, with ::after beside it. The pair rendered diagonally.
 * Measured, not guessed — the markup gives no hint that two more boxes exist.
 * A clearfix has nothing to clear once nothing floats, so they go. */
body:not(.logged-in) .pickleball-account #customer_login::before,
body:not(.logged-in) .pickleball-account #customer_login::after {
	content: none;
}

/* `width: auto` is not redundant next to the grid above. A grid item ignores
 * float, but it does NOT ignore width, so without this both cards sit in the
 * left 48% of their own track with a gap of empty space beside them. */
body:not(.logged-in) .pickleball-account #customer_login > .u-column1,
body:not(.logged-in) .pickleball-account #customer_login > .u-column2 {
	float: none;
	width: auto;
	margin: 0;
}

/* Side by side only once two 460px columns and the gap between them fit.
 * Below that they stack, login first — which is the order the markup already
 * has and the right one, because a returning customer is the common case. */
@media (min-width: 820px) {
	body:not(.logged-in) .pickleball-account #customer_login {
		grid-template-columns: 1fr 1fr;
	}
}

/* The shared rule further up clamps both forms to 34rem. Inside a grid track
 * the track is the measure, and a fixed clamp left in place is a trap: the
 * first time the wrapper's max-width goes above 2 × 34rem the two cards stop
 * being the same width and nothing says why. */
body:not(.logged-in) .pickleball-account #customer_login .woocommerce-form-login,
body:not(.logged-in) .pickleball-account #customer_login .woocommerce-form-register {
	max-width: none;
}

/* The register card, built from the same tokens as the login card above it.
 * The pair has to read as one decision with two doors, not as a themed form
 * beside a stock one. */
body:not(.logged-in) .pickleball-account .woocommerce-form-register {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
}

/* (c) The headings. The screen-reader-hide above is scoped
 * `.pickleball-account .woocommerce > h2`, and with registration on the two
 * <h2>s are no longer children of `.woocommerce` — they are
 * `#customer_login > div > h2` — so that rule matches nothing at all here and
 * both headings render as bare unstyled h2s.
 *
 * They are made VISIBLE rather than hidden again, which is a change of intent
 * and a deliberate one. Hiding "Login" was right while it was the only
 * heading above the only form on the page. It is wrong the moment there are
 * two cards side by side holding near-identical fields — email and password
 * against username-or-email and password — because then nothing on the screen
 * says which card signs you in and which one creates an account. So the
 * headings become the pair's column titles. */
body:not(.logged-in) .pickleball-account #customer_login > div > h2 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast);
}

/* (a) The fields. Exactly the bug documented on the login form above, one
 * card over: WooCommerce ships `.woocommerce form .form-row .input-text`,
 * three classes to the theme rule's two, so the register form's email and
 * password boxes render with WooCommerce's rgba(32,7,7,.8) border and 4px
 * radius while the login boxes beside them carry the theme's line colour and
 * chip radius. Of everything on this screen that is the one difference a
 * visitor would actually see.
 *
 * Restated at the login rule's specificity from the login rule's tokens
 * rather than folded into it, because this file is appended to and that
 * selector is above. The 16px floor is the iOS one, as there; the true white
 * is for the same reason, that a field has to read as a hole in the
 * base-raised card rather than as part of it. */
body:not(.logged-in) .pickleball-account .woocommerce-form-register .form-row .input-text,
body:not(.logged-in) .pickleball-account .woocommerce-form-register .form-row input[type="text"],
body:not(.logged-in) .pickleball-account .woocommerce-form-register .form-row input[type="email"],
body:not(.logged-in) .pickleball-account .woocommerce-form-register .form-row input[type="password"] {
	padding: 12px var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--karla);
	font-size: max(16px, var(--wp--preset--font-size--base));
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--chip);
}

body:not(.logged-in) .pickleball-account .woocommerce-form-register .form-row .input-text:focus,
body:not(.logged-in) .pickleball-account .woocommerce-form-register .form-row input[type="text"]:focus,
body:not(.logged-in) .pickleball-account .woocommerce-form-register .form-row input[type="email"]:focus,
body:not(.logged-in) .pickleball-account .woocommerce-form-register .form-row input[type="password"]:focus {
	border-color: var(--wp--preset--color--success);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp--preset--color--success) 18%, transparent);
	outline: none;
}

body:not(.logged-in) .pickleball-account .woocommerce-form-register label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--contrast-muted);
}

body:not(.logged-in) .pickleball-account .woocommerce-form-register .form-row {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* The pill itself is already won further up by `.pickleball-account
 * button.button`, which ties WooCommerce's `.woocommerce button.button` on
 * specificity and beats it on source order. All that is left is the shape:
 * off WooCommerce's float and across the card, so this card ends exactly as
 * the login card does. */
body:not(.logged-in) .pickleball-account .woocommerce-form-register__submit {
	float: none;
	width: 100%;
	margin: 0;
}

/* WooCommerce hooks its privacy-policy sentence onto woocommerce_register_form
 * at priority 20, so it lands inside this card and nowhere else on the site.
 * It is fine print; left at body size it is the largest block of text in the
 * card and reads as the point of the form. */
body:not(.logged-in) .pickleball-account .woocommerce-form-register .woocommerce-privacy-policy-text p {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-muted);
}

/* The honeypot row printed by pickleball_register_form_honeypot().
 *
 * Clipped out of flow, NOT display:none. A scripted sign-up that bothers to
 * check computed styles skips a display:none input, and an input it skips is
 * an input it cannot be caught by — which is the entire job of this layer.
 * This is the same clip the "Login" heading above uses. */
body:not(.logged-in) .pickleball-account .pickleball-register__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The reCAPTCHA widget is an iframe Google sizes itself at 304px, which is
 * wider than this card's content box on a small phone. It scrolls inside its
 * own row rather than pushing the page sideways — the same treatment the
 * liability table gets above, and for the same reason. */
body:not(.logged-in) .pickleball-account .pickleball-register__captcha {
	margin-bottom: var(--wp--preset--spacing--20);
	overflow-x: auto;
}

body:not(.logged-in) .pickleball-account .pickleball-register__captcha-noscript {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-muted);
}