/**
 * WooCommerce on a dark theme.
 *
 * Loaded only when WooCommerce is active. The basket and checkout blocks get
 * their dark form fields from WooCommerce itself (the theme declares
 * "dark-editor-style" in inc/setup.php); this file covers the rest.
 */

/* ---- Layout ----------------------------------------------------------- */

.woocommerce main.wp-block-group,
.woocommerce-page main.wp-block-group {
	padding-bottom: var(--wp--preset--spacing--70);
}

/* Product pages: the page title uses a calmer size than landing-page heroes. */
.single-product h1.wp-block-post-title,
.woocommerce-page h1.wp-block-post-title,
.woocommerce-page h1.wp-block-query-title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
}

.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-secondary);
}

/* ---- Prices and badges ------------------------------------------------ */

.woocommerce .price,
.wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.woocommerce .price del,
.wc-block-components-product-price del {
	color: var(--wp--preset--color--text-dim);
	font-weight: 400;
}

.woocommerce .price ins,
.wc-block-components-product-price ins {
	text-decoration: none;
}

.woocommerce span.onsale,
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text);
	border: 0;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.6;
	min-height: 0;
	min-width: 0;
	padding: 0.2rem 0.55rem;
}

.woocommerce .stock,
.wc-block-components-product-stock-indicator {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-secondary);
}

.woocommerce .product_meta,
.wp-block-woocommerce-product-meta {
	color: var(--wp--preset--color--text-dim);
}

/* ---- Product images ---------------------------------------------------- */

.woocommerce div.product div.images img,
.wc-block-components-product-image img,
.woocommerce ul.products li.product a img {
	border-radius: var(--sst-radius-sm);
}

/* ---- Product tabs ------------------------------------------------------ */

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--wp--preset--color--text-secondary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--text);
}

.woocommerce-tabs .panel > h2:first-child {
	font-size: var(--wp--preset--font-size--x-large);
}

.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2,
.wp-block-woocommerce-related-products h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

/* ---- Classic forms: login, register, account, quantity ----------------- */

.woocommerce form .form-row :is(input.input-text, textarea, select),
.woocommerce-page form .form-row :is(input.input-text, textarea, select),
.woocommerce .quantity input.qty,
.woocommerce form.login input.input-text,
.woocommerce form.register input.input-text,
.woocommerce #review_form #respond :is(input[type="text"], input[type="email"], textarea),
.woocommerce .select2-container--default .select2-selection--single {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--sst-radius-sm);
}

.woocommerce form .form-row :is(input.input-text, textarea, select):focus,
.woocommerce .quantity input.qty:focus,
.woocommerce #review_form #respond :is(input[type="text"], input[type="email"], textarea):focus {
	outline: 2px solid transparent;
	border-color: var(--wp--preset--color--accent-pill-text);
	box-shadow: 0 0 0 3px rgba(90, 154, 238, 0.25);
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--sst-radius);
}

/* The show/hide password eye is a dark icon by default. */
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
	filter: invert(1);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--wp--preset--color--text);
}

.select2-dropdown {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--line);
}

/* ---- My account -------------------------------------------------------- */

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

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.55rem 0.9rem;
	border-radius: 6px;
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--accent-pill-bg);
	color: var(--wp--preset--color--text);
}

/* ---- Tables (orders, classic cart) ------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--sst-radius-sm);
	border-collapse: separate;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--wp--preset--color--line);
}

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

.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--sst-radius-sm);
}

/* ---- Basket and checkout blocks ---------------------------------------- */

/* Item count bubble on order summary thumbnails. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	background: var(--wp--preset--color--accent-pill-bg);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: none;
}

.wc-block-components-product-badge {
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-secondary);
}

.wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
	border-color: var(--wp--preset--color--line);
}

.wc-block-cart table.wc-block-cart-items,
.wc-block-cart table.wc-block-cart-items td,
.wc-block-cart table.wc-block-cart-items th,
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item,
.wc-block-components-panel {
	border-color: var(--wp--preset--color--line);
}

/* Mini cart drawer */
.wc-block-mini-cart__drawer .wc-block-components-drawer__content,
.wc-block-components-drawer {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}

.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text);
}