/* ==========================================================================
   MotoJoy — woocommerce.css
   Loaded by functions.php ONLY when WooCommerce is active. Every value
   references the design tokens declared in main.css :root, so WooCommerce
   automatically inherits each project's theme — no hardcoded values here.

   Contents:
     1. General (buttons, prices)
     2. Single product page (title, review stars, trust-badge area)
     3. Cart page (clean table)
     4. Order received / thank-you page (order summary)
     5. Product card + badges (shared component)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. General
   -------------------------------------------------------------------------- */
/* WooCommerce core prints .button on its own elements and styles it at (0,2,1),
   which outranks the theme's .button rule (0,1,0). So the primary variant from
   main.css section 6 has to be restated here rather than inherited. Keep the
   two in sync: any change to .button belongs in both places, and main.css is
   the canonical owner. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--control-h-mobile);
	padding-inline: var(--spacing-lg);
	color: var(--color-text-on-dark);
	font-size: var(--text-button);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	background-color: var(--color-ink);
	border-radius: var(--radius);
	transition: background-color var(--duration-fast) ease;
}

@media (min-width: 48em) {
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce #respond input#submit,
	.woocommerce a.button.alt,
	.woocommerce button.button.alt {
		min-height: var(--control-h);
	}
}

.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 {
	color: var(--color-text-on-dark);
	background-color: var(--color-ink-soft);
}

.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[aria-disabled='true'],
.woocommerce a.button.disabled {
	color: var(--color-text-disabled);
	background-color: var(--color-bg-surface);
	cursor: not-allowed;
}

.woocommerce .price,
.woocommerce ins {
	color: var(--color-text);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce del {
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   2. Single product page
   -------------------------------------------------------------------------- */
.woocommerce div.product .product_title {
	margin-bottom: var(--spacing-sm);
}

/* Review stars — coloured with the accent and spaced from the title block. */
.woocommerce .star-rating {
	color: var(--color-accent);
	margin-bottom: var(--spacing-sm);
}

.woocommerce div.product .woocommerce-product-rating {
	margin-bottom: var(--spacing-md);
}

/* --------------------------------------------------------------------------
   3. Cart page
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--spacing-md);
	border-top: 1px solid var(--color-border);
}

.woocommerce table.shop_table th {
	text-align: left;
	background-color: var(--color-bg-surface);
}

.woocommerce .cart-collaterals .cart_totals {
	padding: var(--spacing-lg);
	background-color: var(--color-bg-surface);
	border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   4. Order received / thank-you page
   -------------------------------------------------------------------------- */
.woocommerce-order {
	max-width: 720px;
	margin-inline: auto;
}

.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-lg);
	list-style: none;
	background-color: var(--color-bg-surface);
	border-radius: var(--radius);
}

.woocommerce ul.order_details li {
	border: none;
	color: var(--color-text-muted);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: var(--spacing-xs);
	color: var(--color-text);
	font-size: 1rem;
	text-transform: none;
}