/*
 * WooCommerce: shop, product, cart, checkout and account pages.
 *
 * Loaded only while WooCommerce is active (inc/integrations.php). WooCommerce's
 * block templates already read colours, fonts and buttons from theme.json;
 * these rules align the parts it styles itself (notices, badges, classic forms
 * and tables) with the manor's look. Only colours, type and spacing change,
 * never layout, so plugin updates cannot break the pages.
 */

/* Prices, badges and ratings ---------------------------------------------- */

.woocommerce :is(.price, .amount),
.wc-block-components-product-price,
.wc-block-grid__product-price {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
}

.woocommerce .price del,
.wc-block-components-product-price del {
	color: var(--wp--preset--color--contrast-2);
	opacity: 0.7;
}

.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	min-height: 0;
	padding: 0.2rem 0.6rem;
	border: 1.5px solid var(--wp--preset--color--carmine);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--carmine);
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.woocommerce .star-rating,
.wc-block-components-product-rating__stars {
	color: var(--wp--preset--color--accent-2);
}

/* Buttons (classic templates and shortcodes) ------------------------------ */

.woocommerce :is(a.button, button.button, input.button, #respond input#submit),
.woocommerce :is(a.button.alt, button.button.alt, input.button.alt) {
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--hairline);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base-2);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	transition: background-color var(--wp--custom--transition);
}

.woocommerce :is(a.button, button.button, input.button, #respond input#submit):hover,
.woocommerce :is(a.button.alt, button.button.alt, input.button.alt):hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-2);
}

.woocommerce :is(a.button, button.button, input.button).disabled,
.woocommerce :is(a.button, button.button, input.button):disabled {
	opacity: 0.5;
}

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

.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.wc-block-components-notice-banner {
	border: 1px solid var(--wp--custom--line--soft);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 0;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce :is(.woocommerce-message, .woocommerce-info)::before {
	color: var(--wp--preset--color--primary);
}

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

.woocommerce .woocommerce-error::before {
	color: var(--wp--preset--color--carmine);
}

.wc-block-components-notice-banner.is-warning {
	border-left-color: var(--wp--preset--color--accent-2);
}

.wc-block-components-notice-banner > svg {
	background-color: currentColor;
	fill: var(--wp--preset--color--base-2);
}

.wc-block-components-notice-banner.is-success > svg {
	background-color: var(--wp--preset--color--primary);
}

.wc-block-components-notice-banner.is-error > svg {
	background-color: var(--wp--preset--color--carmine);
}

/* Forms ------------------------------------------------------------------- */

.woocommerce form :is(.input-text, select, textarea),
.woocommerce-page form :is(.input-text, select, textarea),
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select__select {
	border: 1px solid var(--wp--custom--line--faint);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
}

.woocommerce form :is(.input-text, select, textarea):focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: none;
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.woocommerce form .form-row label,
.wc-block-components-text-input label,
.wc-block-components-checkout-step__title {
	color: var(--wp--preset--color--contrast-2);
}

.woocommerce form .form-row .required {
	color: var(--wp--preset--color--carmine);
}

.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-components-title {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: normal;
	text-transform: none;
}

/* Tables and panels ------------------------------------------------------- */

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: 0;
	background: var(--wp--preset--color--base-2);
}

.woocommerce table.shop_table :is(th, td) {
	border-top-color: var(--wp--custom--line--faint);
}

.woocommerce table.shop_table th {
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--custom--line--faint);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wp--custom--line--faint);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.75rem 0;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* Product tabs and quantity ----------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-color: var(--wp--custom--line--soft);
	border-radius: 0;
	background: var(--wp--preset--color--base);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--wp--preset--color--base-2);
}

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

.woocommerce .quantity .qty {
	min-height: 3rem;
}

/*
 * Cart and mini-cart quantity selector (− 2 +): square and gold-edged like the
 * theme's fields. theme.json pads every text field, which pushed the + button
 * out of this compact control, so the padding is reset.
 */
.wc-block-components-quantity-selector {
	box-sizing: border-box;
	min-height: 2.5rem;
	border: 1px solid var(--wp--custom--line--medium);
	border-radius: 0;
	background: var(--wp--preset--color--base);
}

.wc-block-components-quantity-selector::after {
	content: none;
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	box-sizing: border-box;
	min-width: 2.5rem;
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: 600;
	text-align: center;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 2.25rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	opacity: 1;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
	color: var(--wp--preset--color--primary);
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	color: var(--wp--custom--line--strong);
}

.wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
}

.wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	margin-left: 0.75rem;
}

/*
 * Gift card code in the cart and checkout (PW WooCommerce Gift Cards): the
 * field and an outline button side by side, like the rest of the site.
 */
#pwgc-redeem-gift-card-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: stretch;
}

#pwgc-redeem-gift-card-form label {
	flex: 1 0 100%;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

#pwgc-redeem-gift-card-form #pwgc-redeem-gift-card-number {
	box-sizing: border-box;
	flex: 1 1 10rem;
	min-width: 0;
	min-height: 3rem;
	margin: 0;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--custom--line--medium);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
}

#pwgc-redeem-gift-card-form #pwgc-redeem-gift-card-number:focus {
	border-color: var(--wp--preset--color--primary);
}

#pwgc-redeem-gift-card-form .pwgc-apply-gift-card-button {
	flex: 0 0 auto;
	width: auto;
	min-height: 3rem;
	margin: 0;
	padding: 0 1.25rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

#pwgc-redeem-gift-card-form .pwgc-apply-gift-card-button:hover,
#pwgc-redeem-gift-card-form .pwgc-apply-gift-card-button:focus-visible {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base-2);
}

#pwgc-redeem-gift-card-form .pwgc-apply-gift-card-button[aria-busy="true"] {
	cursor: wait;
	opacity: 0.6;
}