/* WooCommerce in the frame: WooCommerce's own styles stay (cart, checkout and account until W5 and W8); this file puts
   them on the tokens. The page templates (W3–W8) replace these rules page by page. */

/* Buttons. WooCommerce's own rule makes "a.button" inline-block, so the text of a link button sat at the top of the
   minimum height (Owl's review, 22 Oct): every WooCommerce button centres its text, as the theme's .button does. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-height: var(--control-height);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius);
	background: var(--color-ink-strong);
	color: var(--color-on-red);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: 1.2;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: #000; color: var(--color-on-red); }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button, .woocommerce a.checkout-button, .woocommerce #place_order {
	background: var(--color-red);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover, .woocommerce a.checkout-button:hover, .woocommerce #place_order:hover {
	background: var(--color-red-dark);
}

/* The theme's own button variants keep their look on WooCommerce pages (".woocommerce a.button" above is stronger than
   .button--primary and .button--outline on their own). */
.woocommerce a.button.button--primary, .woocommerce button.button.button--primary { background: var(--color-red); color: var(--color-on-red); }
.woocommerce a.button.button--primary:hover, .woocommerce button.button.button--primary:hover { background: var(--color-red-dark); color: var(--color-on-red); }
.woocommerce a.button.button--outline, .woocommerce button.button.button--outline { border: 1px solid var(--color-ink-strong); background: var(--color-surface); color: var(--color-ink-strong); }
.woocommerce a.button.button--outline:hover, .woocommerce button.button.button--outline:hover { background: var(--color-cream); color: var(--color-ink-strong); }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper .wc-block-components-notice-banner {
	border-top-color: var(--color-red);
	background: var(--color-cream);
	color: var(--color-ink);
	font-size: var(--text-sm);
	border-radius: 0 0 var(--radius) var(--radius);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--color-red); }

/* Shop toolbar: result count and sorting, on one line */
.shop-body .woocommerce-result-count { margin: 0 0 var(--space-5); color: var(--color-muted); font-size: var(--text-sm); line-height: var(--control-height); }
.shop-body .woocommerce-ordering { margin: 0 0 var(--space-5); }
.shop-body .woocommerce-ordering select { width: auto; min-width: 220px; font-size: var(--text-sm); }
.shop-body .woocommerce-products-header { display: none; }

/* Prices everywhere (WooCommerce's own olive price colour is more specific than a plain rule, so match its selectors) */
.woocommerce .price, .woocommerce-Price-amount,
.woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--color-ink-strong); }
.woocommerce .price del, .woocommerce .price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del, .woocommerce div.product p.price del, .woocommerce div.product span.price del { color: var(--color-muted); opacity: 1; }
.woocommerce .price .from, .woocommerce ul.products li.product .price .from {
	color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); text-transform: uppercase; letter-spacing: .4px;
}

/* Sale badge (WooCommerce's bubble) on the tokens */
.woocommerce span.onsale {
	min-width: 0; min-height: 0; padding: 3px var(--space-2); border-radius: 3px; line-height: 1.4;
	background: var(--color-red); color: var(--color-on-red); font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase;
}
.woocommerce .price ins, .woocommerce div.product p.price ins { text-decoration: none; }

/* Cart, checkout, account (frame only; W5 and W8 build these pages) */
.woocommerce-page-content { padding-bottom: var(--space-6); }
.woocommerce table.shop_table { border-color: var(--color-line); border-radius: var(--radius); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--color-line); }
.woocommerce form .form-row .input-text, .woocommerce form .form-row select { min-height: var(--control-height); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: var(--space-2) 0; border-bottom: var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--color-red); font-weight: var(--weight-bold); }

@media (max-width: 760px) {
	.shop-body .woocommerce-ordering, .shop-body .woocommerce-result-count { float: none; width: 100%; }
	.shop-body .woocommerce-ordering select { width: 100%; }
}