/**
 * Cart + Checkout styling — one shared design language across both pages.
 *
 * Byron Music's existing brand green (the button colour the theme already
 * applies to "Place order" / "Proceed to Checkout") is left alone on
 * purpose — this file is about layout, spacing, typography and structure
 * (the things that made the checkout look cluttered/default), not about
 * recolouring the site. Design tokens below make it easy to change later
 * if that ever changes.
 *
 * What this CANNOT do: change the font/colour/size of text *inside* the
 * Afterpay, PayPal or Zip messages/buttons — all confirmed (by inspecting
 * the live DOM) to render inside locked, cross-origin iframes. That's a
 * browser security boundary, not a styling gap.
 */

:root {
	--bme-font: "Futura", sans-serif;
	--bme-radius: 8px;
	--bme-radius-sm: 6px;
	--bme-border: #e5e5e5;
	--bme-field-bg: #f7f7f7;
	--bme-text-muted: #6b6b6b;
}

/* =========================================================================
   CART PAGE — "Proceed to Checkout" sidebar
   ========================================================================= */

.wc-proceed-to-checkout {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
	font-family: var(--bme-font);
}

.wc-proceed-to-checkout #payment-method-message,
.wc-proceed-to-checkout .ppcp-messages,
.wc-proceed-to-checkout .bme-financing-badge {
	order: 1;
	margin: 0;
	padding: 10px 14px;
	background: var(--bme-field-bg);
	border-radius: var(--bme-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 20px;
}

.wc-proceed-to-checkout .bme-zip-badge .zip-widget {
	width: 100%;
	text-align: center;
	font-family: var(--bme-font);
	font-size: 14px;
}

.wc-proceed-to-checkout .checkout-button {
	order: 2;
	margin: 6px 0 0;
}

.wc-proceed-to-checkout .checkout-button.button {
	border-radius: var(--bme-radius-sm);
	font-family: var(--bme-font);
	font-weight: 600;
	text-align: center;
}

.wc-proceed-to-checkout .ppc-button-wrapper {
	order: 3;
	margin: 0;
}

.wc-proceed-to-checkout .wcpay-express-checkout-wrapper {
	order: 4;
	margin: 0;
}

/* =========================================================================
   CART PAGE — the items table + cart totals box (the "Proceed to Checkout"
   sidebar rules above already cover the badges/checkout button; this is
   everything above that: the product list, quantities and coupon field).
   Same design tokens as the checkout page below, so the two feel like one
   system for the customer who does stop at /cart/ to edit something.
   ========================================================================= */

body.woocommerce-cart {
	font-family: var(--bme-font);
}

body.woocommerce-cart table.woocommerce-cart-form__contents {
	border-collapse: collapse;
	width: 100%;
}

/* The theme sets its own (Roboto) font-family directly on table cells and
   price amounts with enough specificity to beat the `body.woocommerce-cart`
   rule above - inheritance alone wasn't reaching them. Confirmed live: the
   ::before labels (styled separately, further down) were correctly showing
   Futura while the actual price/subtotal/name text next to them was still
   Roboto, an inconsistency the checkout page's table never had (it sets
   this directly on the table itself, which is what's copied here). */
body.woocommerce-cart table.woocommerce-cart-form__contents,
body.woocommerce-cart table.woocommerce-cart-form__contents th,
body.woocommerce-cart table.woocommerce-cart-form__contents td,
body.woocommerce-cart table.woocommerce-cart-form__contents .woocommerce-Price-amount {
	font-family: var(--bme-font);
}

body.woocommerce-cart table.woocommerce-cart-form__contents thead th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bme-text-muted);
	border-bottom: 1px solid var(--bme-border);
	padding-bottom: 10px;
	text-align: left;
}

/* The theme sets its own per-column padding (20px all round, 0 on the
   left) that beat the generic `tbody td` rule this used to be - same
   specificity issue as the font-family fix above. Targeting each column
   class directly with !important, and matching checkout's row padding
   (also hardened below) so the two pages feel like one system rather
   than cart rows reading taller/looser than checkout's. */
body.woocommerce-cart table.woocommerce-cart-form__contents tbody td {
	border-bottom: 1px solid var(--bme-border);
	vertical-align: middle;
}

body.woocommerce-cart table.woocommerce-cart-form__contents tbody td.product-name {
	padding: 16px 20px 16px 0 !important;
}

body.woocommerce-cart table.woocommerce-cart-form__contents tbody td.product-price,
body.woocommerce-cart table.woocommerce-cart-form__contents tbody td.product-quantity,
body.woocommerce-cart table.woocommerce-cart-form__contents tbody td.product-subtotal {
	padding: 16px 8px !important;
}

body.woocommerce-cart table.woocommerce-cart-form__contents tbody td.product-remove,
body.woocommerce-cart table.woocommerce-cart-form__contents tbody td.product-thumbnail {
	padding: 16px 8px 16px 0 !important;
}

body.woocommerce-cart .product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--bme-radius-sm);
	border: 1px solid var(--bme-border);
}

body.woocommerce-cart .product-name a {
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

body.woocommerce-cart .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--bme-field-bg);
	color: #666 !important;
	font-size: 16px;
	line-height: 1;
	text-decoration: none !important;
}

body.woocommerce-cart .product-remove a.remove:hover {
	background: #eee;
	color: #111 !important;
}

body.woocommerce-cart .quantity .qty {
	background: var(--bme-field-bg);
	border: 1px solid transparent;
	border-radius: var(--bme-radius-sm);
	font-family: var(--bme-font);
	font-size: 16px;
	padding: 10px 12px;
	width: 70px;
	box-sizing: border-box;
}

body.woocommerce-cart td.actions .button[name="update_cart"] {
	border-radius: var(--bme-radius-sm);
	font-family: var(--bme-font);
	font-weight: 600;
}

/* ---------- Coupon field (already visible by default on this theme's
   cart page - just needs the same styling as checkout's) ---------- */

body.woocommerce-cart .coupon {
	display: flex;
	align-items: center;
	gap: 8px;
	border: none !important;
	padding: 0 !important;
}

body.woocommerce-cart .coupon .form-row.coupon-col {
	display: flex;
	gap: 8px;
	width: 100%;
}

body.woocommerce-cart .coupon #coupon_code {
	width: 100%;
	background: var(--bme-field-bg);
	border: 1px solid transparent;
	border-radius: var(--bme-radius-sm);
	font-family: var(--bme-font);
	font-size: 16px;
	padding: 12px 14px;
	box-sizing: border-box;
}

body.woocommerce-cart .coupon .e-apply-coupon {
	border-radius: var(--bme-radius-sm);
	font-family: var(--bme-font);
	font-weight: 600;
	padding: 0 20px;
	white-space: nowrap;
}

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

body.woocommerce-cart .cart_totals {
	font-family: var(--bme-font);
}

body.woocommerce-cart .cart_totals h2 {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
}

body.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

body.woocommerce-cart .cart_totals table.shop_table tr th,
body.woocommerce-cart .cart_totals table.shop_table tr td {
	padding: 10px 0;
	text-align: right;
	border-top: 1px solid var(--bme-border);
}

body.woocommerce-cart .cart_totals table.shop_table tr th {
	text-align: left;
	font-weight: 500;
	color: var(--bme-text-muted);
}

body.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
	font-size: 17px;
	font-weight: 700;
	color: #111;
}

body.woocommerce-cart .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

/* The theme's default radio-label size (18px/600) was never targeted by
   this stylesheet, so "Shipping: $15" / "Local Pickup" rendered larger
   than the order total next to them - backwards from the intended
   hierarchy. Sized down and unified with checkout's identical rule below
   so shipping options read the same size on both pages. */
body.woocommerce-cart .woocommerce-shipping-methods li label {
	font-family: var(--bme-font);
	font-size: 15px !important;
	font-weight: 600 !important;
}

body.woocommerce-cart .shipping-calculator-button {
	font-family: var(--bme-font);
	font-size: 13px;
}

@media (max-width: 768px) {
	/* Below 768px the theme switches the cart table into WooCommerce's
	   default "shop_table_responsive" stacked layout - <thead> hides and
	   each <td> instead shows its own data-title as a label via a ::before
	   pseudo-element (e.g. "Product:", "Price:"). Confirmed against the
	   live markup: this table is `shop_table shop_table_responsive cart
	   woocommerce-cart-form__contents`, columns are .product-remove,
	   .product-thumbnail (neither has a data-title), .product-name,
	   .product-price, .product-quantity, .product-subtotal (data-title=
	   "Product"/"Price"/"Quantity"/"Subtotal"). Previously only the
	   thumbnail was restyled here - the label/value rows themselves were
	   left completely unstyled (default WooCommerce, not this plugin's
	   design), which is what made the mobile cart look like an older,
	   different page even though desktop/tablet (>=768px) already matched
	   the redesign. This block brings the stacked rows onto the same
	   design tokens as everywhere else. */
	body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item {
		position: relative;
		padding: 16px 32px 16px 88px;
		border-bottom: 1px solid var(--bme-border);
	}

	body.woocommerce-cart table.woocommerce-cart-form__contents td.product-thumbnail {
		display: block !important;
		position: absolute;
		top: 16px;
		left: 28px;
		padding: 0;
		border: none;
	}

	body.woocommerce-cart .product-thumbnail img {
		width: 48px;
		height: 48px;
	}

	body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 4px 0;
		border-bottom: none;
	}

	body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td::before {
		content: attr(data-title);
		font-family: var(--bme-font);
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--bme-text-muted);
	}

	/* .product-remove and .product-thumbnail have no data-title - without
	   this the theme's default CSS still renders a bare ":" for them. */
	body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-remove::before,
	body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-thumbnail::before {
		content: none;
	}

	body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-remove {
		position: absolute;
		top: 16px;
		right: 0;
		padding: 0;
	}

	/* Long product names would otherwise sit side-by-side with the label
	   and risk running under the remove button - stack label above name
	   instead, left-aligned, so it can wrap freely. */
	body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-name {
		display: block;
		font-family: var(--bme-font);
		font-weight: 600;
	}

	body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-name::before {
		display: block;
		margin-bottom: 4px;
	}

	body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-name a {
		color: inherit;
		text-decoration: none;
	}

	body.woocommerce-cart .quantity .qty {
		width: 60px;
	}

	body.woocommerce-cart .coupon .form-row.coupon-col {
		flex-direction: row;
	}
}

/* =========================================================================
   CHECKOUT PAGE
   ========================================================================= */

body.woocommerce-checkout {
	font-family: var(--bme-font);
}

/* ---------- Express payment (Apple Pay / Google Pay) -----------
   Stripe renders its own pill buttons inside an iframe - we can't restyle
   the buttons themselves, just the spacing/divider around them. */

body.woocommerce-checkout .wcpay-express-checkout-wrapper {
	margin-bottom: 18px;
}

body.woocommerce-checkout #wcpay-express-checkout-button-separator {
	color: var(--bme-text-muted);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 18px 0;
}

/* ---------- Returning-customer login notice ---------- */

body.woocommerce-checkout .e-woocommerce-login-section .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
	border-radius: var(--bme-radius);
	border-color: var(--bme-border);
	font-family: var(--bme-font);
}

/* ---------- Billing / shipping fields ---------- */

body.woocommerce-checkout #customer_details .form-row label {
	font-weight: 600;
	font-size: 13px;
	color: #333;
}

body.woocommerce-checkout #customer_details .input-text,
body.woocommerce-checkout #customer_details select,
body.woocommerce-checkout #customer_details textarea {
	background: var(--bme-field-bg);
	border: 1px solid transparent;
	border-radius: var(--bme-radius-sm);
	font-family: var(--bme-font);
	/* 16px, not smaller: iOS Safari auto-zooms the page on focus for any
	   input under 16px, which is jarring on a checkout form. */
	font-size: 16px;
	padding: 12px 14px;
	height: auto;
	transition: border-color 0.15s ease;
	box-sizing: border-box;
	width: 100%;
}

body.woocommerce-checkout #customer_details .input-text:focus,
body.woocommerce-checkout #customer_details select:focus,
body.woocommerce-checkout #customer_details textarea:focus {
	border-color: #bbb;
	outline: none;
}

body.woocommerce-checkout #order_comments {
	min-height: 90px;
}

/* ---------- Section headings -----------
   "Billing Details" / "Shipping Details" (left column) and "Your Order"
   (right column) styled as one consistent set - same size/weight/tracking
   so the page reads as one system rather than two different templates
   glued together. */

body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-billing-fields__title,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields__title,
body.woocommerce-checkout #order_review_heading {
	font-family: var(--bme-font);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 16px;
}

/* ---------- Order review (right-hand summary) ---------- */

body.woocommerce-checkout .e-checkout__order_review {
	margin-bottom: 22px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--bme-font);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bme-text-muted);
	border-bottom: 1px solid var(--bme-border);
	padding-bottom: 8px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total {
	text-align: right;
}

/* Widen the description column relative to the price column - it was
   cramped, especially once a thumbnail + remove button share the row. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-name,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name {
	width: 75%;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-total {
	width: 25%;
}

/* Matches the cart page's row padding (also hardened with !important, see
   cart-checkout.css's CART PAGE section) so the two pages feel unified
   rather than checkout rows reading tighter/looser than cart's - the
   theme's own per-column padding was winning over a plain `tbody td`
   rule on this table too. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
	border-bottom: 1px solid var(--bme-border);
	vertical-align: middle;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name {
	padding: 16px 20px 16px 0 !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-total {
	padding: 16px 0 !important;
	text-align: right;
	white-space: nowrap;
}

/* Product thumbnail added via PHP (class-bme-checkout-display.php) */
body.woocommerce-checkout .bme-order-review-item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

body.woocommerce-checkout .bme-order-review-thumb img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--bme-radius-sm);
	border: 1px solid var(--bme-border);
	flex-shrink: 0;
}

body.woocommerce-checkout .bme-order-review-name {
	line-height: 1.4;
	min-width: 0;
	overflow-wrap: break-word;
	flex: 1;
}

body.woocommerce-checkout .bme-order-review-remove {
	margin-left: auto;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--bme-field-bg);
	color: #666 !important;
	font-size: 15px;
	line-height: 1;
	text-decoration: none !important;
}

body.woocommerce-checkout .bme-order-review-remove:hover {
	background: #eee;
	color: #111 !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr th {
	padding: 10px 0;
	text-align: right;
	border-bottom: none;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr th {
	text-align: left;
	font-weight: 500;
	color: var(--bme-text-muted);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
	border-top: 1px solid var(--bme-border);
	padding-top: 14px;
	font-size: 17px;
	font-weight: 700;
	color: #111;
}

body.woocommerce-checkout .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

body.woocommerce-checkout .woocommerce-shipping-methods li {
	margin-bottom: 4px;
}

/* Same fix and same value as the cart page's identical rule (see CART
   PAGE section) - unifies the two rather than each drifting to whatever
   the theme's default happens to be. */
body.woocommerce-checkout .woocommerce-shipping-methods li label {
	font-family: var(--bme-font);
	font-size: 15px !important;
	font-weight: 600 !important;
}

/* ---------- Coupon / gift card box -----------
   Always visible (no click-to-reveal) and laid out as one inline row,
   matching a typical "discount code" field pattern. */

body.woocommerce-checkout .e-coupon-box {
	margin-bottom: 22px;
}

body.woocommerce-checkout .e-coupon-box .e-woocommerce-coupon-nudge {
	display: none;
}

body.woocommerce-checkout .e-coupon-box .e-coupon-anchor {
	display: block !important;
}

body.woocommerce-checkout .e-coupon-anchor-description {
	display: none;
}

body.woocommerce-checkout .coupon-container-grid {
	display: flex;
	gap: 8px;
}

body.woocommerce-checkout .coupon-container-grid .coupon-col-1 {
	flex: 1;
}

body.woocommerce-checkout #coupon_code {
	width: 100%;
	background: var(--bme-field-bg);
	border: 1px solid transparent;
	border-radius: var(--bme-radius-sm);
	font-family: var(--bme-font);
	font-size: 16px; /* see note above re: iOS auto-zoom */
	padding: 12px 14px;
	box-sizing: border-box;
}

body.woocommerce-checkout .e-apply-coupon {
	border-radius: var(--bme-radius-sm);
	font-family: var(--bme-font);
	font-weight: 600;
	padding: 0 20px;
	white-space: nowrap;
}

/* ---------- Payment methods list ---------- */

body.woocommerce-checkout #payment {
	background: #fff;
	border: 1px solid var(--bme-border);
	border-radius: var(--bme-radius);
	padding: 4px 16px;
}

body.woocommerce-checkout ul.wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	border-bottom: 1px solid var(--bme-border);
	padding: 14px 0;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:last-of-type {
	border-bottom: none;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 6px;
	column-gap: 12px;
	font-family: var(--bme-font);
	font-weight: 600;
	cursor: pointer;
	/* the label covers the whole row, so the row itself is the tap target
	   on mobile, not just the small radio circle */
	min-height: 24px;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method input.input-radio {
	width: 20px;
	height: 20px;
	margin-right: 12px;
	flex-shrink: 0;
	accent-color: currentColor;
}

body.woocommerce-checkout .payment-methods--logos img,
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label > img {
	max-height: 24px;
	width: auto;
}

body.woocommerce-checkout .payment_box {
	background: var(--bme-field-bg);
	border-radius: var(--bme-radius-sm);
	margin-top: 12px;
	padding: 14px !important;
	font-family: var(--bme-font);
	font-size: 14px;
}

/* ---------- Terms + place order ---------- */

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 16px 0;
	font-family: var(--bme-font);
	font-size: 13px;
}

body.woocommerce-checkout #place_order {
	width: 100%;
	border-radius: var(--bme-radius-sm);
	font-family: var(--bme-font);
	font-weight: 700;
	font-size: 16px;
	padding: 16px;
}

body.woocommerce-checkout .ppc-button-wrapper,
body.woocommerce-checkout #ppc-button-ppcp-applepay,
body.woocommerce-checkout #ppc-button-ppcp-googlepay {
	margin-top: 10px;
}

/* Collapse any of PayPal's express buttons if they render with nothing
   inside them (they only appear once a specific gateway is selected) so
   they don't leave stray empty gaps. */
body.woocommerce-checkout .ppc-button-wrapper:empty,
body.woocommerce-checkout #ppc-button-ppcp-applepay:empty,
body.woocommerce-checkout #ppc-button-ppcp-googlepay:empty {
	margin: 0;
}

/* =========================================================================
   PHONE-WIDTH TIGHTENING (Elementor's own checkout widget already stacks
   the two columns full-width below its breakpoint - this just tightens
   spacing/touch sizing rather than re-doing that layout)
   ========================================================================= */

@media (max-width: 768px) {
	body.woocommerce-checkout #payment {
		padding: 4px 12px;
	}

	body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
		padding: 16px 0; /* a little extra breathing room for thumb taps */
	}

	body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
		font-size: 11px;
	}

	body.woocommerce-checkout .bme-order-review-thumb img {
		width: 40px;
		height: 40px;
	}

	body.woocommerce-checkout #order_review_heading {
		font-size: 16px;
	}

	body.woocommerce-checkout .coupon-container-grid {
		gap: 6px;
	}

	body.woocommerce-checkout .e-apply-coupon {
		padding: 0 14px;
	}

	/* Full-width tap target, comfortably above the 44px minimum */
	body.woocommerce-checkout #place_order {
		padding: 15px;
		font-size: 16px;
	}

	.wc-proceed-to-checkout .checkout-button.button,
	.wc-proceed-to-checkout #payment-method-message,
	.wc-proceed-to-checkout .ppcp-messages,
	.wc-proceed-to-checkout .bme-financing-badge {
		font-size: 15px;
	}
}

@media (max-width: 400px) {
	/* Very narrow phones: let the payment-method icon drop under the label
	   text rather than squeezing both onto one line. */
	body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label {
		justify-content: flex-start;
	}
}