/*
 * WooCommerce.
 *
 * Loaded only on shop, cart, checkout and account pages (see inc/woocommerce.php).
 *
 * Cart and checkout run the classic shortcodes and the theme's own template
 * overrides in woocommerce/. Those templates keep WooCommerce's table skeleton
 * and every selector its scripts and gateways bind to — the visual rewrite from
 * "a WooCommerce table" to "cards and a sticky summary" happens here, by
 * flattening the table display roles onto grid.
 *
 * That is why so much of this file starts by resetting display: it is the price
 * of markup that stays compatible with every extension that injects a <tr>.
 *
 * WooCommerce's general stylesheet still loads; it carries form and notice
 * basics the account templates rely on. Everything below either re-points it at
 * the theme tokens or overrides it outright.
 */

/* ------------------------------------------------------------- Containers */

/*
 * Cart and checkout need the full container, not the reading column.
 *
 * This used to key off .shop-content, which nothing ever printed — the class on
 * the body is has-shop-content (pmt_woo_body_class), and the content wrapper is
 * .block-content or .prose from page.php. The rule was dead; this is the pair
 * that actually exists.
 */
.has-shop-content .block-content,
.has-shop-content .prose {
	max-width: none;
}

.woocommerce-section .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ----------------------------------------------------------------- Notices */

/*
 * Core positions a ::before glyph absolutely inside the notice and reserves
 * room for it with a 3.5em left padding. The theme signals the notice type with
 * the left border instead, so the glyph is dropped — left in place it printed
 * on top of the first character of the message.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	align-items: center;
	justify-content: space-between;
	margin: 0 0 var(--space-m);
	padding: var(--space-s) var(--space-m);
	border: 1px solid var(--color-border);
	border-top-width: 1px;
	border-left-width: 4px;
	border-radius: var(--radius-m);
	background-color: var(--color-surface);
	color: var(--color-text);
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

/* The "view cart" link core appends to the message. */
.woocommerce-message .button,
.woocommerce-info .button {
	flex: none;
	margin: 0;
}

.woocommerce-message {
	border-left-color: var(--color-success);
}

.woocommerce-info {
	border-left-color: var(--color-accent);
}

.woocommerce-error {
	border-left-color: var(--color-error);
}

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

.pmt-button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: 0.6em 1.6em;
	border: 1px solid transparent;
	/* A rounded rectangle, not a pill — the same shape as .button in base.css. */
	border-radius: var(--radius-m);
	background-color: var(--color-accent);
	color: var(--color-accent-contrast);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.pmt-button:hover,
.pmt-button:focus-visible,
.woocommerce .button:hover,
.woocommerce .button:focus-visible,
.woocommerce button.button:hover,
.woocommerce button.button:focus-visible,
.woocommerce input.button:hover,
.woocommerce input.button:focus-visible,
.woocommerce a.button:hover,
.woocommerce a.button:focus-visible {
	background-color: var(--color-accent-hover);
	color: var(--color-accent-contrast);
}

/*
 * WooCommerce's general stylesheet paints .button.alt in its own purple
 * (#a46497) at a specificity of 0-3-1 — higher than the block above, so the two
 * most prominent buttons on the site (proceed to checkout, place order) came out
 * purple while every other button was already themed. Matched here, not fought
 * with !important.
 */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-contrast);
}

.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus-visible,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus-visible,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:focus-visible,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #respond input#submit.alt:focus-visible {
	background-color: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-accent-contrast);
}

/* Same story for the disabled state of the alt button. */
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce input.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled] {
	background-color: var(--color-accent);
	color: var(--color-accent-contrast);
	opacity: 0.4;
}

.pmt-button--block {
	width: 100%;
}

/*
 * Secondary actions: present, but not competing with "place order".
 *
 * These have to out-specify `.woocommerce button.button` (0,2,1) from the block
 * above, so each modifier is written element-qualified. A bare
 * `.pmt-button--ghost` loses, and the button comes out filled — which is how
 * "apply coupon" ended up looking like the primary action, and how the disabled
 * update-cart button rendered as a grey blob with white-on-grey invisible text.
 */
.pmt-button--ghost,
.woocommerce a.button.pmt-button--ghost,
.woocommerce button.button.pmt-button--ghost,
.woocommerce input.button.pmt-button--ghost {
	background-color: transparent;
	border-color: var(--color-border);
	color: var(--color-text);
}

.pmt-button--ghost:hover,
.pmt-button--ghost:focus-visible,
.woocommerce a.button.pmt-button--ghost:hover,
.woocommerce a.button.pmt-button--ghost:focus-visible,
.woocommerce button.button.pmt-button--ghost:hover,
.woocommerce button.button.pmt-button--ghost:focus-visible,
.woocommerce input.button.pmt-button--ghost:hover,
.woocommerce input.button.pmt-button--ghost:focus-visible {
	background-color: var(--color-surface);
	border-color: var(--color-text);
	color: var(--color-text);
}

.pmt-button--quiet,
.woocommerce a.button.pmt-button--quiet,
.woocommerce button.button.pmt-button--quiet,
.woocommerce input.button.pmt-button--quiet {
	padding: 0.6em 1.1em;
	background-color: transparent;
	border-color: transparent;
	color: var(--color-muted);
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pmt-button--quiet:hover,
.pmt-button--quiet:focus-visible,
.woocommerce a.button.pmt-button--quiet:hover,
.woocommerce a.button.pmt-button--quiet:focus-visible,
.woocommerce button.button.pmt-button--quiet:hover,
.woocommerce button.button.pmt-button--quiet:focus-visible,
.woocommerce input.button.pmt-button--quiet:hover,
.woocommerce input.button.pmt-button--quiet:focus-visible {
	background-color: transparent;
	color: var(--color-text);
}

/*
 * Update cart stays disabled until a quantity actually changes — wc-cart.js
 * flips it. Keep it readable while disabled rather than dimming it into an
 * unlabelled shape.
 */
.woocommerce button.button.pmt-button--quiet:disabled,
.woocommerce button.button.pmt-button--quiet:disabled[disabled] {
	background-color: transparent;
	color: var(--color-muted);
	opacity: 0.55;
	cursor: not-allowed;
	text-decoration: none;
}

.pmt-button__arrow {
	flex: none;
	transition: transform var(--transition);
}

.pmt-button:hover .pmt-button__arrow,
.pmt-button:focus-visible .pmt-button__arrow {
	transform: translateX(2px);
}

/* ------------------------------------------------------------- Form fields */

.woocommerce form .form-row {
	margin: 0;
	padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label {
	display: block;
	margin-bottom: var(--space-3xs);
	color: var(--color-muted);
	font-size: var(--text-sm);
	font-weight: 600;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	padding: 0.65em 0.85em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.4;
	transition: border-color var(--transition);
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible {
	border-color: var(--color-accent);
	outline: 0;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--color-error);
}

/*
 * select2 (country, canton, dial code) sized like the inputs beside it: the
 * library fixes the box at 28px and the text at line-height 28px, which with
 * the field padding above came out a few pixels taller than a text field.
 */
.woocommerce .select2-container .select2-selection--single {
	height: auto;
	margin: 0;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 1.4em 0 0;
	line-height: 1.4;
	color: inherit;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 0.6em;
	height: 100%;
}

/*
 * The coupon field the booking plugin puts into the order review
 * (Pedalmondo_Checkout_Coupon). Its stylesheet leaves the look to the theme
 * on purpose, so this is the same field as every other input here — and the
 * plugin's uppercase is undone, the style guide's inputs are not shouted.
 */
.woocommerce .pm-coupon__input {
	padding: 0.6em 0.85em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-s);
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: 1.2;
	text-transform: none;
}

/*
 * Field and button on the button's height: the same type size and padding
 * as .button, so the row reads like "place order" below it rather than like
 * an address field. Centred, because the plugin's flex row would otherwise
 * stretch the button to whatever is tallest.
 */
.woocommerce .pm-coupon__panel {
	align-items: center;
}

.woocommerce form .form-row .required {
	color: var(--color-error);
	text-decoration: none;
}

/* Checkbox rows are labels wrapping a control, not stacked label + field. */
.pmt-checkbox {
	display: flex !important;
	align-items: center;
	gap: var(--space-2xs);
	margin-bottom: 0 !important;
	color: var(--color-text) !important;
	font-weight: 500 !important;
	cursor: pointer;
}

.pmt-checkbox input[type="checkbox"] {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	accent-color: var(--color-accent);
}

/* --------------------------------------------------------------- Cart page */

/*
 * Two columns: the line items on the left, totals on the right. Notices span
 * the full width — they are about the whole cart, not one column.
 */
.woocommerce-cart .woocommerce {
	display: grid;
	gap: var(--space-l);
	align-items: start;
}

@media (min-width: 62rem) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
	}

	.woocommerce-cart .woocommerce-notices-wrapper,
	.woocommerce-cart .pmt-cart__empty-action {
		grid-column: 1 / -1;
	}
}

/*
 * Flatten the table roles so the rows can become cards.
 *
 * Every rule that re-establishes a display below has to be at least as specific
 * as this reset, hence the element-qualified selectors: `.pmt-cart__items tr`
 * (0,1,1) beats a bare `.pmt-cart__item` (0,1,0), and the row would silently
 * stay a block no matter what grid you write on it.
 */
.pmt-cart__items,
.pmt-cart__items tbody,
.pmt-cart__items tr,
.pmt-cart__items td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
}

.pmt-cart__head {
	display: none;
}

.pmt-cart__items tr.pmt-cart__item {
	display: grid;
	gap: var(--space-2xs) var(--space-s);
	grid-template-areas:
		"media details remove"
		"media qty    subtotal";
	grid-template-columns: 5.5rem minmax(0, 1fr) auto;
	align-items: start;
	padding: var(--space-s) 0;
	border-bottom: 1px solid var(--color-border);
}

.pmt-cart__items > tbody > tr:first-child {
	padding-top: 0;
}

.pmt-cart__items td.pmt-cart__media {
	grid-area: media;
}

.pmt-cart__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	background-color: var(--color-surface);
	border-radius: var(--radius-m);
	background-color: var(--color-surface);
	object-fit: cover;
}

.pmt-cart__items td.pmt-cart__details {
	grid-area: details;
}

.pmt-cart__title {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
}

.pmt-cart__title a {
	color: var(--color-text);
	text-decoration: none;
}

.pmt-cart__title a:hover,
.pmt-cart__title a:focus-visible {
	text-decoration: underline;
}

/*
 * Booking line items carry the rental period, pickup and return as cart item
 * data. They are the content of the order, not a footnote — so they stay
 * readable instead of collapsing into one grey run-on line.
 *
 * In the cart there is room for label and value side by side.
 */
.pmt-cart__details .variation {
	display: grid;
	gap: 0 var(--space-2xs);
	grid-template-columns: auto minmax(0, 1fr);
	margin: var(--space-2xs) 0 0;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

/* Same core float to undo as in the summary — see the note there. */
.woocommerce td.product-name.pmt-cart__details dl.variation dt {
	display: block;
	float: none;
	margin: 0;
	color: var(--color-muted);
	font-weight: 600;
}

.woocommerce td.product-name.pmt-cart__details dl.variation dd {
	display: block;
	float: none;
	margin: 0;
}

.pmt-cart__details .variation dd p {
	margin: 0;
}

/* The unit price is redundant next to the subtotal on a single-quantity line. */
.pmt-cart__items td.pmt-cart__unit {
	display: none;
}

.pmt-cart__items td.pmt-cart__qty {
	grid-area: qty;
	align-self: end;
}

.pmt-cart__qty .quantity {
	display: inline-flex;
}

.pmt-cart__qty .qty {
	width: 4.5rem;
	padding: 0.4em 0.5em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	text-align: center;
}

.pmt-cart__items td.pmt-cart__subtotal {
	grid-area: subtotal;
	align-self: end;
	font-size: var(--text-lg);
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/*
 * Core styles the remove link as
 *
 *   .woocommerce a.remove { display: block; width: 1em; height: 1em;
 *                           font-size: 1.5em; color: red !important }
 *   .woocommerce a.remove:hover { color: #fff !important; background: red }
 *
 * Two consequences worth naming, because both were visible: display:block with
 * a 1em width ignores text-align on the cell, so the × sat left of the price
 * instead of lining up with it; and the hover paints a filled red disc. The
 * !important on colour means matching specificity is not enough — it has to be
 * answered in kind, which is the one place in this file that is justified.
 *
 * The cell is flex so the link can be pushed to the end regardless of its own
 * display value.
 */
.pmt-cart__items td.pmt-cart__remove {
	display: flex;
	grid-area: remove;
	align-items: flex-start;
	justify-content: flex-end;
}

.woocommerce a.remove.pmt-cart__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: var(--radius-full);
	background: none;
	color: var(--color-muted) !important;
	font-size: inherit;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition);
}

.woocommerce a.remove.pmt-cart__remove-link:hover,
.woocommerce a.remove.pmt-cart__remove-link:focus-visible {
	background: var(--color-surface-alt);
	color: var(--color-error) !important;
}

/* Only the update button lives here now that the coupon field is gone. */
.pmt-cart__items td.pmt-cart__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	align-items: center;
	justify-content: flex-end;
	padding-top: var(--space-m);
}

.pmt-coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	align-items: center;
}

.pmt-coupon__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The same field as every input in base.css; WooCommerce's uppercase is undone. */
.pmt-coupon__input {
	width: auto !important;
	min-width: 12rem;
	padding: 0.65em 0.9em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-s);
	background-color: var(--color-bg);
	font-family: var(--font-body);
	font-size: var(--text-base);
	text-transform: none;
}

/* -------------------------------------------------------------- Cart totals */

.pmt-totals {
	padding: var(--space-m);
	border-radius: var(--radius-l);
	background-color: var(--color-surface);
}

@media (min-width: 62rem) {
	.pmt-totals {
		position: sticky;
		top: var(--space-l);
	}
}

.pmt-totals__title {
	margin: 0 0 var(--space-s);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
}

.pmt-totals__table,
.pmt-totals__table tbody,
.pmt-totals__table tr,
.pmt-totals__table th,
.pmt-totals__table td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.pmt-totals__table tr {
	display: flex;
	gap: var(--space-s);
	align-items: baseline;
	justify-content: space-between;
	padding: var(--space-2xs) 0;
}

.pmt-totals__table th {
	color: var(--color-muted);
	font-weight: 500;
}

.pmt-totals__table td {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.pmt-totals__table .order-total {
	margin-top: var(--space-2xs);
	padding-top: var(--space-s);
	border-top: 1px solid var(--color-border);
}

.pmt-totals__table .order-total th {
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
}

.pmt-totals__table .order-total td {
	font-size: var(--text-lg);
	font-weight: 700;
}

/* Shipping options come from core as a list inside the row. */
.pmt-totals__table .woocommerce-shipping-methods,
.pmt-summary__totals .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.pmt-totals__table .woocommerce-shipping-destination,
.pmt-summary__totals .woocommerce-shipping-destination {
	margin: var(--space-3xs) 0 0;
	color: var(--color-muted);
	font-size: var(--text-sm);
}

.pmt-totals__action {
	margin-top: var(--space-m);
}

/*
 * Core styles this one as a display:block link at 0-3-1, which beats the button
 * block above and drops the flex layout — the arrow then falls out of line with
 * the label. Restated at matching specificity.
 *
 * The ::after is core's own icon-font chevron; the template already renders an
 * SVG arrow, and both together read as a double arrow.
 */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: 0.6em 1.6em;
	font-size: var(--text-base);
}

.woocommerce a.button.wc-forward::after,
.woocommerce a.button.wc-forward::before {
	content: none;
}

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

.pmt-checkout__grid {
	display: grid;
	gap: var(--space-l);
	align-items: start;
}

@media (min-width: 62rem) {
	.pmt-checkout__grid {
		grid-template-columns: minmax(0, 1fr) minmax(21rem, 26rem);
	}

	.pmt-checkout__aside {
		position: sticky;
		top: var(--space-l);
	}
}

.pmt-checkout__details {
	display: grid;
	gap: var(--space-l);
}

.pmt-fields__title {
	margin: 0 0 var(--space-s);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
}

/*
 * Two columns for the short fields, full width for the rest. The field keys are
 * WooCommerce's own; address i18n adds and removes them per country, so the
 * rule keys off the classes core puts on the row rather than on nth-child.
 */
.pmt-fields__grid {
	display: grid;
	gap: var(--space-s);
}

@media (min-width: 40rem) {
	.pmt-fields__grid {
		grid-template-columns: 1fr 1fr;
	}

	.pmt-fields__grid > .form-row-wide,
	.pmt-fields__grid > .notes,
	.pmt-fields__grid > .create-account {
		grid-column: 1 / -1;
	}

	/*
	 * Dial code and number on one row. By id, not by row class:
	 * wc-address-i18n.js re-applies form-row-wide to the phone after every
	 * country change, and would pull it back onto a row of its own.
	 */
	.pmt-fields__grid > #billing_phone_prefix_field {
		grid-column: 1;
	}

	.pmt-fields__grid > #billing_phone_field {
		grid-column: 2;
	}
}

.pmt-fields--account {
	padding: var(--space-s) var(--space-m);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
}

/* The ship-to toggle is a heading wrapping a checkbox; make it read as one row. */
#ship-to-different-address.pmt-fields__title {
	margin-bottom: var(--space-s);
	font-size: var(--text-lg);
}

.woocommerce-shipping-fields .shipping_address {
	margin-top: var(--space-s);
}

.pmt-login-toggle,
.pmt-coupon-toggle {
	margin-bottom: var(--space-m);
	color: var(--color-muted);
	font-size: var(--text-sm);
}

.pmt-login-toggle a,
.pmt-coupon-toggle a {
	color: var(--color-text);
	font-weight: 600;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------- Checkout summary */

.pmt-checkout__summary-title {
	margin: 0 0 var(--space-s);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
}

.pmt-checkout__summary {
	padding: var(--space-m);
	border-radius: var(--radius-l);
	background-color: var(--color-surface);
}

.pmt-summary,
.pmt-summary tbody,
.pmt-summary tfoot,
.pmt-summary tr,
.pmt-summary th,
.pmt-summary td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

/* Same specificity trap as the cart: the reset above is `.pmt-summary tr`. */
.pmt-summary tr.pmt-summary__item {
	display: flex;
	gap: var(--space-s);
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: var(--space-s);
	border-bottom: 1px solid var(--color-border);
}

.pmt-summary tr.pmt-summary__item + tr.pmt-summary__item {
	padding-top: var(--space-s);
}

.pmt-summary td.pmt-summary__product {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.pmt-summary__title {
	display: block;
	font-weight: 600;
	line-height: var(--leading-snug);
}

/*
 * In the sidebar the same list is stacked, label above value, both flush left.
 * Side by side it left roughly 8em for the value and broke
 * "21.08.2026 – 28.08.2026 (7 Tage)" across three lines.
 */
.pmt-summary__product .variation {
	display: block;
	margin: var(--space-2xs) 0 0;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

/*
 * Undoing the float is the load-bearing bit, and it needs the full selector to
 * do it: core writes
 *
 *   .woocommerce td.product-name dl.variation dt { float: left; clear: both }
 *
 * at 0-3-3. A shorter selector here loses, the labels keep floating, and the
 * values wrap around them instead of stacking underneath.
 */
.woocommerce td.product-name.pmt-summary__product dl.variation dt {
	display: block;
	float: none;
	margin: var(--space-3xs) 0 0;
	color: var(--color-muted);
	font-weight: 600;
}

.woocommerce td.product-name.pmt-summary__product dl.variation dd {
	display: block;
	float: none;
	margin: 0;
}

.pmt-summary__product .variation dd p {
	margin: 0;
}

.pmt-summary__qty {
	color: var(--color-muted);
	font-weight: 500;
}

.pmt-summary__price {
	flex: none;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
}

.pmt-summary__totals tr {
	display: flex;
	gap: var(--space-s);
	align-items: baseline;
	justify-content: space-between;
	padding: var(--space-2xs) 0;
}

.pmt-summary__totals th {
	color: var(--color-muted);
	font-weight: 500;
}

.pmt-summary__totals td {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/*
 * The coupon row from the booking plugin has one cell, not label + amount.
 * In the flex row above a lone cell is sized by its content and stops short
 * of the right edge; this stretches it across, so the field and button run
 * the full width of the summary.
 */
.pmt-summary__totals tr.pm-coupon > td {
	flex: 1 1 100%;
	width: 100%;
}

.pmt-summary__totals .cart-subtotal {
	padding-top: var(--space-s);
}

.pmt-summary__totals .order-total {
	margin-top: var(--space-2xs);
	padding-top: var(--space-s);
	border-top: 1px solid var(--color-border);
}

.pmt-summary__totals .order-total th {
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
}

.pmt-summary__totals .order-total td {
	font-size: var(--text-lg);
	font-weight: 700;
}

/* ---------------------------------------------------------------- Payment */

/*
 * Core styles the payment area through `.woocommerce-checkout #payment`, which
 * carries an id and therefore outranks anything class-based this file could
 * write: a grey panel (#ebe9eb), a lilac payment box (#dfdcde) and a CSS-triangle
 * speech-bubble pointer above it. That block is the most recognisably
 * "WooCommerce" thing left on the page, so it is matched at its own specificity
 * rather than nudged.
 */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: 0;
}

.woocommerce-checkout #payment div.payment_box {
	margin: 0;
	padding: var(--space-2xs) 0 var(--space-s) 1.9rem;
	border-radius: 0;
	background-color: transparent;
	color: var(--color-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

.woocommerce-checkout #payment div.payment_box::before {
	content: none;
}

.woocommerce-checkout #payment div.form-row {
	padding: 0;
}

.pmt-payment {
	margin-top: var(--space-m);
}

.pmt-payment__title {
	margin: 0 0 var(--space-s);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
}

.pmt-payment__methods {
	display: grid;
	gap: var(--space-2xs);
	margin: 0 0 var(--space-m);
	padding: 0;
	list-style: none;
}

/*
 * Each gateway is a card. The radio stays in the DOM and focusable — hiding it
 * with display:none would take it out of the tab order and off the a11y tree,
 * and checkout.js reads its checked state.
 */
.pmt-payment__method {
	position: relative; /* anchors the hidden radio and the drawn one on the label */
	padding: var(--space-2xs) var(--space-s);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
	background-color: var(--color-bg);
	transition: border-color var(--transition), background-color var(--transition);
}

.pmt-payment__method:has(.pmt-payment__radio:checked) {
	border-color: var(--color-accent);
	background-color: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg));
}

.pmt-payment__method:has(.pmt-payment__radio:focus-visible) {
	outline: 2px dashed var(--color-text);
	outline-offset: 2px;
}

.pmt-payment__radio {
	position: absolute;
	width: 1.1em;
	height: 1.1em;
	opacity: 0;
}

.pmt-payment__label {
	display: flex !important;
	gap: var(--space-2xs);
	align-items: center;
	padding: var(--space-2xs) 0 var(--space-2xs) 1.9rem;
	margin: 0 !important;
	color: var(--color-text) !important;
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	cursor: pointer;
}

/* The visual radio, drawn on the label so the whole card is the hit area. */
.pmt-payment__label::before {
	content: "";
	position: absolute;
	width: 1.1rem;
	height: 1.1rem;
	margin-left: -1.9rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background-color: var(--color-bg);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.pmt-payment__method:has(.pmt-payment__radio:checked) .pmt-payment__label::before {
	border-color: var(--color-accent);
	border-width: 2px;
	box-shadow: inset 0 0 0 3px var(--color-bg), inset 0 0 0 1rem var(--color-accent);
}

.pmt-payment__icon {
	margin-left: auto;
}

.pmt-payment__icon img {
	max-height: 1.5rem;
	width: auto;
	vertical-align: middle;
}

.pmt-payment__icon:empty {
	display: none;
}

/*
 * A gateway's own fields live in here — hosted fields, iframes, saved-card
 * pickers. Only spacing and type are set; nothing that could reposition or clip
 * an iframe a payment provider renders.
 */
.pmt-payment__box {
	padding: var(--space-2xs) 0 var(--space-s) 1.9rem;
	color: var(--color-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

.pmt-payment__box p:last-child {
	margin-bottom: 0;
}

.pmt-payment__submit {
	display: grid;
	gap: var(--space-s);
}

.woocommerce-terms-and-conditions-wrapper {
	color: var(--color-text);
	font-size: var(--text-sm);
}

/* The consent checkbox: box and sentence on one line, links underlined. */
.woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xs);
	cursor: pointer;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
	accent-color: var(--color-brand);
}

.woocommerce-terms-and-conditions-wrapper a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.woocommerce-privacy-policy-text p:last-child {
	margin-bottom: 0;
}

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

.pmt-order__overview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
	margin: 0 0 var(--space-l);
	padding: var(--space-m);
	border-radius: var(--radius-l);
	background-color: var(--color-surface);
	list-style: none;
}

.pmt-order__overview li {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.pmt-order__overview strong {
	display: block;
	margin-top: var(--space-3xs);
	color: var(--color-text);
	font-size: var(--text-base);
	letter-spacing: 0;
	text-transform: none;
}

.pmt-order__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

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

.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--space-l);
	grid-template-columns: minmax(12rem, 16rem) 1fr;
	align-items: start;
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--color-border);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--space-2xs) 0;
	color: var(--color-muted);
	text-decoration: none;
	font-weight: 600;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus-visible,
.woocommerce-MyAccount-navigation .is-active a {
	color: var(--color-text);
}

.woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

/* Login and register sit side by side once there is room for them. */
#customer_login {
	display: grid;
	gap: var(--space-l);
}

@media (min-width: 48rem) {
	#customer_login {
		grid-template-columns: 1fr 1fr;
	}
}

/*
 * Account tables only — the cart and checkout tables are flattened above and
 * must not pick this up, hence the scoping to the account pages.
 */
.woocommerce-account table.shop_table {
	width: 100%;
	border: 1px solid var(--color-border);
	border-collapse: collapse;
	border-radius: var(--radius-m);
	overflow: hidden;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: var(--space-2xs) var(--space-s);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

.woocommerce-account table.shop_table th {
	background-color: var(--color-surface);
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ----------------------------------------------------------------- Narrow */

@media (max-width: 48rem) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}

	.pmt-cart__items tr.pmt-cart__item {
		grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	}

	.pmt-cart__items td.pmt-cart__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.pmt-coupon__input {
		flex: 1 1 auto;
		min-width: 0;
	}
}