/*
 * ArneIron — woocommerce.css (ported from arneiron-base Lane D, P1-2).
 * -----------------------------------------------------------------------------
 * Gray, token-only WooCommerce surface support. Neutralises Woo's default
 * chrome onto the base tokens so every skin recolors shop/cart/checkout/account
 * surfaces automatically. Loaded only when WooCommerce is active (see
 * inc/woocommerce.php). Spacing slugs remapped from arneiron-base's 10-80 scale
 * to arneiron's 0-10 scale during the P0/P1 consolidation (hub#1230).
 *
 * Hex-grep gate:
 *   ! grep -nE '#[0-9a-fA-F]{3,8}' woocommerce.css | grep -v '/*'
 * -----------------------------------------------------------------------------
 */

/* --- Buttons: adopt the theme accent/token button styling --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
	font-weight: 600;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

/* --- Product cards / panels --- */
.woocommerce ul.products li.product,
.woocommerce div.product .woocommerce-tabs,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #payment,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--on-surface);
}

/* --- Prices + sale flashes --- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
}
.woocommerce span.onsale {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	border-radius: var(--wp--custom--radius--pill);
}

/* --- Tables (cart, order, account) --- */
.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--on-surface);
}
.woocommerce table.shop_table thead th {
	background-color: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
}

/* --- Form fields --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single {
	background-color: var(--wp--preset--color--surface-3);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--on-surface);
	border-radius: var(--wp--custom--radius--sm);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 2px solid var(--wp--custom--color--focus-ring);
	outline-offset: 2px;
}

/* --- Notices --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--on-surface);
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--sm);
}

/* --- Account balance seam echo (mini): the wallet plugin owns the real chip --- */
.arneiron-balance-seam .balance-chip {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--subtle);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	padding-block: var(--wp--preset--spacing--1);
	padding-inline: var(--wp--preset--spacing--3);
}

/* -----------------------------------------------------------------------------
 * SPACING OWNERSHIP: the account nav (hub — Woo/ArneIron double-padding).
 *
 * ArneIron's account-nav design makes the <a> a display:block row that owns the
 * row's spacing, and leaves the <li> a bare bordered separator. The portal
 * layer says so explicitly — it sets `margin: 0` on the li and puts
 * `padding: .7rem .9rem` on the anchor.
 *
 * WooCommerce's block-theme compat sheet independently pads the SAME row on the
 * OUTER box:
 *     woocommerce/assets/css/woocommerce-blocktheme.css (minified, line 1)
 *     .woocommerce-account .woocommerce-MyAccount-navigation li { padding: 1em 0 }
 *   + @media (max-width: 768px) { ... li { padding: .35em 0 } }
 *
 * That rule only ships for BLOCK themes, so it never appeared while the portal
 * CSS was written against a classic theme. Under ArneIron 0.5.0 (FSE) both
 * layers now apply to two nested boxes, and the row is padded twice:
 * 17.92 + 17.92 (Woo, on the li) + 11.2 + 11.2 (ArneIron, on the a)
 * = 58.24px around a ~20px line, an ~80px tall row.
 *
 * Woo does not "win" here — it is simply UNOPPOSED: ArneIron already sorts after
 * woocommerce-blocktheme.css and already matches this selector at equal
 * specificity, it just never declared `padding`. So the fix is a declaration,
 * not a cascade fight.
 *
 * `ul li` is (0,2,2) — one element more specific than Woo's (0,2,1) — so it
 * beats BOTH the base rule and the max-width:768px variant on specificity
 * alone, independent of load order, with no `!important`.
 * -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	padding: 0;
}

/* Standalone fallback so the theme still owns real row spacing when the
 * arneiron-portal plugin is not active. Deliberately (0,1,2) — LOWER than
 * portal's (0,2,2) — so portal keeps ownership (including its <=768px
 * compaction) wherever it is present. */
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding-block: var(--wp--preset--spacing--4);
	padding-inline: var(--wp--preset--spacing--5);
}