/**
 * Vegan Fox - checkout rework.
 *
 * Scoped to the checkout form (.vf-checkout) and the checkout page title.
 * Header, footer and navigation are deliberately untouched.
 *
 * Tokens taken from the Figma (rv251IB6ymqR8NV0q1Ruug, node 4162-1796).
 * The accent resolves to the theme's live brand colour first so the checkout
 * stays consistent with the rest of the site; the Figma value is the fallback.
 */

.vf-checkout {
	--vf-accent: var(--wd-primary-color, #ff5031);
	--vf-ink: #4d4d4d;
	--vf-ink-strong: #3b3b3b;
	--vf-ink-soft: #6b6b6b;
	--vf-line: #d9d9d9;
	--vf-line-input: #b4bbc3;
	--vf-line-selected: #41423d;
	--vf-surface: #f7f7f7;
	--vf-radius-card: 16px;
	--vf-radius: 8px;
	--vf-radius-cta: 12px;
	--vf-gap: 24px;
	--vf-col: 900px;
}

/* ---------------------------------------------------------------- layout - */

.vf-checkout {
	max-width: var(--vf-col);
	margin-inline: auto;
	/* Designer omitted the gap before the newsletter block - added here. */
	padding-bottom: 80px;
	font-family: "Nunito Sans", sans-serif;
	color: var(--vf-ink-strong);
}

/* The theme ships a two-column flex checkout:
     form.woocommerce-checkout > :is(.customer-details,.checkout-order-review)
       { flex:1 0 0; max-width:50% }
   (woodmart/css/parts/woo-page-checkout-predefined.min.css)
   That selector is tag-qualified, so the override has to be too. The design is
   one centred stack. */
form.woocommerce-checkout.vf-checkout {
	display: block;
}

form.woocommerce-checkout.vf-checkout > .customer-details,
form.woocommerce-checkout.vf-checkout > .checkout-order-review,
form.woocommerce-checkout.vf-checkout > .vf-shipping {
	flex: none;
	width: 100%;
	max-width: none;
	float: none;
	padding: 0;
	position: static;
}

/* the theme makes the review column sticky in the sidebar layout */
form.woocommerce-checkout.vf-checkout > .checkout-order-review > * {
	position: static;
	top: auto;
}

.vf-checkout .vf-section-title,
.vf-checkout #order_review_heading {
	font-family: "Dosis", sans-serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 1.2;
	color: var(--vf-ink);
	margin: 0 0 var(--vf-gap);
	text-transform: none;
}

/* ------------------------------------------------------- toggles on top - */

.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login {
	max-width: 900px;
	margin-inline: auto;
}

/* Theme styles .woocommerce-info as a bordered notice with an icon; the design
   is a plain centred line. Selectors are tag/attribute qualified to win. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout div.woocommerce-form-login-toggle div.woocommerce-info,
.woocommerce-checkout div.woocommerce-form-coupon-toggle div.woocommerce-info {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 4px 0 !important;
	margin: 0 !important;
	text-align: center;
	font-size: 16px;
	color: var(--vf-ink-strong, #3b3b3b);
	display: block;
	min-height: 0;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

.woocommerce-checkout .woocommerce-form-login-toggle a,
.woocommerce-checkout .woocommerce-form-coupon-toggle a {
	color: var(--vf-accent);
	text-decoration: underline;
	font-weight: 600;
}

/* ------------------------------------------------------------- steps bar - */

/* Woodmart prints this <ul> inside the page-title block on BOTH cart and
   checkout, and the child theme overrides the pluggable woodmart_checkout_steps()
   to supply the design's labels. Banner + steps are the only rules in this file
   that apply to the cart page; everything else is scoped to .vf-checkout, a class
   that exists only on the checkout form.

   Figma "Headline" frame: 1440x180 with a 685x24 step row centred at y=78.
   Woodmart's title-size-large adds 100px padding top and bottom (242px total),
   so the band is reset to a fixed 180px and centred. Step text 18/24 weight 400,
   colours #878787 (past) / #F9F9F8 (current) / #CFCFCF (future). */

.woocommerce-checkout .wd-page-title.page-title,
.woocommerce-cart .wd-page-title.page-title {
	min-height: 180px;
	height: 180px;
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The site's scrim is declared as .wd-page-title::before { z-index:0 }, but
   .wd-page-title-bg (the image) is position:absolute with z-index:auto, so the
   image painted over the scrim and it never darkened anything. Restack it above
   the image, with the step row above both. */
.woocommerce-checkout .wd-page-title.page-title > .wd-page-title-bg,
.woocommerce-cart .wd-page-title.page-title > .wd-page-title-bg {
	z-index: 0;
}

.woocommerce-checkout .wd-page-title.page-title::before,
.woocommerce-cart .wd-page-title.page-title::before {
	z-index: 1;
}

.woocommerce-checkout .wd-page-title.page-title > .container,
.woocommerce-cart .wd-page-title.page-title > .container {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wd-checkout-steps.vf-checkout-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	z-index: 2;
	font-family: "Nunito Sans", sans-serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.wd-checkout-steps.vf-checkout-steps > li,
.wd-checkout-steps.vf-checkout-steps > li.step-inactive {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
}

.wd-checkout-steps.vf-checkout-steps > li::marker {
	content: none;
}

/* Separator: reuse the theme's own arrow glyph
   (.wd-checkout-steps li:not(:last-child):after -> "\f120" in woodmart-font)
   rather than drawing a second one, which would double it up. */
.wd-checkout-steps.vf-checkout-steps > li:not(:last-child)::after {
	color: #cfcfcf;
	opacity: 0.9;
	font-size: 75%;
	font-weight: 400;
}

.wd-checkout-steps.vf-checkout-steps a,
.wd-checkout-steps.vf-checkout-steps > li > span,
.wd-checkout-steps.vf-checkout-steps a span {
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	opacity: 1;
	background: none;
	border: 0;
	padding: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* past step */
.wd-checkout-steps.vf-checkout-steps .step-cart a span {
	color: #878787;
}

/* future step */
.wd-checkout-steps.vf-checkout-steps .step-complete > span {
	color: #cfcfcf;
}

/* current step - brighter, same weight; keeps the theme's brand underline */
.wd-checkout-steps.vf-checkout-steps .step-active > a span,
.wd-checkout-steps.vf-checkout-steps .step-active > span {
	color: #f9f9f8;
	font-weight: 400;
	text-decoration: underline 2px solid var(--wd-primary-color, #ff5031);
	text-underline-offset: 6px;
}

.wd-checkout-steps.vf-checkout-steps a:hover span {
	color: #fff;
}

@media (max-width: 768px) {
	.woocommerce-checkout .wd-page-title.page-title,
	.woocommerce-cart .wd-page-title.page-title {
		height: auto;
		min-height: 120px;
		padding: 24px 0;
	}

	.wd-checkout-steps.vf-checkout-steps,
	.wd-checkout-steps.vf-checkout-steps a span,
	.wd-checkout-steps.vf-checkout-steps > li > span {
		font-size: 13px;
		line-height: 18px;
	}

	.wd-checkout-steps.vf-checkout-steps,
	.wd-checkout-steps.vf-checkout-steps > li {
		gap: 12px;
	}
}

/* -------------------------------------------------------------- shipping - */

.vf-shipping {
	margin-bottom: 48px;
}

.vf-shipping-package {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* Shipping cards - Figma spec (Frame 427322512):
   442x74 in a 900 row with 16px gap, 8px radius, 16px padding,
   1.5px #4D4D4D border when selected, carrier logo 32px tall. */
.vf-ship-card {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 74px;
	padding: 16px;
	border: 1px solid var(--vf-line);
	border-radius: var(--vf-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	margin: 0;
}

.vf-ship-card:hover {
	border-color: var(--vf-line-input);
}

.vf-ship-card.is-selected {
	border: 1.5px solid #4d4d4d;
	box-shadow: none;
}

/* The radio itself is not in the design - the whole card is the control. */
.vf-ship-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.vf-ship-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.vf-ship-card__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: #4d4d4d;
}

.vf-ship-card__label .montonio-shipping-label {
	font-weight: 400;
}

.vf-ship-card__label .amount {
	font-weight: 700;
	color: #4d4d4d;
}

/* Carrier logo: a sibling of the text block, 32px tall (DPD 73x32, Omniva 92x32
   in the design). Rendered outside .vf-ship-card__label by render_rates() so it
   cannot inflate the label line height. */
.vf-ship-card__logo {
	margin-left: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 0;
}

.vf-ship-card__logo img {
	width: auto;
	max-width: 100px;
	height: 32px;
	object-fit: contain;
	display: block;
}

.vf-ship-card__eta {
	font-family: "Nunito Sans", sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: #747474;
}


/* Montonio pickup-point dropdown, rendered into .vf-shipping-extra. */
.vf-shipping-extra {
	margin-top: var(--vf-gap);
}

.vf-shipping-extra:empty {
	margin-top: 0;
}

.vf-shipping-extra label,
.vf-checkout .vf-order-notes label {
	display: block;
	font-size: 16px;
	color: var(--vf-ink-strong);
	margin-bottom: 8px;
}

.vf-checkout .vf-order-notes {
	margin-top: var(--vf-gap);
}

.vf-checkout .vf-order-notes textarea {
	min-height: 150px;
	resize: vertical;
}

/* ------------------------------------------------------- fields / inputs - */

/* The "ship to a different address" control is an <h3> inside
   .woocommerce-shipping-fields, i.e. a sibling container from the newsletter and
   create-account rows in .woocommerce-billing-fields. The design orders them
   ship-to -> newsletter -> create account, so both containers are flattened into
   one grid with display:contents and then ordered. Presentation only - no markup
   or template changes, and div.shipping_address still slideToggles normally. */
.vf-checkout #customer_details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 4px;
}

.vf-checkout .woocommerce-billing-fields,
.vf-checkout .woocommerce-billing-fields__field-wrapper,
.vf-checkout .woocommerce-account-fields,
.vf-checkout .woocommerce-shipping-fields {
	display: contents;
}

.vf-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 4px;
}

/* order within the flattened grid (unset rows default to 0) */
.vf-checkout #ship-to-different-address {
	order: 1;
}

.vf-checkout .kl_newsletter_checkbox_field {
	order: 2;
}

.vf-checkout .form-row.create-account,
.vf-checkout #account_password_field {
	order: 3;
}

.vf-checkout div.shipping_address {
	order: 4;
	grid-column: 1 / -1;
}

.vf-checkout .form-row {
	float: none !important;
	width: auto !important;
	margin: 0 0 16px;
	padding: 0;
	grid-column: span 2;
}

.vf-checkout .form-row.form-row-first,
.vf-checkout .form-row.form-row-last {
	grid-column: span 1;
}

.vf-checkout .form-row > label {
	display: block;
	font-size: 16px;
	color: var(--vf-ink-strong);
	margin-bottom: 8px;
}

.vf-checkout .form-row .required {
	color: #e02b27;
	text-decoration: none;
}

.vf-checkout .form-row .optional {
	color: var(--vf-ink-soft);
}

.vf-checkout .form-row input[type="text"],
.vf-checkout .form-row input[type="email"],
.vf-checkout .form-row input[type="tel"],
.vf-checkout .form-row input[type="password"],
.vf-checkout .form-row input[type="number"],
.vf-checkout .form-row textarea,
.vf-checkout .form-row select,
.vf-checkout .select2-container .select2-selection,
.vf-shipping-extra select {
	width: 100%;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid var(--vf-line-input);
	border-radius: var(--vf-radius);
	background-color: #fff;
	font-size: 16px;
	color: var(--vf-ink-strong);
	box-shadow: none;
}

.vf-checkout .form-row input:focus,
.vf-checkout .form-row textarea:focus,
.vf-checkout .form-row select:focus,
.vf-shipping-extra select:focus {
	border-color: var(--vf-line-selected);
	outline: none;
}

.vf-checkout .select2-container--default .select2-selection--single {
	height: 48px;
	display: flex;
	align-items: center;
}

/* Checkbox rows: newsletter, create account, ship-to-different. */
.vf-checkout .form-row.create-account,
.vf-checkout .kl_newsletter_checkbox_field,
.vf-checkout #ship-to-different-address {
	grid-column: span 2;
	margin-bottom: 10px;
}

.vf-checkout #ship-to-different-address {
	font-size: 16px;
	font-weight: 400;
}

.vf-checkout #ship-to-different-address label,
.vf-checkout .form-row.create-account label,
.vf-checkout .kl_newsletter_checkbox_field label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.vf-checkout input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	accent-color: var(--vf-accent);
	flex: 0 0 auto;
}

/* B2Bking VAT fields - kept, aligned to the same grid. */
.vf-checkout .b2bking_vat_field_container,
.vf-checkout [id^="b2bking_custom_"] {
	grid-column: span 2;
}

.vf-checkout .b2bking_vat_countries_hidden {
	display: none !important;
}

/* --------------------------------------------------------- order review - */

.vf-checkout .checkout-order-review {
	background: var(--vf-surface);
	border-radius: var(--vf-radius-card);
	padding: 32px;
	margin-top: 48px;
}

.vf-checkout .vf-order-table {
	display: block;
	background: #fff;
	border-radius: var(--vf-radius);
	padding: 8px 24px 24px;
	margin: 0 0 32px;
	border: 0;
}

.vf-checkout .vf-order-table thead,
.vf-checkout .vf-order-table tbody,
.vf-checkout .vf-order-table tfoot {
	display: block;
	width: 100%;
}

.vf-checkout .vf-order-table tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 110px 130px 110px;
	align-items: center;
	gap: 12px;
	border: 0;
	border-bottom: 1px solid #ececec;
	padding: 16px 0;
}

.vf-checkout .vf-order-table thead tr {
	padding: 16px 0 12px;
	border-bottom: 1px solid #ececec;
}

.vf-checkout .vf-order-table th,
.vf-checkout .vf-order-table td {
	border: 0;
	padding: 0;
	background: none;
	font-size: 16px;
}

.vf-checkout .vf-cell-price,
.vf-checkout .vf-cell-price .amount,
.vf-checkout .vf-cell-price bdi {
	color: var(--vf-ink-strong);
	font-weight: 400;
}

.vf-checkout .vf-cell-total,
.vf-checkout .vf-cell-total .amount,
.vf-checkout .vf-cell-total bdi {
	color: var(--vf-ink-strong);
	font-weight: 600;
}

.vf-checkout .vf-order-table thead th {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vf-ink-soft);
}

.vf-checkout .vf-order-table .vf-cell-price,
.vf-checkout .vf-order-table .vf-cell-qty,
.vf-checkout .vf-order-table .vf-cell-total,
.vf-checkout .vf-order-table thead .product-price,
.vf-checkout .vf-order-table thead .product-quantity,
.vf-checkout .vf-order-table thead .product-total {
	text-align: right;
	justify-self: end;
}

.vf-checkout .vf-order-table thead .product-quantity,
.vf-checkout .vf-order-table .vf-cell-qty {
	justify-self: center;
	text-align: center;
}

/* product cell: X + thumb + title */
.vf-checkout .vf-cell-prod {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.vf-checkout .wd-checkout-remove-btn-wrapp {
	flex: 0 0 auto;
}

.vf-checkout .wd-checkout-remove-btn {
	position: static;
	display: block;
	width: 18px;
	height: 18px;
	opacity: 0.55;
}

.vf-checkout .wd-checkout-remove-btn:hover {
	opacity: 1;
	color: var(--vf-accent);
}

.vf-checkout .wd-checkout-prod-img {
	flex: 0 0 auto;
	width: 56px;
}

.vf-checkout .wd-checkout-prod-img img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.vf-checkout .wd-checkout-prod-cont {
	min-width: 0;
	flex: 1 1 auto;
}

.vf-checkout .wd-checkout-prod-title {
	font-size: 15px;
	line-height: 1.35;
}

.vf-checkout .wd-checkout-prod-title a,
.vf-checkout .cart-product-label-link {
	color: var(--vf-accent);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 400;
}

.vf-checkout .wd-checkout-prod-title a:hover {
	text-decoration: underline;
}

/* quantity stepper */
.vf-checkout .vf-cell-qty .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--vf-line);
	border-radius: var(--vf-radius);
	overflow: hidden;
	background: #fff;
	height: 40px;
}

.vf-checkout .vf-cell-qty .quantity input.qty {
	width: 44px;
	min-height: 0;
	height: 38px;
	border: 0;
	border-inline: 1px solid var(--vf-line);
	border-radius: 0;
	text-align: center;
	padding: 0;
	font-size: 16px;
	-moz-appearance: textfield;
	appearance: textfield;
}

.vf-checkout .vf-cell-qty .quantity input.qty::-webkit-outer-spin-button,
.vf-checkout .vf-cell-qty .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.vf-checkout .vf-cell-qty .quantity :is(.minus, .plus, .wd-plus, .wd-minus) {
	width: 38px;
	height: 38px;
	border: 0;
	background: none;
	color: var(--vf-ink-soft);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.vf-checkout .vf-cell-qty .quantity :is(.minus, .plus, .wd-plus, .wd-minus):hover {
	color: var(--vf-ink-strong);
}

/* totals */
.vf-checkout .vf-order-table tfoot tr {
	grid-template-columns: minmax(0, 1fr) auto;
	border-bottom: 0;
	padding: 6px 0;
}

.vf-checkout .vf-order-table tfoot th {
	font-weight: 400;
	font-size: 16px;
	text-align: left;
	color: var(--vf-ink-strong);
}

.vf-checkout .vf-order-table tfoot td {
	text-align: right;
	justify-self: end;
}

.vf-checkout .vf-order-table tfoot .vf-row-subtotal {
	padding-bottom: 16px;
	border-bottom: 1px solid #ececec;
}

.vf-checkout .vf-order-table tfoot .vf-row-total {
	padding-top: 16px;
	align-items: start;
}

.vf-checkout .vf-order-table tfoot .vf-row-total th {
	font-family: "Nunito Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--vf-ink-strong);
}

.vf-checkout .vf-order-table tfoot .vf-row-total td {
	font-size: 20px;
	font-weight: 700;
	color: var(--vf-accent);
	line-height: 1.3;
}

.vf-checkout .vf-order-table tfoot .vf-row-total .includes_tax {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: var(--vf-ink-soft);
}

.vf-checkout .vf-order-table tfoot .vf-row-total .includes_tax .amount {
	color: var(--vf-accent);
	font-weight: 600;
}

/* ---------------------------------------------------------------- payment - */

.vf-checkout #payment {
	background: none;
	border-radius: 0;
	padding: 0;
}

.vf-checkout #payment::before {
	display: none;
}

.vf-checkout #order_review_heading + #order_review #payment {
	margin-top: 32px;
}

.vf-checkout #payment .wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.vf-checkout #payment .wc_payment_method {
	border: 0;
	padding: 0;
	margin: 0 0 12px;
	background: none;
}

.vf-checkout #payment .wc_payment_method > label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 400;
	color: var(--vf-ink-strong);
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.vf-checkout #payment .wc_payment_method > label img {
	max-height: 24px;
	width: auto;
	margin: 0 2px;
	display: inline-block;
}

.vf-checkout #payment input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--vf-accent);
	margin: 0;
}

/* the expanded panel (Montonio bank grid) */
.vf-checkout #payment .payment_box {
	background: #fff;
	border-radius: var(--vf-radius);
	padding: 20px;
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--vf-ink-soft);
}

.vf-checkout #payment .payment_box::before {
	display: none;
}

.vf-checkout .montonio-bank-items--grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

/* Montonio ships .montonio-bank-item { width:100px }, which stops the cards
   filling their grid cells. The design has them stretched evenly across the row. */
.vf-checkout .montonio-bank-payments-form .montonio-bank-items .montonio-bank-item,
.vf-checkout .montonio-bank-item {
	width: auto;
	min-width: 0;
	max-width: none;
	flex: 1 1 auto;
	border: 1px solid var(--vf-line);
	border-radius: var(--vf-radius);
	background: #fff;
	padding: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.vf-checkout .montonio-bank-payments-form .montonio-bank-items .montonio-bank-item-img,
.vf-checkout #montonio-payments-description.montonio-bank-items .montonio-bank-item-img {
	max-width: 100%;
	max-height: 28px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.vf-checkout .montonio-bank-payments-form .montonio-bank-items .montonio-bank-item:hover,
.vf-checkout .montonio-bank-payments-form .montonio-bank-items .montonio-bank-item.active,
.vf-checkout .montonio-bank-item.selected {
	border-color: var(--vf-line-selected);
}

/* ------------------------------------------------------- terms + place order - */

.vf-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--vf-line);
}

.vf-checkout .woocommerce-privacy-policy-text p {
	font-size: 15px;
	color: var(--vf-ink-strong);
	margin: 0 0 12px;
}

.vf-checkout .woocommerce-privacy-policy-text a,
.vf-checkout .woocommerce-terms-and-conditions-checkbox-text a {
	color: var(--vf-accent);
	text-decoration: underline;
	font-weight: 600;
}

.vf-checkout .validate-required .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 15px;
}

.vf-checkout .form-row.place-order {
	margin: 24px 0 0;
	padding: 0;
}

.vf-checkout #place_order {
	background: var(--vf-accent);
	color: #fff;
	border: 0;
	border-radius: var(--vf-radius-cta);
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	min-height: 56px;
	padding: 0 32px;
	width: auto;
	min-width: 194px;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.vf-checkout #place_order:hover {
	filter: brightness(0.94);
	background: var(--vf-accent);
	color: #fff;
}

/* ------------------------------------------- coupon + login forms (top) - */

/* These two forms are printed by woocommerce_before_checkout_form, i.e. OUTSIDE
   form.vf-checkout, so the field styling further up does not reach them. They
   are styled here to the same system: 48px controls, 8px radius, --vf-line-input
   borders - otherwise they fall back to the theme's square, red-bordered inputs. */

.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login {
	max-width: 900px;
	margin: 0 auto 24px;
	padding: 20px;
	border: 1px solid var(--vf-line, #d9d9d9);
	border-radius: var(--vf-radius-card, 16px);
	background: var(--vf-surface, #f7f7f7);
	font-family: "Nunito Sans", sans-serif;
}

.woocommerce-checkout form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.woocommerce-checkout form.checkout_coupon .form-row {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	width: auto;
	min-width: 0;
	float: none;
}

.woocommerce-checkout form.checkout_coupon .form-row-last {
	flex: 0 0 auto;
}

.woocommerce-checkout form.checkout_coupon .clear {
	display: none;
}

.woocommerce-checkout form.checkout_coupon input.input-text,
.woocommerce-checkout form.woocommerce-form-login input.input-text,
.woocommerce-checkout form.woocommerce-form-login input[type="text"],
.woocommerce-checkout form.woocommerce-form-login input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid var(--vf-line-input, #b4bbc3);
	border-radius: var(--vf-radius, 8px);
	background-color: #fff;
	box-shadow: none;
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #3b3b3b;
}

.woocommerce-checkout form.checkout_coupon input.input-text:focus,
.woocommerce-checkout form.woocommerce-form-login input:focus {
	border-color: var(--vf-line-selected, #41423d);
	outline: none;
}

.woocommerce-checkout form.checkout_coupon input.input-text::placeholder {
	color: #878787;
	opacity: 1;
}

.woocommerce-checkout form.checkout_coupon button.button,
.woocommerce-checkout form.woocommerce-form-login button.button {
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--vf-radius, 8px);
	background: var(--vf-accent, #ff5031);
	color: #fff;
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.woocommerce-checkout form.checkout_coupon button.button:hover,
.woocommerce-checkout form.woocommerce-form-login button.button:hover {
	background: var(--vf-accent, #ff5031);
	color: #fff;
	filter: brightness(0.94);
}

@media (max-width: 768px) {
	.woocommerce-checkout form.checkout_coupon {
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-checkout form.checkout_coupon button.button {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ mobile - */

@media (max-width: 991px) {
	.vf-checkout .montonio-bank-items--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.vf-checkout {
		padding-bottom: 48px;
	}

	.vf-checkout .vf-section-title,
	.vf-checkout #order_review_heading {
		font-size: 22px;
	}

	/* single column stack, per the 360px frame */
	.vf-shipping-package,
	.vf-checkout .woocommerce-billing-fields__field-wrapper,
	.vf-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.vf-checkout .form-row,
	.vf-checkout .form-row.form-row-first,
	.vf-checkout .form-row.form-row-last {
		grid-column: span 1;
	}

	.vf-checkout .checkout-order-review {
		padding: 20px 16px;
	}

	.vf-checkout .vf-order-table {
		padding: 8px 16px 16px;
	}

	/* product rows restructure: thumb + title, then qty, then price */
	.vf-checkout .vf-order-table thead .product-price,
	.vf-checkout .vf-order-table thead .product-quantity,
	.vf-checkout .vf-order-table thead .product-total {
		display: none;
	}

	.vf-checkout .vf-order-table thead tr,
	.vf-checkout .vf-order-table tbody tr {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 10px;
	}

	.vf-checkout .vf-cell-prod {
		grid-column: 1 / -1;
		align-items: flex-start;
	}

	.vf-checkout .vf-cell-qty {
		justify-self: start;
		grid-column: 1;
	}

	.vf-checkout .vf-cell-price {
		display: none;
	}

	.vf-checkout .vf-cell-total {
		grid-column: 2;
		justify-self: end;
		font-weight: 600;
	}

	.vf-checkout .montonio-bank-items--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vf-checkout #place_order {
		width: 100%;
	}

	.wd-checkout-steps.vf-checkout-steps {
		gap: 12px;
		font-size: 12px;
	}

	.wd-checkout-steps.vf-checkout-steps > li {
		gap: 12px;
	}

	.wd-checkout-steps.vf-checkout-steps > li:not(:last-child)::after {
		font-size: 70%;
	}
}

/* ==========================================================================
   Typography - exact scale from the Figma checkout frame (node 4162-1946).

   The mock mixes in placeholder families from pasted components (Inter,
   Geologica, Montserrat, Neue Haas, Open Sans, Quasimoda, Calibri, Gilroy).
   The two intentional families are Dosis (headings) and Nunito Sans (body) -
   both already enqueued by the theme as
   Dosis:400,500,600 | Nunito Sans:400,600,700.
   Sizes/weights/line-heights below are taken verbatim from the design; the
   stray families are mapped onto Nunito Sans at their specified size+weight.
   ========================================================================== */

.vf-checkout,
.vf-checkout input,
.vf-checkout select,
.vf-checkout textarea,
.vf-checkout button,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	font-family: "Nunito Sans", sans-serif;
}

/* Section headings - Dosis 600 / 28 / 34 */
.vf-checkout .vf-section-title,
.vf-checkout #order_review_heading {
	font-family: "Dosis", sans-serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 34px;
	color: #4d4d4d;
	letter-spacing: 0;
}

/* Sub-heading (Maksājuma metode) - Dosis 600 / 22 / 28 */
.vf-checkout #payment > h3,
.vf-checkout .vf-payment-title {
	font-family: "Dosis", sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 28px;
	color: #4d4d4d;
}

/* Field labels - 500/16/20. Nunito Sans has no 500, so 600 is the nearest cut. */
.vf-checkout .form-row > label,
.vf-checkout .vf-shipping-extra label,
.vf-checkout .vf-order-notes label {
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: #4d4d4d;
}

/* Inputs + placeholders - 400/16, placeholder #878787 */
.vf-checkout .form-row input,
.vf-checkout .form-row select,
.vf-checkout .form-row textarea,
.vf-checkout .vf-shipping-extra select {
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #3b3b3b;
}

.vf-checkout .form-row ::placeholder,
.vf-checkout .vf-shipping-extra ::placeholder {
	color: #878787;
	font-weight: 400;
	opacity: 1;
}

/* Checkbox / body copy - 400/16/20 */
.vf-checkout #ship-to-different-address label,
.vf-checkout .form-row.create-account label,
.vf-checkout .kl_newsletter_checkbox_field label,
.vf-checkout .woocommerce-privacy-policy-text p,
.vf-checkout .woocommerce-terms-and-conditions-checkbox-text {
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #4d4d4d;
}

/* Top toggles - 600/16/20 */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: #242424;
}

/* Shipping card: title 600/16/20, price 700/16, ETA 400/14/20 #747474 */
.vf-checkout .vf-ship-card__label {
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: #4d4d4d;
}

.vf-checkout .vf-ship-card__label .amount {
	font-weight: 700;
	color: #747474;
}

.vf-checkout .vf-ship-card__eta {
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #747474;
}

/* Order table head - 600/14/20 #41423D, uppercase per the mock */
.vf-checkout .vf-order-table thead th {
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #41423d;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Line price / line total - 600/16 */
.vf-checkout .vf-cell-price,
.vf-checkout .vf-cell-price .amount,
.vf-checkout .vf-cell-total,
.vf-checkout .vf-cell-total .amount {
	font-weight: 600;
	font-size: 16px;
	color: #4d4d4d;
}

/* Product title - 400/16/20 */
.vf-checkout .wd-checkout-prod-title,
.vf-checkout .wd-checkout-prod-title a {
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
}

/* Subtotal rows - 400/16/20 */
.vf-checkout .vf-order-table tfoot th,
.vf-checkout .vf-order-table tfoot td {
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #4d4d4d;
}

/* Grand total - label 600/20/28 #3B3B3B, amount 700/20/28 accent */
.vf-checkout .vf-order-table tfoot .vf-row-total th {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: #3b3b3b;
}

.vf-checkout .vf-order-table tfoot .vf-row-total td,
.vf-checkout .vf-order-table tfoot .vf-row-total td .amount {
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: var(--vf-accent);
}

.vf-checkout .vf-order-table tfoot .vf-row-total .includes_tax {
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #747474;
}

/* Payment method rows - 400/16/20 */
.vf-checkout #payment .wc_payment_method > label {
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #4d4d4d;
}

/* CTA - 600/16 */
.vf-checkout #place_order {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
}

@media (max-width: 768px) {
	.vf-checkout .vf-section-title,
	.vf-checkout #order_review_heading {
		font-size: 22px;
		line-height: 28px;
	}
}

/* ---- alignment / colour corrections against the Figma ---- */

/* Theme centres the order heading; the design is left aligned. */
.vf-checkout .checkout-order-review > #order_review_heading,
.vf-checkout #order_review_heading {
	text-align: left;
}

/* Piegāde / Summa amounts are ink, not accent (accent is the grand total only). */
.vf-checkout .vf-order-table tfoot .vf-row-shipping td,
.vf-checkout .vf-order-table tfoot .vf-row-shipping td .amount,
.vf-checkout .vf-order-table tfoot .vf-row-shipping td bdi,
.vf-checkout .vf-order-table tfoot .vf-row-subtotal td,
.vf-checkout .vf-order-table tfoot .vf-row-subtotal td .amount,
.vf-checkout .vf-order-table tfoot .vf-row-subtotal td bdi,
.vf-checkout .vf-order-table tfoot .cart-discount td,
.vf-checkout .vf-order-table tfoot .fee td {
	color: #4d4d4d;
}

/* CTA is auto width, left aligned (theme stretches it to 100%). */
.vf-checkout .form-row.place-order {
	text-align: left;
}

.vf-checkout .form-row.place-order #place_order,
.woocommerce-checkout .vf-checkout button#place_order {
	width: auto;
	min-width: 194px;
	max-width: 100%;
	display: inline-block;
	float: none;
	text-transform: none;
}

@media (max-width: 768px) {
	.vf-checkout .form-row.place-order #place_order,
	.woocommerce-checkout .vf-checkout button#place_order {
		width: 100%;
	}
}

/* Free-shipping progress bar, relocated to the top of the form.
   Keep the theme's own appearance (wd-style-bordered = dashed outline on a
   transparent background) so it looks identical to production - only spacing
   is set here. */
.vf-checkout > .wd-shipping-progress-bar {
	margin: 0 0 32px;
	background: none;
	border-radius: 0;
}

.vf-checkout > .wd-shipping-progress-bar .wd-free-progress-bar {
	margin: 0;
}


/* ---- checkbox rows: one shared alignment ---- */

.vf-checkout #ship-to-different-address,
.vf-checkout .form-row.create-account,
.vf-checkout .kl_newsletter_checkbox_field {
	grid-column: 1 / -1;
	margin: 0 0 12px;
	padding: 0;
	font-size: 16px;
	font-weight: 400;
}

.vf-checkout #ship-to-different-address label,
.vf-checkout .form-row.create-account label,
.vf-checkout .kl_newsletter_checkbox_field label,
.vf-checkout .woocommerce-terms-and-conditions-checkbox-text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: #4d4d4d;
	cursor: pointer;
}


/* the input-wrapper WooCommerce puts around some checkbox fields */
.vf-checkout .kl_newsletter_checkbox_field .woocommerce-input-wrapper,
.vf-checkout .form-row.create-account .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* B2Bking prints its "check VAT" button between the checkboxes */
.vf-checkout .b2bking_vat_field_container ~ button,
.vf-checkout button.b2bking_vat_check_button,
.vf-checkout #b2bking_vat_check_button {
	order: 1;
	grid-column: 1 / -1;
	justify-self: start;
	min-height: 48px;
	padding: 0 24px;
	margin: 0 0 12px;
	border: 0;
	border-radius: var(--vf-radius);
	background: var(--vf-accent);
	color: #fff;
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
}


/* The Klaviyo opt-in row ships with its own indent, which knocked it ~10px out
   of line with the other two checkboxes. Reset padding on all three. */
.vf-checkout #ship-to-different-address,
.vf-checkout #ship-to-different-address label,
.vf-checkout .form-row.create-account,
.vf-checkout .form-row.create-account label,
.vf-checkout .kl_newsletter_checkbox_field,
.vf-checkout .kl_newsletter_checkbox_field label,
.vf-checkout .kl_newsletter_checkbox_field .woocommerce-input-wrapper {
	padding-left: 0;
	margin-left: 0;
	text-indent: 0;
}

.vf-checkout .kl_newsletter_checkbox_field .woocommerce-input-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Woodmart adds a zero-width ::before to label.checkbox. Combined with a flex
   `gap` that pseudo consumed one gap slot and pushed the Klaviyo checkbox 10px
   right of the other two. Space the label with a margin on the input instead so
   the pseudo cannot offset anything, and all three share one left edge. */
.vf-checkout #ship-to-different-address label,
.vf-checkout .form-row.create-account label,
.vf-checkout .kl_newsletter_checkbox_field label {
	display: inline-flex;
	align-items: center;
	gap: 0;
}



.vf-checkout .kl_newsletter_checkbox_field > .woocommerce-input-wrapper {
	display: block;
	gap: 0;
}

/* Woodmart sets font-size:0 on label.checkbox to collapse whitespace between
   inline children and restores the size on an inner <span>. The Klaviyo opt-in
   renders its text as a bare text node, so it inherited 0 and disappeared.
   Restore an explicit size on the label and its spans. */
.vf-checkout p.form-row.create-account label.checkbox,
.vf-checkout p.form-row.create-account label.checkbox > span,
.vf-checkout h3#ship-to-different-address label.checkbox,
.vf-checkout h3#ship-to-different-address label.checkbox > span {
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: #4d4d4d;
}

.vf-checkout p.form-row.kl_newsletter_checkbox_field label.checkbox .optional,
.vf-checkout p.form-row.create-account label.checkbox .optional {
	font-size: 14px;
	color: var(--vf-ink-soft);
}


/* The Klaviyo opt-in label is translated by a pseudo-element in style.css
   ("Translate Klavio chechout checkbox text hack"): the label is font-size:0 to
   hide the untranslated English text node, and label:before carries the real
   copy per language. Do not restore a font-size on that label and do not clear
   its ::before - style the pseudo instead so it matches the other two checkbox
   rows, and drop its 3px indent so all three share one left edge. */
.vf-checkout #kl_newsletter_checkbox_field label.checkbox::before {
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: #4d4d4d;
	margin-left: 0;
}

/* Section headings inside the flattened #customer_details grid.
   WooCommerce prints "Norēķinu informācija" as a bare <h3> inside
   .woocommerce-billing-fields; once that wrapper is display:contents the heading
   becomes a grid item and was taking a single column, shifting every field one
   cell to the right. Span the full row.
   #ship-to-different-address is also an <h3> but is a checkbox row - excluded. */
.vf-checkout #customer_details > h3,
.vf-checkout .woocommerce-billing-fields > h3,
.vf-checkout .woocommerce-shipping-fields > h3:not(#ship-to-different-address),
.vf-checkout .woocommerce-account-fields > h3 {
	grid-column: 1 / -1;
	margin: 0 0 var(--vf-gap);
	font-family: "Dosis", sans-serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 34px;
	color: var(--vf-ink);
	text-transform: none;
}

/* Montonio's bank-country dropdown is auto-width; the design has it span the
   full width of the payment panel, matching the other selects on the page. */
.vf-checkout .montonio-bank-payments-form .montonio-payments-country-dropdown,
.vf-checkout select.montonio-payments-country-dropdown {
	width: 100%;
	max-width: none;
	min-height: 48px;
	margin-bottom: 16px;
	padding: 10px 16px;
	border: 1px solid var(--vf-line-input);
	border-radius: var(--vf-radius);
	background-color: #fff;
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #3b3b3b;
}

/* ==========================================================================
   Checkboxes - Figma spec: 18x18, 4px radius, 1px #B4BBC3, no fill, 8px gap.
   Native controls (even with accent-color) cannot express that, so the box is
   drawn with appearance:none and a CSS tick for the checked state.
   ========================================================================== */

/* style.css has `.checkout.woocommerce-checkout input { appearance: auto }`,
   which restores native rendering and discards any custom border/radius. It ties
   on specificity and is enqueued later, so these selectors are tag-qualified to
   outrank it. */
/* One selector only: the longer variants were redundant and their higher
   specificity beat the :checked rule below, so the box never filled. */
form.checkout.vf-checkout input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	min-height: 0;
	min-width: 0;
	margin: 0 8px 0 0;
	padding: 0;
	border: 1px solid var(--vf-line-input, #b4bbc3);
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

form.checkout.vf-checkout input[type="checkbox"]:hover {
	border-color: var(--vf-line-selected, #41423d);
}

form.checkout.vf-checkout input[type="checkbox"]:checked {
	background: var(--vf-accent);
	border-color: var(--vf-accent);
}

/* tick */
form.checkout.vf-checkout input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

form.checkout.vf-checkout input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--vf-line-selected, #41423d);
	outline-offset: 1px;
}

/* gap is carried by the input's own margin so a theme ::before cannot offset it */
.vf-checkout #ship-to-different-address label,
.vf-checkout .form-row.create-account label,
.vf-checkout .kl_newsletter_checkbox_field label {
	gap: 0;
}

/* the Klaviyo row's text comes from label:before (see style.css translation hack) */
.vf-checkout #kl_newsletter_checkbox_field label.checkbox::before {
	margin-left: 0;
}