/**
 * WooCommerce Styles for Ernesto Theme
 *
 * @package Ernesto
 * @since 1.0.0
 */

/* WooCommerce Layout */
.woocommerce-page .site-main,
.woocommerce .site-main {
	max-width: 100%;
}

/* Product Grid */
.woocommerce ul.products {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-2xl) 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-xl);
}

.woocommerce ul.products li.product {
	background: var(--bg-body);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: var(--space-lg);
	transition: all var(--transition-base);
	text-align: center;
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

/*
 * 4:5 portrait image container — keeps the grid uniform regardless of
 * the source image dimensions. object-fit: cover crops to fill.
 */
.ernesto-product-image {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--border-radius-sm);
	margin-bottom: var(--space-md);
	background-color: var(--border-color); /* placeholder colour while loading */
}

.ernesto-product-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* inherit border-radius from wrapper */
	border-radius: inherit;
}

/* Sale flash sits above the image — keep it inside the wrapper */
.ernesto-product-image .onsale {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 1;
}

/* Fallback: images outside the wrapper (e.g. widgets) keep original style */
.woocommerce ul.products li.product img {
	border-radius: var(--border-radius-sm);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin-bottom: var(--space-sm);
}

.woocommerce ul.products li.product .price {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: var(--space-md);
}

/* Add to Cart Button */
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--color-primary);
	color: white;
	border: none;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--border-radius-md);
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--transition-fast);
	text-decoration: none;
	display: inline-block;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--color-primary-dark);
	color: white;
}

/* Single Product */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
	.woocommerce div.product {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce div.product .product_title {
	font-size: var(--font-size-3xl);
	margin-bottom: var(--space-md);
}

.woocommerce div.product p.price {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: var(--space-lg);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: var(--space-lg);
}

/* Product Tabs */
.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--space-2xl);
}

/* Cart Page */
.woocommerce table.cart {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-xl);
}

.woocommerce table.cart th,
.woocommerce table.cart td {
	padding: var(--space-md);
	border: 1px solid var(--border-color);
}

.woocommerce table.cart thead {
	background-color: var(--bg-surface);
}

.woocommerce .cart-collaterals {
	margin-top: var(--space-2xl);
}

.woocommerce .cart_totals {
	background-color: var(--bg-surface);
	padding: var(--space-xl);
	border-radius: var(--border-radius-md);
}

/* Checkout */
.woocommerce form.checkout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

@media (min-width: 768px) {
	.woocommerce form.checkout {
		grid-template-columns: 2fr 1fr;
	}
}

.woocommerce form.checkout h3 {
	margin-bottom: var(--space-md);
}

.woocommerce form.checkout .form-row {
	margin-bottom: var(--space-md);
}

.woocommerce form.checkout input.input-text,
.woocommerce form.checkout select {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--input-border);
	border-radius: var(--border-radius-md);
}

/* WC's <table class="variations"> is nested inside .portfolio-single__table's
   own "Add to cart" row — portfolio.css's "every td in this table gets a
   border" rule (.portfolio-single__table td) reaches straight through into
   that nested table too, since a descendant selector matches at any depth,
   not just direct children. That's the boxed-in border around the variation
   dropdown. Reset it back to borderless for WC's own table specifically. */
.portfolio-single__table .variations td,
.portfolio-single__table .variations th {
	border: none;
	padding: var(--space-sm) 0;
}

/* <th> defaults to text-align:center in the browser's own stylesheet — with
   nothing overriding it, "colour" sat centered inside its (wider-than-its-
   own-text) column instead of flush against the table's left edge, reading
   as indented compared to the paragraph text above it. */
.portfolio-single__table .variations th {
	text-align: left;
}

/* table.variations is a plain <table> with no width set, so browsers size
   it to fit its content instead of filling the "Add to cart" cell it sits
   in — its value column (and the select inside it) ended up narrower than
   the .quantity div below, which IS full width, so the two fields didn't
   line up on the right edge no matter what width the select itself asked
   for. Stretch the table to match. */
.woocommerce .product table.variations {
	width: 100%;
}

/* Single product page: variation attribute dropdowns (e.g. "Color" on a
   variable product) and the quantity input never had theme styling at
   all, so they rendered as bare, unthemed native browser controls (Arial,
   OS-native dark-mode select chrome) instead of matching every other form
   field on the site. Same treatment as .contact-form select/input
   (contact.css) for a consistent look everywhere. Both are capped to the
   same width and right-aligned in their row so the two fields read as one
   consistent pair rather than one stretched wide and one tiny. */
.woocommerce .product .variations select,
.woocommerce .product .quantity .qty {
	display: block;
	width: 100%;
	max-width: 220px;
	margin-left: auto;
	padding: var(--space-sm) var(--space-md);
	background-color: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	font-family: var(--font-primary, inherit);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	appearance: none;
	-webkit-appearance: none;
}

.woocommerce .product .variations select:focus,
.woocommerce .product .quantity .qty:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}

.woocommerce .product .variations select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-md) center;
	padding-right: calc(var(--space-md) * 2.5);
	cursor: pointer;
}

/* Narrower on small screens so the "colour" label and its dropdown reliably
   stay on one line next to each other instead of the select crowding the
   row at its full 220px cap. */
@media (max-width: 767px) {
	.woocommerce .product .variations select,
	.woocommerce .product .quantity .qty {
		max-width: 130px;
	}
}

/* WC's own <label for="colour"> inherits the theme's global form-label reset
   (style.css §9.0 Forms: display:block; margin-bottom; font-weight:500) —
   built for a label sitting above its own input, not one sharing a table
   row with its value. That stretched it to the th's full column width and
   set it apart from the plain paragraph text above it. Put it back inline,
   matching body text exactly. Attribute names come straight from the
   product's taxonomy/custom attribute label ("colour", lowercase, however
   the shop owner typed it) — capitalize for display without having to fix
   it at the source for every product. */
.woocommerce .product table.variations th.label label {
	display: inline;
	margin: 0;
	font-weight: var(--font-weight-body, 400);
	text-transform: capitalize;
}

/* Quantity, same row layout as the variations table: label on the left,
   field right-aligned via its own existing margin-left:auto — instead of
   the label sitting on its own line above the input. */
.woocommerce .product .quantity {
	display: flex;
	align-items: center;
}

/* WooCommerce's own per-variation unit price (single-product/add-to-cart/
   variation.php's .woocommerce-variation-price, injected into
   .woocommerce-variation once a variation is selected) is redundant now
   that assets/js/quantity-total.js rewrites the product's own price
   display in place — leaving both would show two different numbers at
   once (unit price here, qty x price up top). */
.woocommerce .product .woocommerce-variation-price {
	display: none;
}

/* The quantity <label> ships as .screen-reader-text (visually hidden) —
   on its own, unlabelled next to a bare number, customers can't tell what
   it means. Bring it back into view, styled like the variation row's own
   attribute label. WooCommerce's own bundled CSS defines .screen-reader-
   text with !important (a deliberate guard against exactly this kind of
   accidental theme override), so unhiding it needs !important too — plain
   specificity can't win against it.
   clip-path also needs resetting, not just the legacy clip property: the
   site's Autoptimize CSS cache bundles WP core's modern .screen-reader-text
   rule, which hides via `clip-path: inset(50%)` alongside the old `clip`
   rect. Without this the label ends up display:block, full width, correct
   color — and still invisible, because clip-path alone is enough to clip
   it to nothing. Confirmed live: computed style showed exactly that
   combination before this line was added. */
.woocommerce .product .quantity label.screen-reader-text {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
	display: block !important;
	font-family: var(--font-primary);
	font-size: var(--font-size-body, var(--font-size-base, 1rem));
	font-weight: var(--font-weight-body, 400);
	color: var(--text-main);
}

/* Variable products: WooCommerce gives the "Clear" link no real function
   here — with a single attribute and a default variation already selected
   (data-show_option_none), it just resets the dropdown to a blank "Choose
   an option" state the shopper then has to fill in again. Low value, and
   it floats awkwardly under the attribute label with no layout of its own.
   Hidden rather than removed from the template, so it comes back instantly
   if a future multi-attribute product needs it.
   !important is required: WC's own variation-form.js calls .show()/.hide()
   on this link whenever a variation is (de)selected, writing an inline
   style="display: inline" that otherwise wins over a plain rule here —
   confirmed live, the link reappeared the moment an actual selection was
   made (the original fix only looked correct on the untouched page). */
.woocommerce .product .reset_variations {
	display: none !important;
}

.woocommerce #order_review {
	background-color: var(--bg-surface);
	padding: var(--space-xl);
	border-radius: var(--border-radius-md);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: var(--space-md) var(--space-lg);
	margin-bottom: var(--space-lg);
	border-radius: var(--border-radius-md);
	border-left: 4px solid;
}

.woocommerce-message {
	background-color: var(--color-success-bg);
	border-color: var(--color-success);
	color: var(--color-success-text);
}

.woocommerce-info {
	background-color: var(--color-info-bg);
	border-color: var(--color-info);
	color: var(--color-info-text);
}

.woocommerce-error {
	background-color: var(--color-error-bg);
	border-color: var(--color-error);
	color: var(--color-error-text);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination {
	margin: var(--space-2xl) 0;
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	list-style: none;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: block;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	color: var(--text-main);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: white;
}

/* Reviews */
.woocommerce #reviews #comments ol.commentlist {
	list-style: none;
	padding: 0;
}

.woocommerce #reviews #comments ol.commentlist li {
	padding: var(--space-lg);
	margin-bottom: var(--space-lg);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
}

.woocommerce #reviews #comments ol.commentlist li .star-rating {
	color: #fbbf24;
	margin-bottom: var(--space-sm);
}

/* Widget Areas */
.woocommerce.widget_shopping_cart,
.woocommerce.widget_products,
.woocommerce.widget_product_categories {
	background-color: var(--bg-surface);
	padding: var(--space-lg);
	border-radius: var(--border-radius-md);
	margin-bottom: var(--space-lg);
}

/* Responsive */
@media (max-width: 767px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}

	.woocommerce table.cart {
		font-size: var(--font-size-sm);
	}

	.woocommerce table.cart .product-thumbnail {
		display: none;
	}
}

/* ============================================
   Thank You / Order Received (+ view-order)
   ============================================ */

/* Confirmation banner */
.woocommerce-order .woocommerce-thankyou-order-received {
	padding: var(--space-xl);
	margin-bottom: var(--space-xl);
	background-color: var(--color-success-bg, #d1fae5);
	color: var(--color-success-text, #065f46);
	border-left: 4px solid var(--color-success);
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-xl);
	font-weight: 600;
}

.woocommerce-order .woocommerce-thankyou-order-failed {
	padding: var(--space-xl);
	margin-bottom: var(--space-xl);
	background-color: var(--color-error-bg, #fee2e2);
	color: var(--color-error-text, #991b1b);
	border-left: 4px solid var(--color-error);
	border-radius: var(--border-radius-md);
	font-weight: 600;
}

/* Order summary (number / date / email / total / payment method) as stat
   tiles — overrides WC's floated list with dashed separators */
.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-md);
	list-style: none;
	margin: 0 0 var(--space-2xl);
	padding: 0;
}

.woocommerce ul.order_details li {
	float: none;
	width: auto;
	margin: 0;
	padding: var(--space-md);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: var(--space-xs);
	font-size: var(--font-size-base);
	text-transform: none;
	letter-spacing: normal;
	color: var(--text-main);
}

/* Order details table — divider rows instead of full cell borders.
   border-collapse: separate (not collapse) so border-radius applies. */
.woocommerce table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	margin-bottom: var(--space-xl);
	overflow: hidden;
}

.woocommerce table.woocommerce-table--order-details th,
.woocommerce table.woocommerce-table--order-details td {
	padding: var(--space-md);
	border: none;
	border-bottom: 1px solid var(--border-color);
	text-align: left;
}

.woocommerce table.woocommerce-table--order-details thead th {
	background-color: var(--bg-surface);
}

.woocommerce table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce table.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: none;
	font-size: var(--font-size-lg);
}

/* Customer / billing / shipping addresses as cards */
.woocommerce .woocommerce-customer-details address,
.woocommerce .woocommerce-Addresses address {
	padding: var(--space-lg);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	font-style: normal;
	line-height: var(--line-height-loose, 1.7);
}

.woocommerce .woocommerce-columns--addresses,
.woocommerce .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}

@media (min-width: 640px) {
	.woocommerce .woocommerce-columns--addresses,
	.woocommerce .woocommerce-Addresses {
		grid-template-columns: 1fr 1fr;
	}
}

/* Neutralize WC's float-based address columns inside the grid */
.woocommerce .woocommerce-columns--addresses .woocommerce-column,
.woocommerce .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: 100%;
	margin: 0;
}

/* ============================================
   My Account
   ============================================ */

/* Sidebar layout — only when the account nav is present (logged in);
   the logged-out page (login form) keeps normal flow */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: start;
}

@media (min-width: 768px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 240px minmax(0, 1fr);
	}
}

/* Neutralize WC's 30/68% floats */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
}

/* Account navigation */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: var(--space-sm);
	background-color: var(--bg-surface);
	border-radius: var(--border-radius-md);
}

.woocommerce-MyAccount-navigation li + li {
	margin-top: 2px;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--border-radius-sm);
	color: var(--text-main);
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.woocommerce-MyAccount-navigation li a:hover {
	background-color: var(--bg-body);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--color-primary);
	color: white;
}

/* Horizontal pill nav on mobile */
@media (max-width: 767px) {
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xs);
	}

	.woocommerce-MyAccount-navigation li + li {
		margin-top: 0;
	}
}

/* Content tables (orders, downloads) — separate + spacing 0 for the radius */
.woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	margin-bottom: var(--space-xl);
	overflow: hidden;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
	padding: var(--space-md);
	border: none;
	border-bottom: 1px solid var(--border-color);
	text-align: left;
}

.woocommerce-MyAccount-content table.shop_table thead th {
	background-color: var(--bg-surface);
}

/* No tfoot (orders/downloads): last row divider would double the table border */
.woocommerce-MyAccount-content table.shop_table:not(:has(tfoot)) tbody tr:last-child td {
	border-bottom: none;
}

.woocommerce-MyAccount-content table.shop_table .woocommerce-button {
	padding: var(--space-xs) var(--space-md);
	margin: 0 var(--space-xs) var(--space-xs) 0;
	font-size: var(--font-size-sm);
}

/* Account + login/register form fields — match checkout inputs */
.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce select {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.woocommerce-account .woocommerce input.input-text:focus,
.woocommerce-account .woocommerce select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.woocommerce-account .woocommerce .form-row {
	margin-bottom: var(--space-md);
}

.woocommerce-account .woocommerce fieldset {
	margin: var(--space-xl) 0 0;
	padding: 0;
	border: none;
}

.woocommerce-account .woocommerce fieldset legend {
	margin-bottom: var(--space-md);
	font-weight: 600;
}

.woocommerce-account .woocommerce .form-row em {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

/* Login form alone (registration disabled): centered card */
.woocommerce-account .woocommerce > .woocommerce-form-login {
	max-width: 420px;
	margin: 0 auto var(--space-2xl);
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	padding: var(--space-xl);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
}

/* Login + registration side by side when registration is enabled */
.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: start;
}

@media (min-width: 768px) {
	.woocommerce-account #customer_login {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
	float: none;
	width: 100%;
	max-width: none;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.woocommerce-account .lost_password {
	font-size: var(--font-size-sm);
}

/* Mobile: the theme strips ALL WooCommerce default styles (incl. its
   smallscreen table-stacking), so wide tables scroll instead */
@media (max-width: 767px) {
	.woocommerce-MyAccount-content table.shop_table,
	.woocommerce table.woocommerce-table--order-details {
		display: block;
		overflow-x: auto;
		/* The base rule above sets width: 100% for desktop — under
		   display: block that still caps the table at the viewport width,
		   so cells wrap/cram instead of the table actually overflowing and
		   scrolling. width: auto lets it size to its (nowrap) content. */
		width: auto;
		max-width: 100%;
	}

	.woocommerce-MyAccount-content table.shop_table th,
	.woocommerce-MyAccount-content table.shop_table td,
	.woocommerce table.woocommerce-table--order-details th,
	.woocommerce table.woocommerce-table--order-details td {
		white-space: nowrap;
	}
}

/* ============================================
   WooCommerce Blocks (Cart / Checkout): input backgrounds + text
   ============================================
   WC's own compiled block CSS hardcodes background-color: #fff AND
   color: #2b2d2f on every field (a light-mode-only text color it has no
   dark-mode awareness of) — !important because these hardcoded values have
   real, non-trivial specificity (multiple chained classes) and load from a
   plugin file, so relying on source order alone is fragile (see the order-
   summary quantity badge fix for the same lesson learned). Scoped to
   input TYPES actually used for free text/selection; checkbox and radio
   controls keep WC's own default (their look communicates checked state,
   not "this is a themed field"). */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-textarea textarea,
.wc-blocks-components-select__container,
.wc-block-gateway-input {
	background-color: var(--input-bg) !important;
	color: var(--input-text) !important;
}

/* .wc-blocks-components-select__container (above) is the wrapper div —
   WC's compiled CSS separately hardcodes color directly on the <select>
   itself (.wc-blocks-components-select__select), a more specific match
   that wins over the inherited value from the container. */
.wc-blocks-components-select__select {
	color: var(--input-text) !important;
}