/* ==========================================================================
   WooCommerce — shop, package, basket and checkout
   ========================================================================== */

/* Listing filters ---------------------------------------------------------- */

.filters {
	border: 1px solid var(--vv-border);
	border-radius: var(--vv-radius-media);
	background: var(--vv-muted);
}

.filters__grid {
	display: grid;
	gap: 1rem 1.25rem;
	grid-template-columns: 1fr;
	padding: 1.25rem;
}

/* The search box is worth twice a select's width once there is room. */
@media (min-width: 640px) {
	.filters__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.filters__grid {
		grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
		align-items: end;
	}

	/* Two-control bar: search takes the room the extra selects would have. */
	.filters__grid--two {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.filters__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--vv-label-size);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vv-muted-fg);
}

/* Search field with its mark inset on the left. */
.filters__search {
	position: relative;
	display: block;
}

.filters__search-icon {
	position: absolute;
	top: 50%;
	left: 0.85rem;
	transform: translateY(-50%);
	color: var(--vv-muted-fg);
	pointer-events: none;
}

.filters__search input {
	padding-left: 2.4rem;
}

.filters input[type="search"]::-webkit-search-cancel-button {
	cursor: pointer;
}

/* Native select chevrons differ per platform; this draws a consistent one. */
.filters__select {
	position: relative;
	display: block;
}

.filters__select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: -0.35rem;
	border-right: 1.5px solid var(--vv-muted-fg);
	border-bottom: 1.5px solid var(--vv-muted-fg);
	transform: rotate(45deg);
	pointer-events: none;
}

.filters__select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.25rem;
	cursor: pointer;
}

.filters__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding: 0.875rem 1.25rem;
	border-top: 1px solid var(--vv-border);
	font-size: 0.875rem;
}

@media (min-width: 640px) {
	.filters__foot {
		padding-inline: 1.5rem;
	}
}

.filters__count .t-muted {
	color: var(--vv-muted-fg);
}

.filters__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.filters__clear {
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--vv-muted-fg);
}

.filters__clear:hover {
	color: var(--vv-accent);
}

/* Scripts submit on change, so the button is only needed without them. */
.has-js .filters__apply {
	display: none;
}

.chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--vv-border);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--vv-transition), border-color var(--vv-transition);
}

.chip:hover {
	background: var(--vv-muted);
}

.chip.is-active {
	background: var(--vv-primary);
	border-color: var(--vv-primary);
	color: var(--vv-primary-fg);
}

.shop-sort select {
	width: auto;
	min-width: 14rem;
	padding-block: 0.5rem;
	font-size: 0.8125rem;
}

/* Single package ----------------------------------------------------------- */

.product-layout {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.product-layout {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 3.5rem;
		align-items: start;
	}
}

.product-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--vv-radius-media);
}

/* Scoped to the package page: "product-price" is also WooCommerce's class for
   a cell in the basket table, which must not inherit display type. */
.product-summary .product-price {
	font-family: var(--vv-font-serif);
	font-size: 2rem;
	line-height: 1.1;
}

.product-summary .product-price del {
	opacity: 0.5;
	font-size: 0.7em;
	margin-right: 0.4em;
}

.product-summary .product-price ins {
	text-decoration: none;
}

/* Variation and quantity form */
.product-form .variations {
	width: 100%;
	border-collapse: collapse;
}

.product-form .variations th,
.product-form .variations td {
	display: block;
	text-align: left;
	padding: 0;
}

.product-form .variations th {
	padding-top: 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vv-muted-fg);
}

.product-form .variations td {
	padding-top: 0.4rem;
}

.product-form .variations label {
	font: inherit;
}

.product-form .reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--vv-muted-fg);
}

.product-form .quantity {
	display: inline-flex;
	align-items: center;
	margin-right: 0.75rem;
}

.product-form .quantity input {
	width: 5rem;
	text-align: center;
}

.product-form .woocommerce-variation-price {
	margin-block: 1rem;
	font-family: var(--vv-font-serif);
	font-size: 1.5rem;
}

.product-form .woocommerce-variation-availability {
	font-size: 0.8125rem;
	color: var(--vv-muted-fg);
}

/* Buttons — WooCommerce emits its own class names */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce .button,
button.single_add_to_cart_button,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	min-height: var(--vv-tap);
	padding: 0.75rem 1.5rem;
	background-color: var(--vv-primary);
	color: var(--vv-primary-fg);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: opacity var(--vv-transition);
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
button.single_add_to_cart_button:hover {
	opacity: 0.9;
	background-color: var(--vv-primary);
	color: var(--vv-primary-fg);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .checkout-button {
	background-color: var(--vv-coral);
	color: var(--vv-coral-fg);
}

.woocommerce .button.wc-backward,
.woocommerce a.button.wc-forward.wp-element-button {
	background-color: transparent;
	border-color: var(--vv-border);
	color: var(--vv-fg);
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

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

.woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 1.5rem;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--vv-border);
	border-left-width: 2px;
	border-left-color: var(--vv-jade);
	border-radius: var(--vv-radius);
	background: var(--vv-surface);
	font-size: 0.9375rem;
	list-style: none;
}

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

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

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	padding: 0.45rem 1rem;
	font-size: var(--vv-label-size);
}

/* Basket ------------------------------------------------------------------- */

.woocommerce-cart-form table.shop_table,
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 1rem 0.75rem;
	border-bottom: 1px solid var(--vv-border);
	text-align: left;
	vertical-align: top;
}

.woocommerce table.shop_table th {
	font-family: var(--vv-font-sans);
	font-size: var(--vv-label-size);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vv-muted-fg);
}

.woocommerce table.shop_table td {
	vertical-align: middle;
}

.woocommerce table.shop_table .product-thumbnail {
	width: 96px;
}

.woocommerce table.shop_table .product-thumbnail img {
	width: 96px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--vv-radius-media);
}

.woocommerce table.shop_table .product-name a {
	font-family: var(--vv-font-serif);
	font-size: 1.125rem;
	text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Money reads down the column, so it is right-aligned and set on fixed-width
   figures. */
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Every package is sold one at a time, so the quantity column would only ever
   read "1". */
.woocommerce table.shop_table .product-quantity {
	display: none;
}

.woocommerce a.remove {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	border: 1px solid var(--vv-border);
	color: var(--vv-muted-fg);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1;
}

.woocommerce a.remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--vv-tap);
	height: var(--vv-tap);
	transform: translate(-50%, -50%);
}

.woocommerce a.remove:hover {
	background: var(--vv-danger);
	border-color: var(--vv-danger);
	color: #fff;
}

/* Empty summary ------------------------------------------------------------ */

.cart-empty {
	max-width: 48rem;
	margin-inline: auto;
	padding-block: 3rem 4rem;
}

.cart-empty h1 {
	font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
}

.cart-empty .t-lead {
	margin-top: 1.5rem;
	max-width: 40rem;
}

.cart-empty__action {
	margin-top: 2rem;
}

.cart-collaterals {
	margin-top: 2.5rem;
}

/* Items on the left, totals alongside them, so the summary reads as one block
   instead of a panel floating in an empty half of the page. Only applied when
   there is a totals panel — the empty state keeps its own centred layout. */
@media (min-width: 1024px) {
	.woocommerce-cart .woocommerce:has(.cart-collaterals) {
		display: grid;
		grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
	}

	.woocommerce-cart .woocommerce:has(.cart-collaterals) .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .cart-collaterals {
		margin-top: 0;
	}

	.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
		position: sticky;
		top: 5.5rem;
		max-width: none;
		margin-left: 0;
	}
}

.cart_totals h2,
.cross-sells h2 {
	font-family: var(--vv-font-serif);
	font-size: 1.375rem;
	margin-bottom: 1.25rem;
}

/* The totals panel is a list of label/value rows, not a data table. */
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding-block: 0.875rem;
	vertical-align: baseline;
}

.woocommerce .cart_totals table.shop_table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.woocommerce .cart_totals tr:last-child th,
.woocommerce .cart_totals tr:last-child td {
	border-bottom: 0;
	padding-bottom: 0;
}

.woocommerce .cart-collaterals .cart_totals {
	max-width: 26rem;
	margin-left: auto;
	padding: 1.5rem;
	border: 1px solid var(--vv-border);
	border-radius: var(--vv-radius);
	background: var(--vv-surface);
}

.woocommerce .cart_totals .order-total .amount {
	font-family: var(--vv-font-serif);
	font-size: 1.375rem;
}

.woocommerce .wc-proceed-to-checkout {
	margin-top: 1.25rem;
}

.woocommerce .wc-proceed-to-checkout .checkout-button {
	width: 100%;
}

/* WooCommerce puts the coupon in a block-level div and leaves "Update cart"
   loose after it, so the button drops onto its own line. One flex row puts the
   coupon at the start and the update at the end. */
/* The cell stays a table cell — giving it `display: flex` drops it out of the
   table layout and it no longer spans the full width. The coupon group sits
   inline at the start and the update button floats to the end. */
.woocommerce table.shop_table td.actions {
	padding: 1.5rem 0;
	border-bottom: 0;
}

/* The float is contained by a clearing pseudo-element rather than by
   `overflow: hidden`, which clipped the focus ring on the coupon field, or by
   `display: flow-root`, which takes the cell out of the table layout so it no
   longer spans its colspan. */
.woocommerce table.shop_table td.actions::after {
	content: "";
	display: table;
	clear: both;
}

.woocommerce .coupon {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.woocommerce button[name="update_cart"] {
	float: right;
}

.woocommerce .coupon label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.woocommerce .coupon input[type="text"] {
	width: auto;
	min-width: 12rem;
	max-width: 16rem;
}

/* WooCommerce's own small-screen sheet is not loaded (the theme replaces its
   styling wholesale), so the basket table gets its own stacked layout rather
   than pushing the page sideways. */
@media (max-width: 767px) {
	.woocommerce-cart-form table.shop_table thead {
		display: none;
	}

	.woocommerce-cart-form table.shop_table,
	.woocommerce-cart-form table.shop_table tbody,
	.woocommerce-cart-form table.shop_table tr,
	.woocommerce-cart-form table.shop_table td {
		display: block;
		width: auto;
	}

	.woocommerce-cart-form table.shop_table tr.cart_item {
		position: relative;
		padding: 1.25rem 2.5rem 1.25rem 0;
		border-bottom: 1px solid var(--vv-border);
	}

	.woocommerce-cart-form table.shop_table tr.cart_item td {
		padding: 0.15rem 0;
		border: 0;
		text-align: left;
	}

	.woocommerce-cart-form td.product-remove {
		position: absolute;
		top: 1.25rem;
		right: 0;
	}

	.woocommerce-cart-form td.product-thumbnail {
		padding-bottom: 0.75rem;
	}

	/* Each package is sold one at a time, so price and subtotal always agree.
	   Matched on the table too, or the block rule above wins on specificity. */
	.woocommerce-cart-form table.shop_table td.product-price {
		display: none;
	}

	.woocommerce-cart-form td.product-subtotal::before {
		content: attr(data-title);
		margin-right: 0.5rem;
		font-size: var(--vv-label-size);
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--vv-muted-fg);
	}
}

@media (max-width: 559px) {
	.woocommerce .coupon {
		display: flex;
		width: 100%;
	}

	.woocommerce .coupon input[type="text"] {
		width: 100%;
		max-width: none;
	}

	.woocommerce .coupon .button,
	.woocommerce button[name="update_cart"] {
		float: none;
		width: 100%;
		margin-top: 0.75rem;
	}
}

/* Nothing to update until a field changes, so the resting state is quiet
   rather than a second filled button competing with checkout. */
.woocommerce button[name="update_cart"] {
	background: transparent;
	border-color: color-mix(in oklab, var(--vv-ink) 30%, var(--vv-border));
	color: var(--vv-fg);
}

.woocommerce button[name="update_cart"]:hover:not(:disabled) {
	background: var(--vv-muted);
	color: var(--vv-fg);
	opacity: 1;
}

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

.wc-page {
	max-width: none;
}

.woocommerce-checkout .col2-set {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

/* Form on the left, order summary alongside it and pinned while scrolling. */
@media (min-width: 1024px) {
	form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		column-gap: 3.5rem;
		align-items: start;
	}

	#customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	#order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	#order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: 6rem;
	}
}

.woocommerce-checkout h3,
.woocommerce-billing-fields h3 {
	font-family: var(--vv-font-serif);
	font-size: 1.375rem;
	margin-bottom: 1rem;
}

.woocommerce form .form-row {
	display: block;
	margin-bottom: 1.25rem;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vv-muted-fg);
}

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

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 100%;
	float: none;
}

@media (min-width: 640px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: calc(50% - 0.625rem);
		display: inline-block;
		vertical-align: top;
	}

	.woocommerce form .form-row-first {
		margin-right: 1.25rem;
	}
}

/* Select2 — WooCommerce enhances the country and state fields with it, and it
   ships its own look: a 28px box with a grey border next to 52px theme fields.
   These rules bring it in line rather than leaving two field styles on one
   form. */

.woocommerce .select2-container {
	width: 100% !important;
}

.woocommerce .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: auto;
	min-height: var(--vv-tap);
	padding: 0.75rem 2.25rem 0.75rem 0.875rem;
	border: 1px solid var(--vv-border);
	border-radius: var(--vv-radius);
	background: var(--vv-surface);
	transition: border-color var(--vv-transition);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	/* Matches the body line-height so the box lands on the same height as the
	   text inputs beside it. */
	line-height: 1.6;
	color: var(--vv-fg);
	font-size: 1rem;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--vv-muted-fg);
}

/* Replace the default triangle with the same chevron the listing filters use. */
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 0;
	width: 2.25rem;
	height: 100%;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b {
	width: 0.5rem;
	height: 0.5rem;
	margin: -0.35rem 0 0 -0.35rem;
	border: 0;
	border-right: 1.5px solid var(--vv-muted-fg);
	border-bottom: 1.5px solid var(--vv-muted-fg);
	transform: rotate(45deg);
}

.woocommerce .select2-container--open .select2-selection--single .select2-selection__arrow b {
	margin-top: -0.1rem;
	transform: rotate(-135deg);
}

.woocommerce .select2-container--open .select2-selection--single {
	border-color: var(--vv-accent);
}

/* The dropdown is appended to the body, so it sits outside .woocommerce. */
.select2-dropdown {
	border: 1px solid var(--vv-border);
	border-radius: var(--vv-radius);
	background: var(--vv-surface);
	box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.4);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--vv-border);
	border-radius: var(--vv-radius);
	font-size: 0.9375rem;
}

.select2-container--default .select2-results__option {
	padding: 0.55rem 0.875rem;
	font-size: 0.9375rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--vv-muted);
	color: var(--vv-fg);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--vv-primary);
	color: var(--vv-primary-fg);
}

.woocommerce-checkout-review-order {
	margin-top: 1rem;
	padding: 1.5rem;
	border: 1px solid var(--vv-border);
	border-radius: var(--vv-radius);
	background: var(--vv-surface);
}

#order_review_heading {
	margin-top: 2.5rem;
}

.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td {
	padding-inline: 0;
}

#payment ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	border-top: 1px solid var(--vv-border);
}

#payment ul.payment_methods li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--vv-border);
}

#payment .payment_box {
	margin-top: 0.75rem;
	padding: 0.875rem 1rem;
	background: var(--vv-muted);
	border-radius: var(--vv-radius);
	font-size: 0.875rem;
	color: var(--vv-muted-fg);
}

#payment .place-order {
	margin-top: 1.5rem;
}

#payment #place_order {
	width: 100%;
	background: var(--vv-coral);
	color: var(--vv-coral-fg);
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

/* Order received and account ----------------------------------------------- */

.woocommerce-order-overview,
.woocommerce-thankyou-order-details {
	display: grid;
	gap: 1.25rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	margin-block: 2rem;
	padding: 1.5rem;
	border: 1px solid var(--vv-border);
	border-radius: var(--vv-radius);
	background: var(--vv-surface);
	list-style: none;
	font-size: 0.9375rem;
}

.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--vv-font-serif);
	font-size: 1.125rem;
	font-weight: 400;
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--vv-border);
}

.woocommerce-MyAccount-navigation a {
	display: inline-flex;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--vv-border);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--vv-primary);
	border-color: var(--vv-primary);
	color: var(--vv-primary-fg);
}

/* Layout wrappers WooCommerce pages render into */

/* WooCommerce's own wrapper sits inside the theme's `.container`, which already
   sets the width and the gutter. Repeating them here indented the shop content
   past the page heading. */
.woocommerce-page .woocommerce {
	padding-bottom: 2rem;
}

.woocommerce-page .section__inner {
	padding-top: 1rem;
}

.woocommerce-page .woocommerce > h2:first-child {
	font-family: var(--vv-font-serif);
	font-size: 1.75rem;
	margin-bottom: 1.25rem;
}

.woocommerce .woocommerce-breadcrumb {
	display: none;
}

/* Quantity input arrows are noise on a single-deliverable product */
.product-form .quantity input[type="number"]::-webkit-outer-spin-button,
.product-form .quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Card step ---------------------------------------------------------------- */

/* The card fields themselves live in the payment provider's iframe and cannot
   be styled from here — only the frame around them, which is kept to the same
   measure as the checkout form so the step does not feel like a different site. */
.rpayz-form {
	max-width: 34rem;
	margin: 0 auto;
}

#vv-rpayz-element {
	min-height: 15rem;
	margin-bottom: 1.5rem;
}

.rpayz-form__error:empty {
	display: none;
}

.rpayz-form__error {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--vv-radius-media);
	background: color-mix(in oklch, var(--vv-accent) 10%, var(--vv-surface));
	color: var(--vv-ink);
	font-size: 0.9375rem;
}

.rpayz-form .btn {
	width: 100%;
	min-height: var(--vv-tap);
}

.rpayz-form .btn[disabled] {
	cursor: progress;
	opacity: 0.7;
}