/* ==========================================================================
   AJ3 Cool-Aire — Cart presentation layer
   Added 2026-09-01.

   Why this file exists
   --------------------
   The cart was styled against its own "commerce" palette: a cold navy
   (#04508c) with grey rules (#e2e5e8) on pure white. The rest of the site is
   a warm sand system -- paper #fbf8f4, ink #1f1915, heat #d8a57d, Figtree --
   so the cart read as a different website the moment you landed on it.

   Rather than fight 766 !important declarations in the plugin's cart.css,
   this layer re-points the variables that stylesheet already consumes. One
   token block re-skins every rule that references it, then a small number of
   targeted refinements do the typography, rhythm and depth work.

   Loaded after aj3-cart-ui, so it wins on source order at equal specificity.
   Remove the enqueue in inc/aj3-site.php and the cart returns to exactly what
   it was. No markup, no cart logic and no WooCommerce behaviour is touched
   here -- this file only paints.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Re-point the commerce tokens onto the AJ3 warm system.

   These names are the plugin's, not ours. Keeping the names and changing only
   the values is what lets the existing cart CSS restyle itself wholesale.
   -------------------------------------------------------------------------- */

body.woocommerce-cart,
body.woocommerce-checkout {
	--aj3-commerce-blue: #1f1915;          /* was cold navy; now AJ3 ink   */
	--aj3-commerce-ink: #1f1915;
	--aj3-commerce-muted: #847870;
	--aj3-commerce-line: #e3d9cf;          /* warm rule, matches --line    */
	--aj3-commerce-soft: #f7f2ec;
	--aj3-commerce-white: #fffdfb;         /* --card, not pure white       */
	--aj3-commerce-orange: #d8a57d;        /* --heat                       */
	--aj3-commerce-orange-hover: #c8926a;
	--aj3-commerce-shadow: 0 1px 2px rgba(32, 24, 18, .04), 0 18px 44px -28px rgba(32, 24, 18, .22);

	/* Local additions used only by this file. */
	--aj3-cart-ink-deep: #14100d;
	--aj3-cart-heat-deep: #93684d;
	--aj3-cart-radius: 18px;
	--aj3-cart-radius-sm: 11px;
}

html[data-theme="dark"] body.woocommerce-cart,
html[data-theme="dark"] body.woocommerce-checkout {
	--aj3-commerce-blue: #f6f1eb;
	--aj3-commerce-ink: #f6f1eb;
	--aj3-commerce-muted: #a59a90;
	--aj3-commerce-line: #3c342e;
	--aj3-commerce-soft: #1b1815;
	--aj3-commerce-white: #221e1a;
	--aj3-commerce-orange: #d8a57d;
	--aj3-commerce-orange-hover: #e6b891;
	--aj3-commerce-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px -28px rgba(0, 0, 0, .7);
	--aj3-cart-ink-deep: #ffffff;
	--aj3-cart-heat-deep: #e0b38f;
}

/* The page ground itself, so the cards sit on warm paper rather than white. */
body.woocommerce-cart .aj3-woo-main,
body.woocommerce-cart main#main {
	background: #fbf8f4;
}

html[data-theme="dark"] body.woocommerce-cart .aj3-woo-main,
html[data-theme="dark"] body.woocommerce-cart main#main {
	background: #171412;
}


/* --------------------------------------------------------------------------
   2. Editorial header for the cart.

   The cart page has no hero, so this is the page's opening. Set as type
   rather than a filled banner: a tracked eyebrow, a Figtree title carrying
   the page h1, one line of guidance, closed by a hairline rule that lines up
   with the card edges below.
   -------------------------------------------------------------------------- */

/*
 * The header must share a left edge with the cart card below it. The block
 * insets itself from .wrap by 80px (32px under 1024, 24px under 600), so this
 * mirrors that formula rather than inventing its own padding -- otherwise the
 * heading sits ~12px inboard of the card and reads as misaligned.
 */
.aj3-cart-intro {
	width: min(1500px, calc(100% - 80px));
	max-width: 1500px;
	margin: clamp(28px, 4vw, 48px) auto 0;
}

@media (max-width: 1024px) {
	.aj3-cart-intro {
		width: calc(100% - 32px);
		max-width: calc(100% - 32px);
		margin-block-start: clamp(22px, 3.5vw, 32px);
	}
}

@media (max-width: 600px) {
	.aj3-cart-intro {
		width: calc(100% - 24px);
		max-width: calc(100% - 24px);
	}
}

.aj3-cart-intro__eyebrow {
	display: block;
	margin: 0 0 10px;
	color: var(--aj3-cart-heat-deep);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .16em;
	line-height: 1.2;
	text-transform: uppercase;
}

.aj3-cart-intro__title {
	margin: 0;
	color: var(--aj3-cart-ink-deep);
	font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: clamp(1.9rem, 4.4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.06;
	text-wrap: balance;
}

.aj3-cart-intro__lede {
	margin: 12px 0 0;
	max-width: 56ch;
	color: var(--aj3-commerce-muted);
	font-size: 1.02rem;
	line-height: 1.6;
}

.aj3-cart-intro__rule {
	margin: clamp(20px, 3vw, 30px) 0 0;
	border: 0;
	border-top: 1px solid var(--aj3-commerce-line);
}


/* --------------------------------------------------------------------------
   Everything below section 2 used to target the WooCommerce Cart BLOCK
   (.wc-block-*). The cart page was switched back to the classic
   [woocommerce_cart] shortcode on 2026-09-01, so those selectors no
   longer match anything and have been removed rather than left to rot.

   The classic cart is styled by the plugin's own cart.css, which already
   carries 314 rules for it -- the four-column shop_table, the coupon row,
   Update cart and Cart totals. Those rules read the --aj3-commerce-*
   tokens that section 1 above re-points, so the classic cart renders in
   the AJ3 warm palette rather than the old navy.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   3. Mobile cart rows — every cell placed explicitly.

   Why this is written out in full rather than nudged
   --------------------------------------------------
   cart.css stacks the row on a two-column grid but only places SOME cells,
   leaving the rest to auto-placement. Auto-placement depends on how tall the
   preceding cells are, so a product whose name wraps to two lines, or that
   carries a Payment variation, pushed its neighbours into different slots
   than one that did not. That is why one row showed "Price:" and the next
   showed a bare figure: the label was there, the cell had just landed
   somewhere the label rule did not style.

   Every cell below is given an explicit column and row, so the layout is
   identical for every product no matter how long its name is or whether it
   has a variation.

   Order: thumbnail + name, then Price, Subtotal, Quantity as label/value
   pairs, and the remove control pinned to the top right.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item {
		position: relative !important;
		display: grid !important;
		grid-template-columns: 64px minmax(0, 1fr) !important;
		grid-template-rows: auto auto auto auto !important;
		align-items: center !important;
		column-gap: 14px !important;
		row-gap: 0 !important;
		padding: 16px 14px !important;
		border: 1px solid var(--aj3-commerce-line) !important;
		border-radius: var(--aj3-cart-radius) !important;
		background: var(--aj3-commerce-white) !important;
		box-shadow: var(--aj3-commerce-shadow) !important;
	}

	/* No rules inside a product; the card edge separates one from the next. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td {
		width: auto !important;
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	/* ---- row 1: thumbnail + name ---- */

	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-thumbnail {
		grid-column: 1 !important;
		grid-row: 1 !important;
		padding: 0 !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-thumbnail img {
		display: block !important;
		width: 64px !important;
		height: 64px !important;
		padding: 4px !important;
		border: 1px solid var(--aj3-commerce-line) !important;
		border-radius: 10px !important;
		background: var(--aj3-commerce-soft) !important;
		object-fit: contain !important;
		box-sizing: border-box !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-name {
		grid-column: 2 !important;
		grid-row: 1 !important;
		padding: 0 30px 0 0 !important;   /* clear of the remove control */
		text-align: left !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name > a {
		display: block !important;
		color: var(--aj3-cart-ink-deep) !important;
		font-size: .92rem !important;
		font-weight: 700 !important;
		line-height: 1.32 !important;
		text-decoration: none !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name .aj3-cart-payment,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-name dl.variation {
		display: block !important;
		margin: 4px 0 0 !important;
		padding: 0 !important;
		border: 0 !important;
		color: var(--aj3-commerce-muted) !important;
		font-size: .78rem !important;
		font-weight: 600 !important;
		line-height: 1.35 !important;
	}

	/* The name cell is the row heading, so it takes no label of its own. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-name::before,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-thumbnail::before,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-remove::before {
		content: none !important;
		display: none !important;
	}

	/* ---- rows 2-4: label left, value right ---- */

	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-price,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-subtotal,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-quantity {
		grid-column: 1 / -1 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		padding: 9px 0 0 !important;
		text-align: right !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-price   { grid-row: 2 !important; padding-top: 14px !important; }
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-subtotal { grid-row: 3 !important; }
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-quantity { grid-row: 4 !important; }

	/* One label style throughout: "Price:" */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-price::before,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-subtotal::before,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-quantity::before {
		content: attr(data-title) ":" !important;
		display: block !important;
		float: none !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		color: var(--aj3-commerce-muted) !important;
		font-size: .82rem !important;
		font-weight: 650 !important;
		letter-spacing: 0 !important;
		line-height: 1.3 !important;
		text-align: left !important;
		text-transform: none !important;
	}

	/* Money: subtotal is the figure that matters, so only it carries weight. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-price .amount {
		color: var(--aj3-commerce-ink) !important;
		font-size: .92rem !important;
		font-weight: 600 !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-subtotal .amount {
		color: var(--aj3-cart-ink-deep) !important;
		font-size: .98rem !important;
		font-weight: 750 !important;
	}

	/* ---- remove control, pinned clear of the name ---- */

	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody > tr.cart_item > td.product-remove {
		position: absolute !important;
		top: 12px !important;
		right: 12px !important;
		display: grid !important;
		place-items: center !important;
		width: 26px !important;
		height: 26px !important;
		padding: 0 !important;
		z-index: 2 !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-remove a.remove {
		display: grid !important;
		place-items: center !important;
		width: 26px !important;
		height: 26px !important;
		line-height: 1 !important;
		font-size: 1.15rem !important;
	}
}