/*
 * bend visual compatibility for WooCommerce and WooCommerce Blocks.
 * Business logic and upstream templates remain untouched.
 */

.woocommerce,
.wc-block-components-main,
.wc-block-components-sidebar,
.wc-block-components-form {
	font-family: var(--wp--preset--font-family--body);
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce .product_title,
.wc-block-components-title,
.wc-block-grid__product-title,
.wc-block-components-product-name,
.wc-block-components-order-summary-item__individual-prices {
	font-family: var(--wp--preset--font-family--heading);
}

.woocommerce button,
.woocommerce .button,
.woocommerce a.button,
.wc-block-components-button,
.wc-block-components-chip,
.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button {
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
	min-block-size: 2.75rem;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button:not(.is-link) {
	background: var(--wp--preset--color--action-primary);
	border: 2px solid var(--wp--preset--color--action-primary);
	border-radius: 0.5rem;
	color: var(--wp--preset--color--surface-primary);
	padding: 0.75rem 1.25rem;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--action-primary-hover);
	border-color: var(--wp--preset--color--action-primary-hover);
	color: var(--wp--preset--color--surface-primary);
}

.woocommerce :where(.button, button, input, select, textarea):focus-visible,
.wc-block-components-button:focus-visible,
.wc-block-components-checkbox__input:focus-visible {
	box-shadow: 0 0 0 7px var(--bend-focus-ring);
	outline: 3px solid var(--wp--preset--color--surface-primary);
	outline-offset: 2px;
}

.woocommerce :where(.button, button, input):disabled,
.wc-block-components-button:disabled,
.wc-block-components-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.65;
}

.woocommerce .price,
.wc-block-components-product-price,
.wc-block-grid__product-price {
	color: var(--wp--preset--color--text-primary);
	font-weight: 700;
}

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

.woocommerce span.onsale,
.wc-block-components-product-badge,
.wc-block-grid__product-onsale {
	background: var(--wp--preset--color--action-secondary);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--surface-primary);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: 1;
	min-block-size: auto;
	padding: 0.5rem 0.7rem;
}

.woocommerce .stock.in-stock {
	color: var(--wp--preset--color--success);
}

.woocommerce .stock.out-of-stock {
	color: var(--wp--preset--color--error);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	background: var(--wp--preset--color--surface-secondary);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-inline-start: 0.25rem solid var(--wp--preset--color--information);
	border-radius: var(--wp--custom--bend--radius--medium);
	color: var(--wp--preset--color--text-primary);
	margin-block: var(--wp--preset--spacing--m);
	padding: var(--wp--preset--spacing--m);
}

.woocommerce-error,
.is-error.wc-block-components-notice-banner {
	border-inline-start-color: var(--wp--preset--color--error);
}

.woocommerce-message,
.is-success.wc-block-components-notice-banner {
	border-inline-start-color: var(--wp--preset--color--success);
}

.woocommerce ul.products,
.wc-block-grid__products,
.wc-block-product-template {
	gap: var(--wp--preset--spacing--l);
}

.woocommerce ul.products li.product,
.wc-block-grid__product,
.wc-block-product {
	background: var(--wp--preset--color--surface-primary);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--bend--radius--large);
	overflow: clip;
	padding: var(--wp--preset--spacing--m);
}

.wc-block-grid__product-image img,
.wc-block-components-product-image img,
.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.wc-block-components-text-input label,
.wc-block-components-checkbox__label,
.wc-block-components-combobox .wc-block-components-combobox-control label,
.woocommerce form .form-row label {
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	background: var(--wp--preset--color--surface-primary);
	border: 2px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--bend--radius--small);
	color: var(--wp--preset--color--text-primary);
	min-block-size: 2.75rem;
}

.woocommerce form .form-row.woocommerce-invalid .input-text,
.wc-block-components-validation-error + input {
	border-color: var(--wp--preset--color--error);
}

.woocommerce table.shop_table,
.wc-block-cart-items,
.wc-block-components-totals-wrapper {
	border-color: var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--bend--radius--medium);
}

.wc-block-cart,
.wc-block-checkout,
.woocommerce-account .woocommerce-MyAccount-content {
	container-type: inline-size;
}

.wc-block-cart__submit-container,
.wc-block-checkout__actions {
	background: var(--wp--preset--color--surface-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	align-items: center;
	display: flex;
	min-block-size: 2.75rem;
}

@container (max-width: 42rem) {

	.wc-block-components-sidebar-layout {
		display: block;
	}

	.wc-block-components-sidebar,
	.wc-block-components-main {
		inline-size: 100%;
		padding-inline: 0;
	}
}

@media screen and (max-width: 600px) {

	.woocommerce ul.products,
	.wc-block-grid__products,
	.wc-block-product-template {
		grid-template-columns: 1fr;
	}

	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		border-block-end: 1px solid var(--wp--preset--color--border-subtle);
		display: block;
		padding-block: var(--wp--preset--spacing--s);
	}
}