/**
 * Cart, checkout, my account — classic templates AND WooCommerce Blocks
 * markup both get baseline styling here so the theme looks right either way.
 */

/* ---- Cart ---- */
.afripacka-cart-page {
	padding-block: var(--space-6);
}
.afripacka-cart-page__title {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	margin-bottom: var(--space-5);
}
.afripacka-cart-table th,
.afripacka-cart-table td {
	vertical-align: middle;
}
.afripacka-cart-table img {
	width: 64px;
	border-radius: var(--radius-md);
}
.afripacka-cart-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	margin-block: var(--space-5);
}
.afripacka-cart-page__totals {
	max-width: 420px;
	margin-inline-start: auto;
	background: var(--color-surface-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

/* WC Blocks cart/checkout — baseline so it doesn't look like stock WooCommerce */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: var(--font-sans);
}
.wc-block-components-product-name {
	color: var(--color-text);
	font-weight: var(--weight-medium);
}
.wc-block-components-totals-item__value,
.wc-block-cart-item__total-price-and-sale-badge {
	font-weight: var(--weight-semibold);
}
.wc-block-cart__submit-container .wp-element-button,
.wc-block-checkout__actions .wp-element-button,
.wp-block-woocommerce-checkout button.wp-element-button {
	border-radius: var(--radius-full) !important;
	background: var(--color-primary) !important;
	min-height: 48px;
}

/* ---- Checkout steps ---- */
.afripacka-checkout-steps {
	padding-block: var(--space-6);
	max-width: 720px;
	margin-inline: auto;
}
.afripacka-checkout-steps__nav {
	display: flex;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-3);
}
.afripacka-checkout-steps__step {
	font-weight: var(--weight-medium);
	color: var(--color-text-muted);
}
.afripacka-checkout-steps__step--active {
	color: var(--color-primary);
	font-weight: var(--weight-bold);
}
.afripacka-checkout-panel__title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-4);
}
.afripacka-checkout-panel__actions {
	margin-top: var(--space-5);
}
.afripacka-checkout-form .form-row {
	margin-bottom: var(--space-4);
}
.afripacka-checkout-form input.input-text,
.afripacka-checkout-form select,
.afripacka-checkout-form textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	min-height: 48px;
}

/* ---- My Account ---- */
.afripacka-account-page {
	padding-block: var(--space-6);
}
.afripacka-account-page__title {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	margin-bottom: var(--space-5);
}
.afripacka-account-page__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
.afripacka-account-page__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.afripacka-account-page__nav a {
	display: block;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	font-weight: var(--weight-medium);
}
.afripacka-account-page__nav li.is-active a,
.afripacka-account-page__nav a:hover {
	background: var(--color-brand-100);
	color: var(--color-primary);
}

@media (min-width: 1024px) {
	.afripacka-account-page__layout {
		grid-template-columns: 240px 1fr;
	}
	.afripacka-account-page__nav {
		position: sticky;
		top: calc(var(--header-height) + var(--space-4));
		align-self: start;
	}
}