/*
 * WooCommerce-wide rules (loaded on every page while WooCommerce is active): notices, shop
 * tables, form fields and the quantity stepper (product page + cart).
 */

:is(.woocommerce, .woocommerce-page) table.shop_table {
	width: 100%;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-r-small);
}
:is(.woocommerce, .woocommerce-page) table.shop_table th,
:is(.woocommerce, .woocommerce-page) table.shop_table td {
	padding: .75rem;
	border-bottom: 1px solid var(--sl-border);
	font-size: .875rem;
	line-height: 1.25rem;
}
:is(.woocommerce, .woocommerce-page) form .input-text,
:is(.woocommerce, .woocommerce-page) form select {
	border-color: var(--sl-border-strong);
	border-radius: var(--sl-r-field);
}
:is(.woocommerce, .woocommerce-page) form .input-text:focus,
:is(.woocommerce, .woocommerce-page) form select:focus {
	border-color: var(--sl-black);
	box-shadow: 0 0 0 2px rgb(245 158 11 / .2);
}

/* Quantity stepper (assets/js/site.js enhances every `.quantity` with these buttons). */
.sl-qty-stepper {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-field);
}
.sl-qty-stepper .qty {
	width: 3.5rem;
	border-width: 0;
	text-align: center;
}
.sl-qty-stepper .qty:focus { box-shadow: none; }
.sl-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--sl-gray-600);
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-duration: var(--sl-duration);
	transition-timing-function: var(--sl-ease-std);
}
.sl-qty-btn:hover {
	background: var(--sl-gray-100);
	color: var(--sl-black);
}

/* WooCommerce notices (woocommerce-message/-info/-error, printed by
	 templates/notices/*.php on the cart/checkout/account/shop): the previous version of this
	 rule lived in `@layer components` as a `@apply`, which Tailwind's content scan purged from
	 assets/dist/site.css (these class names never appear in this theme's own php/js — see the
	 note above), so it silently did nothing in the built CSS. WooCommerce's own woocommerce.css
	 (kept enqueued) already gives these `position: relative` and left padding for its icon
	 font (`::before`, positioned at top:1em;left:1.5em) — that icon is kept as-is ("may stay");
	 only the card chrome (background/border) and typography are restyled here. Both selectors
	 below have the same specificity as woocommerce.css's combined rule, so being later in the
	 cascade (starlight-css prints after woocommerce-general-css) is enough to win without
	 `!important`. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	margin: 0 0 1.5rem;
	background-color: var(--sl-off-white);
	border: 1px solid var(--sl-border);
	border-left: 4px solid var(--sl-emerald-400);
	border-top: 0;
	border-radius: var(--sl-r-small);
	font-size: 0.875rem;
	color: var(--sl-black);
}
.woocommerce-info {
	border-left-color: var(--sl-gray-500);
}
.woocommerce-error {
	border-left-color: var(--sl-red-600);
	background-color: var(--sl-red-50);
	border-color: var(--sl-red-200);
}
.woocommerce-error li {
	list-style: none;
}
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
	color: var(--sl-black);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--sl-accent);
	text-underline-offset: 3px;
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-error a:not(.button):hover { color: var(--sl-accent); }
/* WooCommerce's notice icon (icon font, blue by default) follows the notice type. */
.woocommerce-message::before { color: var(--sl-emerald-700); }
.woocommerce-info::before { color: var(--sl-gray-500); }
.woocommerce-error::before { color: var(--sl-red-600); }
/* The notice's own "View cart" etc. button: placement only — its look is the button system's
	 secondary variant (assets/css/buttons.css). */
.woocommerce-message .button {
	float: right;
	margin-left: 1rem;
}

/* Mini-cart "View cart" (secondary) / "Checkout" (accent) buttons: moved to
	 assets/css/drawers.css (Task 3). */

/* White summary card: cart totals, checkout order review, and the same heading style. */
.sl-summary-card {
	padding: 1.5rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-card);
	background: var(--sl-white);
}
.sl-summary-card__title {
	margin-bottom: 1rem;
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: .025em;
}

/* Breadcrumb (inc/woocommerce.php woocommerce_breadcrumb_defaults). */
.sl-breadcrumb {
	margin-bottom: 1.5rem;
	color: var(--sl-muted);
	font-size: .75rem;
	line-height: 1rem;
}
.sl-breadcrumb__sep {
	margin-inline: .5rem;
	color: var(--sl-gray-300);
}

/* Shipping methods (cart summary + checkout order review): option cards instead of right-aligned
   native radios. The row's label sits above; each method is a card that turns black-bordered
   when chosen. */
tr.woocommerce-shipping-totals,
tr.woocommerce-shipping-totals > th,
tr.woocommerce-shipping-totals > td { display: block; width: 100%; text-align: left; }
tr.woocommerce-shipping-totals > th { padding-bottom: 0.5rem; border-bottom: 0; }
tr.woocommerce-shipping-totals > td { padding-top: 0; }
ul.woocommerce-shipping-methods {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.woocommerce-shipping-methods li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.875rem 1rem;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-r-small);
	background: var(--sl-white);
	font-family: var(--sl-font-sans);
	transition: border-color var(--sl-duration) var(--sl-ease-std), box-shadow var(--sl-duration) var(--sl-ease-std);
}
ul.woocommerce-shipping-methods li:hover { border-color: var(--sl-gray-400); }
ul.woocommerce-shipping-methods li:has(input:checked) {
	border-color: var(--sl-black);
	background: var(--sl-off-white);
}
ul.woocommerce-shipping-methods input.shipping_method,
#payment ul.wc_payment_methods input.input-radio {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	border: 1px solid var(--sl-border-strong);
	border-radius: 50%;
	background: var(--sl-white);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color var(--sl-duration) var(--sl-ease-std), border-width var(--sl-duration) var(--sl-ease-std);
}
ul.woocommerce-shipping-methods input.shipping_method:checked,
#payment ul.wc_payment_methods input.input-radio:checked { border: 5px solid var(--sl-black); }
ul.woocommerce-shipping-methods input.shipping_method:focus-visible,
#payment ul.wc_payment_methods input.input-radio:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 2px; }
ul.woocommerce-shipping-methods li label {
	flex: 1 1 auto;
	margin: 0;
	color: var(--sl-black);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
}
ul.woocommerce-shipping-methods li label .woocommerce-Price-amount { color: var(--sl-gray-700); font-family: var(--sl-font-mono); font-weight: 700; white-space: nowrap; }

/* Beats the totals tables' right-aligned mono cells (.cart_totals / review-order tfoot) for the shipping row. */
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th,
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td,
.cart_totals table.shop_table tr.woocommerce-shipping-totals th,
.cart_totals table.shop_table tr.woocommerce-shipping-totals td {
	display: block;
	width: 100%;
	text-align: left;
	font-family: var(--sl-font-sans);
}
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td,
.cart_totals table.shop_table tr.woocommerce-shipping-totals td { padding-top: 0; }
ul.woocommerce-shipping-methods li label { text-align: left; }

/* Totals as flex rows (label left, amount right) so a full-width row such as shipping can
   span the card; a plain table would wrap block cells in a shrink-to-fit anonymous cell. */
.woocommerce-checkout-review-order-table tfoot,
.cart_totals table.shop_table tbody { display: block; width: 100%; }
.woocommerce-checkout-review-order-table tfoot tr,
.cart_totals table.shop_table tr { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; width: 100%; }
.woocommerce-checkout-review-order-table tfoot tr > th,
.cart_totals table.shop_table tr > th { flex: 1 1 auto; width: auto; }
.woocommerce-checkout-review-order-table tfoot tr > td,
.cart_totals table.shop_table tr > td { flex: 0 0 auto; width: auto; }
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals > th,
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals > td,
.cart_totals table.shop_table tr.woocommerce-shipping-totals > th,
.cart_totals table.shop_table tr.woocommerce-shipping-totals > td { flex: 1 1 100%; width: 100%; }

/* The whole totals / order-review table is block layout (rows are flex, above). */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table tbody,
.cart_totals table.shop_table { display: block; width: 100%; }
.woocommerce-checkout-review-order-table tbody tr.cart_item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; width: 100%; }
.woocommerce-checkout-review-order-table tbody tr.cart_item > td.product-name { flex: 1 1 auto; min-width: 0; }
.woocommerce-checkout-review-order-table tbody tr.cart_item > td.product-total { flex: 0 0 auto; }

/* Product names are always shown in capitals: single title, sticky buy bar, cart table,
   mini-cart, checkout review and live search. (Cards already do it in product-card.css.) */
:is(.woocommerce, .woocommerce-page) div.product .product_title,
.sl-buybar__name,
.woocommerce-cart-form td.product-name,
.sl-mini-cart-row__name,
.sl-checkout-item-info,
.sl-search__name {
	text-transform: uppercase;
}