/**
 * Relaxed — WooCommerce.
 *
 * Deliberately CSS rather than template overrides. WooCommerce changes its
 * block markup between releases; it changes its class names far more slowly.
 * Styling here survives Woo updates that would break a copied template.
 *
 * See docs/DECISIONS.md ADR-0007.
 */

/* ---------------------------------------------------------------------------
 * Product cards
 * ------------------------------------------------------------------------ */

.wc-block-product,
.wc-block-grid__product {
	text-align: start;
}

.wc-block-product .wc-block-components-product-image img,
.wc-block-grid__product-image img {
	width: 100%;
}

.wc-block-components-product-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	letter-spacing: var(--wp--custom--tracking--tight);
}

.wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--tracking--wide);
}

.wc-block-components-product-price__regular {
	opacity: 0.5;
	text-decoration: line-through;
}

/* Sale badges are round and loud by default; the theme has no round corners. */
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wider);
	padding: 0.4em 0.9em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Buttons — Woo renders several button flavours; unify them all
 * ------------------------------------------------------------------------ */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-product-button .wp-block-button__link {
	background-color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wider);
	line-height: 1;
	padding: 1.05em 2.1em;
	text-transform: uppercase;
	transition: background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:not(.is-link):hover,
.wp-block-woocommerce-product-button .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-button.is-link {
	color: inherit;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Catalog sorting
 *
 * Left as a native <select> — the arrow, the keyboard behaviour and the mobile
 * picker are all worth more than a bespoke dropdown. Only the type and the
 * border are brought in line.
 * ------------------------------------------------------------------------ */

.wp-block-woocommerce-catalog-sorting select,
.woocommerce-ordering select {
	background: transparent;
	border: 1px solid var(--wp--preset--color--accent-2);
	border-radius: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--tracking--wide);
	padding: 0.65em 0.8em;
	text-transform: uppercase;
}

.wp-block-woocommerce-product-results-count {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Single product
 * ------------------------------------------------------------------------ */

.woocommerce div.product form.cart {
	margin-bottom: 0;
}

.woocommerce div.product form.cart div.quantity {
	margin-inline-end: 0.75rem;
}

.wc-block-components-quantity-selector,
.woocommerce .quantity .qty {
	border: 1px solid var(--wp--preset--color--accent-2);
	border-radius: 0;
}

.woocommerce .quantity .qty {
	font-family: var(--wp--preset--font-family--body);
	height: 100%;
	padding: 1em 0.5em;
	text-align: center;
	width: 4.5rem;
}

.woocommerce div.product .product_meta {
	border-top: 1px solid var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--tracking--wide);
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	text-transform: uppercase;
}

/* Tabs read as browser chrome by default. Flatten to hairline rules. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--wp--preset--color--accent-2);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0 var(--wp--preset--spacing--30) -1px 0;
	padding: 0 0 0.85em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wider);
	padding: 0;
	text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 1px solid var(--wp--preset--color--contrast);
}

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

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-message,
.woocommerce-info {
	background-color: var(--wp--preset--color--base-2);
	border-top-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* Woo's block notices are WordPress-admin blue (#007cba on #f4f8ff), which is
   jarring against a warm neutral palette and gets worse in the dark variations.
   Informational and success notices move to the theme's own surfaces.
   Error notices keep a red — that one is semantic, not decorative — but lose
   the rounded corner. */
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
	background-color: var(--wp--preset--color--base-2);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-notice-banner.is-info > svg,
.wc-block-components-notice-banner.is-success > svg {
	background-color: var(--wp--preset--color--contrast);
	fill: var(--wp--preset--color--base);
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content a {
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * Cart, checkout and account
 * ------------------------------------------------------------------------ */

.wc-block-components-totals-wrapper,
.wc-block-cart-items,
.woocommerce table.shop_table {
	border-color: var(--wp--preset--color--accent-2);
	border-radius: 0;
}

.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	border: 1px solid var(--wp--preset--color--accent-2);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.9em 1em;
}

/* The block checkout is the one place `!important` earns its keep (the only
 * other use in the theme is the prefers-reduced-motion reset).
 *
 * Woo's checkout.css targets these fields as
 * `.wc-block-components-form .wc-block-components-text-input input[type="email"]`
 * — one selector per input type, at a specificity the rule above cannot reach
 * without either a five-class selector nobody will be able to read later, or a
 * tie that depends on stylesheet load order. Two cosmetic properties, scoped to
 * Woo's own form wrapper, is the smaller cost.
 *
 * Square corners are a stated part of the design (see docs/RESEARCH.md);
 * leaving the checkout at Woo's 4px radius made it the only rounded surface on
 * the site, on the page that matters most.
 */
.wc-block-components-form :is(input, select, textarea) {
	border-color: var(--wp--preset--color--accent-2) !important;
	border-radius: 0 !important;
}

.wc-block-components-text-input input:focus,
.woocommerce form .form-row input.input-text:focus {
	border-color: var(--wp--preset--color--contrast);
	outline: 1px solid var(--wp--preset--color--contrast);
	outline-offset: -2px;
}

.wc-block-components-title,
.wc-block-cart__submit-container + * h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
}

/* The account dashboard is a data screen, not an article: order tables, address
   forms and subscription widgets all need room, and WooCommerce caps them at
   1000px — which leaves most of a large monitor empty and makes wide widgets
   scroll sideways inside a narrow column.

   Woo sets that cap from `woocommerce-blocktheme.css` as
   `.woocommerce-account main .woocommerce`, so matching its specificity is not
   enough to win reliably — the extra class here is deliberate. Both classes are
   always present on the body.

   Cart gets the same treatment. Checkout deliberately does not: a checkout form
   stretched to 1600px has line lengths that measurably hurt completion, and
   Woo's 1000px is the right call there. */
.woocommerce-account.woocommerce-page main .woocommerce,
.woocommerce-account.woocommerce-page main .wp-block-post-title,
.woocommerce-cart.woocommerce-page main .woocommerce,
.woocommerce-cart.woocommerce-page main .wp-block-post-title {
	max-width: var(--wp--style--global--wide-size);
}

/* Sidebar-plus-content, but only on the real dashboard. The same `.woocommerce`
   wrapper holds the login form when the visitor is signed out, and a two-column
   layout there squeezes the form into the sidebar. `:has()` keys the layout to
   the account menu actually being present.

   Flex rather than grid, because WooCommerce styles these two children as a
   classic float layout — `float: left; width: 30%` and `float: right;
   width: 68%`. Grid ignores the floats but honours the percentage widths, which
   are percentages of the *track*, so the sidebar came out at 30% of the wide
   column and the content at 68% of the narrow one. The widths have to be
   unset either way; flex then needs no explicit placement and wraps on its
   own. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
}

.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
	flex: 0 0 15rem;
	float: none;
	margin: 0;
	width: auto;
}

.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
	flex: 1 1 0;
	float: none;
	margin: 0;
	min-width: 0;
	width: auto;
}

@media (max-width: 781px) {
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
		flex: 1 1 100%;
	}
}

.woocommerce-account .woocommerce-MyAccount-content table {
	width: 100%;
}

/* The account screens are an interface, not an article. WooCommerce marks
   "Billing address", "Order details" and friends up as <h2>, which the theme's
   editorial scale renders at 56px — appropriate for a landing page, absurd for
   a dashboard panel. Rescale headings inside the account content only. */
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-content h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.woocommerce-account.woocommerce-page .woocommerce-MyAccount-content h3 {
	font-size: var(--wp--preset--font-size--large);
}

/* Woo puts the "Add/Edit address" link in the same <header> as the heading and
   relies on a float to place it. Flex puts it on the heading's baseline at the
   far end, where it reads as an action rather than a stray line of text. */
.woocommerce-Address-title {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--20);
}

.woocommerce-Address-title .edit {
	flex: none;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

/* These carry the doubled `.woocommerce-account.woocommerce-page` prefix on
   purpose. WooCommerce's own block-theme stylesheet styles the account menu as
   `.woocommerce-account .woocommerce-MyAccount-navigation li`, so a single-class
   override loses on specificity — its 1em list padding stacked on the link's
   own padding and made the menu half again as tall as it looks like it should
   be. Both body classes are always present on this screen. */
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation ul {
	border-top: 1px solid var(--wp--preset--color--accent-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wp--preset--color--accent-2);
	margin: 0;
	padding: 0;
}

/* The link owns the spacing, the list item owns the rule. */
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation li a {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	padding: 1.1em 0;
	text-transform: uppercase;
}

.woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation li.is-active a {
	text-shadow:
		0.018em 0 0 currentColor,
		-0.018em 0 0 currentColor;
}

/* ---------------------------------------------------------------------------
 * Mini cart in the header
 * ------------------------------------------------------------------------ */

.wc-block-mini-cart__button {
	color: inherit;
	padding: 0;
}

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

.is-style-overlay-header .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.relaxed-account-link a {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}