/**
 * AfriÉlan Studio — Cart
 *
 * Typography only. Cart stays the native WooCommerce page/markup/
 * layout as-is — no widths, margins, padding, borders, backgrounds,
 * grid, or flex here. This file only sets font-family, size, weight,
 * letter-spacing, and text color so the cart's text matches the rest
 * of the site (Fraunces for emphasis/totals, Inter for body, the
 * brand ink/muted colors) instead of Astra's own default table type.
 *
 * WIDTH UPDATE (design change #3, "standalone pages wider"): the two
 * max-width values below were bumped from 1100px to 1400px to match
 * Checkout/Account/homepage. This is still just a single max-width
 * number on the existing container — no grid/flex/layout restructuring,
 * so the "typography only, don't touch Cart's native layout" rule from
 * earlier sessions still holds.
 */

/* ---------------------------------------------------------------------
   Page title — printed by afrielan_render_cart_page_header() in
   inc/cart-behavior.php. Same numbers as .afrielan-account-page-header
   in account.css (Orders/Address Book/Account Details) so the title
   sits at the same width/position on every one of these pages.
--------------------------------------------------------------------- */
.afrielan-cart-page-header {
	max-width: 1400px;
	margin: 40px auto 0;
	padding: 0 20px;
}
.afrielan-cart-page-header h1 {
	font-size: 1.9rem;
	margin: 0 0 6px;
}
.afrielan-cart-page-header p {
	font-family: var(--brand-font-body);
	color: var(--brand-ink-soft);
	font-size: 14.5px;
	margin: 0;
}

/* ---------------------------------------------------------------------
   Content card — wraps the product table + totals box together (see
   afrielan_open_cart_container()/afrielan_close_cart_container() in
   inc/cart-behavior.php). Same card look as .woocommerce-MyAccount-content
   (Orders/Account Details/Address Book) so Cart matches the rest of the
   site instead of sitting on bare page background.
--------------------------------------------------------------------- */
/* Empty-cart wrapper: intentionally reuses .afrielan-cart-container
   as-is (see below) rather than a separate rule — see cart-empty.php. */

.afrielan-cart-container {
	max-width: 1400px;
	margin: 20px auto 60px;
	padding: 1.75em;
	background: var(--brand-surface);
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	box-shadow: var(--ae-shadow);
	box-sizing: border-box;
}
/* The totals box already has its own inner spacing from Astra/WooCommerce
   defaults - drop its own top margin so it doesn't add extra gap on top
   of the card's own padding above it. */
.afrielan-cart-container .cart-collaterals { margin-top: 1.5em; }

/* Table header row (Product / Price / Quantity / Subtotal) — Astra's
   own default renders these bold and black. Matching the same quiet
   uppercase micro-label type already used on every other table on the
   site (Orders, Checkout order review). */
.woocommerce-cart table.shop_table.cart thead th {
	font-family: var(--brand-font-body) !important;
	font-weight: 600 !important;
	font-size: 0.78em !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	color: var(--brand-ink-soft) !important;
}

/* Product name — Astra's default link color (accent/terracotta) makes
   it read as a call-to-action instead of a label. */
.woocommerce-cart td.product-name a {
	color: var(--brand-ink) !important;
	font-weight: 500;
	text-decoration: none;
}
.woocommerce-cart td.product-name dl.variation {
	font-size: 0.85em;
	color: var(--brand-ink-soft);
}

/* Price / subtotal amounts — Fraunces, same as every other price/total
   figure sitewide (Orders table, Checkout order review, cart_totals). */
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal,
.woocommerce-cart .cart_totals .amount {
	font-family: var(--brand-font-display);
}

/* Cart totals heading + rows */
.woocommerce-cart .cart_totals h2 {
	font-family: var(--brand-font-display);
	font-weight: 500;
}
.woocommerce-cart .cart_totals table.shop_table th {
	font-family: var(--brand-font-body);
	color: var(--brand-ink-soft);
	font-weight: 500;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	font-family: var(--brand-font-display);
	font-size: 1.15em;
	font-weight: 500;
}