/* ===========================================================================
   Round 7 · NAEM-SPEC #7 — the cart: totals beside the line items

   "Make the cart page feel smoother and less empty. Move the 'Cart totals'
   block from the bottom to the right-hand side (a sticky summary column next to
   the line items)."

   The cart is the classic WooCommerce shortcode, rendered by index.php inside
   <article> > .body-copy. Nothing in the theme had ever styled it above 680px,
   so what the owner was looking at was mostly WooCommerce's own stylesheet on a
   dark page. Three things made it read as empty, and only one of them is where
   the totals sit:
     1. .body-copy caps its children at 66ch. It is a prose rule, and it was
        holding a six-column table to ~600px in a 1200px container.
     2. The line items and the totals were two unrelated boxes: a bordered
        table, and a 48%-wide float with light-theme #e9e6ed rules inside it.
     3. The totals were under the table, so the page's one decision ("continue")
        was below the fold of its own content.

   Everything is scoped to body.woocommerce-cart. Loaded only on the cart, after
   every other sheet (inc/round7-points.php), so the only !important below are
   on properties where the theme's or the plugin's own rule is !important.

   WIDTHS
     <= 680   mobile.css owns the line items (stacked cards). Only the summary
              plate, the empty state and the colour fixes apply.
     681-768  WooCommerce's small-screen sheet turns rows into label/value
              blocks. Left alone apart from the same three things.
     769-1023 real table, as a plate. Summary stays BELOW it, as today.
     >= 1024  two columns; the summary is sticky under the header.
   ========================================================================= */

body.woocommerce-cart {
	--r7-cart-aside: clamp(320px, 29vw, 384px);
	--r7-cart-gap: clamp(24px, 2.6vw, 40px);
	--r7-cart-pad: clamp(20px, 1.9vw, 28px);
}

/* 1. Release the prose cap, and the prose colour with it: a cart is an
      interface, and --muted on every product name reads as disabled. */
body.woocommerce-cart article > .body-copy { max-width: none; color: var(--text); }


/* ---------------------------------------------------------------------------
   The summary plate — every width
   ------------------------------------------------------------------------- */

/* WooCommerce ships a clearfix pair on this wrapper. Harmless while it is a
   block; it is removed because nothing floats in here any more. */
body.woocommerce-cart .cart-collaterals::before,
body.woocommerce-cart .cart-collaterals::after { content: none; }

body.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	padding: var(--r7-cart-pad);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
}

body.woocommerce-cart .cart-collaterals .cart_totals > h2 {
	margin: 0 0 var(--s3);
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -.01em;
}

/* The free-pen status line is printed at the top of the totals. The theme lays
   it out as a flex row, which is right for the one state that has two children
   (eligible: a sentence and a claim button) and wrong for the other two: locked
   and claimed are a single sentence with inline markup, and as a flex container
   that sentence is cut into one item per text run — "add" / "$65.81" / "more in
   merchandise…" each became its own column (rendered and seen, 1440px). So it
   is a plain block here, and only the eligible state stacks: sentence, then the
   button at full width like the one below it. */
body.woocommerce-cart .cart_totals .peptpro-pen-gift {
	display: block;
	margin-bottom: var(--s5);
	line-height: 1.55;
}
body.woocommerce-cart .cart_totals .peptpro-pen-gift.is-eligible {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--s3);
}
body.woocommerce-cart .cart_totals .peptpro-pen-gift__claim { width: 100%; }

/* The totals table loses its own box (the plate is the box) and keeps only the
   rules between rows. WooCommerce draws those rules in #e9e6ed — a light-theme
   grey that was showing as the brightest lines on the page. */
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr th,
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr td {
	padding: var(--s3) 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
	vertical-align: top;
	line-height: 1.5;
}
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr th { width: 38%; padding-right: var(--s3); text-align: left; }
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr td { text-align: right; }

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total td {
	padding-top: var(--s4);
	border-bottom: 0;
	color: var(--text);
}
body.woocommerce-cart .cart_totals tr.order-total .amount { font-size: 22px; letter-spacing: -.01em; }

/* WooCommerce colours discounts and small print for a white page. */
body.woocommerce-cart .cart-collaterals .cart_totals .discount td { color: var(--ok); }
body.woocommerce-cart .cart-collaterals .cart_totals table small,
body.woocommerce-cart .cart-collaterals .cart_totals p small { color: var(--muted); }

/* Shipping cell: a method list, a destination line and the calculator. */
body.woocommerce-cart .cart_totals #shipping_method { margin: 0; padding: 0; list-style: none; }
body.woocommerce-cart .cart_totals #shipping_method li { margin: 0 0 6px; }
body.woocommerce-cart .cart_totals #shipping_method label { display: inline; margin: 0; color: var(--text); font-size: 14px; }
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination { margin: var(--s2) 0 0; color: var(--muted); font-size: 13px; }
body.woocommerce-cart .cart_totals .shipping-calculator-button { color: var(--accent-text); font-size: 13px; }
body.woocommerce-cart .cart_totals .shipping-calculator-form { text-align: left; }

/* The one decision on the page: full width, at the bottom of the summary. */
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout { padding: var(--s5) 0 0; }
body.woocommerce-cart .cart_totals .checkout-preview-link { display: flex; width: 100%; min-height: 48px; }
body.woocommerce-cart .cart_totals .checkout-preview-note { margin: var(--s3) 0 0; }

/* While a quantity change is in flight WooCommerce lays a WHITE sheet at 60%
   over both boxes (blockUI writes it as inline style, hence !important). On
   this page that is a full-brightness flash on every update. Same overlay, in
   the page colour. */
body.woocommerce-cart .blockUI.blockOverlay {
	border-radius: var(--r-lg);
	background: var(--page) !important;
	opacity: .6 !important;
}

/* Cross-sells are moved out of the collaterals by inc/round7-points.php so they
   sit under both columns instead of inside the summary. */
body.woocommerce-cart .woocommerce > .cross-sells { margin-top: var(--s7); }
body.woocommerce-cart .woocommerce > .cross-sells > h2 { margin-bottom: var(--s5); font-size: clamp(22px, 2vw, 28px); }
body.woocommerce-cart .woocommerce > .cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: var(--s5);
	margin: 0;
	padding: 0;
	list-style: none;
}
body.woocommerce-cart .woocommerce > .cross-sells ul.products::before,
body.woocommerce-cart .woocommerce > .cross-sells ul.products::after { content: none; }


/* ---------------------------------------------------------------------------
   Empty cart — every width

   WooCommerce prints a status line and, as a separate sibling, a "Return to
   shop" paragraph. Between them in the DOM sits the four-points block (it is
   hooked on woocommerce_cart_is_empty, the only hook that template has). The
   wrapper becomes a one-column grid so `order` can show the block BELOW the
   button; the block contains nothing focusable on this route, so the visual
   order and the tab order cannot disagree.

   The message and the button are dressed as the top and bottom halves of one
   centred plate. :has() is already a dependency of mobile.css and three Round
   5/6 sheets; without it this degrades to the plain stacked state it was.
   ------------------------------------------------------------------------- */
body.woocommerce-cart .body-copy > .woocommerce:has(> .wc-empty-cart-message) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
body.woocommerce-cart .woocommerce:has(> .wc-empty-cart-message) > .r7-points { order: 3; }
body.woocommerce-cart .woocommerce:has(> .wc-empty-cart-message) > .return-to-shop { order: 2; }

body.woocommerce-cart .woocommerce > .wc-empty-cart-message,
body.woocommerce-cart .woocommerce > .return-to-shop {
	width: min(100%, 560px);
	margin: 0 auto;
	border: 1px solid var(--line);
	background: var(--surface);
	text-align: center;
}
body.woocommerce-cart .woocommerce > .wc-empty-cart-message {
	padding: clamp(32px, 5vw, 56px) var(--s5) var(--s4);
	border-bottom: 0;
	border-radius: var(--r-lg) var(--r-lg) 0 0;
}
body.woocommerce-cart .woocommerce > .return-to-shop {
	padding: 0 var(--s5) clamp(32px, 5vw, 56px);
	border-top: 0;
	border-radius: 0 0 var(--r-lg) var(--r-lg);
}
/* The status line is a notice box by default (and mobile.css re-boxes it under
   680px). Inside a plate that is a box in a box; here it is just the sentence.
   The theme's own notice rule is !important on these three properties. */
body.woocommerce-cart .wc-empty-cart-message .cart-empty {
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	color: var(--text);
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 600;
	letter-spacing: -.01em;
}
body.woocommerce-cart .return-to-shop .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }


/* ---------------------------------------------------------------------------
   769px and up — the line items as a plate
   (WooCommerce's small-screen sheet stops at 768px; below that the rows are
   not table rows any more and mobile.css / that sheet own them.)
   ------------------------------------------------------------------------- */
@media (min-width: 769px) {
	body.woocommerce-cart .woocommerce-cart-form {
		margin: 0 0 var(--s5);
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: var(--surface);
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table {
		margin: 0;
		border: 0;
		border-radius: 0;
		border-collapse: collapse;
	}

	/* One rule per row, drawn once. WooCommerce draws a top rule and the theme
	   a bottom rule on every cell; collapsed, that was a double-weight line. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table th,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td {
		padding: var(--s4) var(--s3);
		border-top: 0;
		border-bottom: 1px solid var(--line);
		vertical-align: middle;
	}
	body.woocommerce-cart .woocommerce-cart-form table.shop_table thead th { padding-block: 14px; }
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr > :first-child { padding-left: var(--r7-cart-pad); }
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr > :last-child { padding-right: var(--r7-cart-pad); }
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr:last-child > td { border-bottom: 0; }

	/* Column rhythm: the name column takes what is left; everything with a
	   number in it keeps to one line and sizes to its content. */
	body.woocommerce-cart table.cart .product-remove { width: 44px; padding-right: 0; }
	body.woocommerce-cart table.cart .product-thumbnail { width: 72px; }
	body.woocommerce-cart table.cart .product-price,
	body.woocommerce-cart table.cart .product-quantity,
	body.woocommerce-cart table.cart .product-subtotal { width: 1%; white-space: nowrap; }
	body.woocommerce-cart table.cart th.product-subtotal,
	body.woocommerce-cart table.cart td.product-subtotal { text-align: right; }

	/* WooCommerce pins cart thumbnails to 32px. */
	body.woocommerce-cart table.cart .product-thumbnail img {
		display: block;
		width: 56px;
		height: 56px;
		object-fit: contain;
		border: 1px solid var(--line);
		border-radius: var(--r-sm);
		background: var(--page);
	}
	body.woocommerce-cart table.cart .peptpro-gift-thumbnail { width: 56px; height: 56px; border-radius: var(--r-sm); }

	body.woocommerce-cart table.cart td.product-name > a { color: var(--text); font-weight: 600; }
	body.woocommerce-cart table.cart td.product-name > a:hover { color: var(--accent-text); }

	/* A 1em glyph is not a target. Same control, 44px box; the hover is the
	   theme's raised surface instead of WooCommerce's red disc (its colour rule
	   is !important, so this one has to be). */
	body.woocommerce-cart table.cart a.remove {
		width: 44px;
		height: 44px;
		display: grid;
		place-items: center;
		font-size: 22px;
		font-weight: 400;
	}
	body.woocommerce-cart table.cart a.remove:hover {
		background: var(--surface-raised);
		color: var(--text) !important;
	}

	/* The coupon row. WooCommerce floats the coupon left and right-aligns the
	   cell so "Update cart" lands on the right; that layout is kept (the cell
	   has to stay a table cell or it loses its colspan). What changes is the
	   80px coupon field, and the weight: with three solid teal buttons on the
	   page nothing was primary. These two are secondary actions and are drawn
	   as the theme's ghost button, which leaves one solid CTA — the one in the
	   summary. The theme's .woocommerce .button rule is !important on these
	   properties, so the override has to be too. */
	body.woocommerce-cart table.cart td.actions { padding-block: var(--s4); }
	body.woocommerce-cart table.cart td.actions .coupon { align-items: center; }
	body.woocommerce-cart table.cart td.actions .coupon .input-text { width: 220px; margin: 0; }
	body.woocommerce-cart table.cart td.actions .button {
		border-color: var(--line-strong) !important;
		background: var(--surface-raised) !important;
		color: var(--text) !important;
	}
	body.woocommerce-cart table.cart td.actions .button:hover:not(:disabled) { border-color: var(--accent) !important; }
}

/* 769-1023: summary under the table, right-aligned like the float it replaces,
   but a sane fixed measure instead of 48% of whatever the container is. */
@media (min-width: 769px) and (max-width: 1023px) {
	body.woocommerce-cart .cart-collaterals .cart_totals { width: min(100%, 440px); margin-left: auto; }
}


/* ---------------------------------------------------------------------------
   1024px and up — two columns

   The wrapper is a two-track grid and EVERY child spans both tracks unless it
   is one of the two that are named. That default is the point: WooCommerce and
   the theme print other things in here (the payments notice, the notices
   wrapper, notices injected by cart.js, cross-sells, the four-points block),
   plugins can add more, and anything unnamed must fall back to a full-width
   row rather than into a 380px column.

   Placement needs no row numbers: the form is pinned to track 1, the summary
   to track 2, and the auto-placement cursor keeps an item pinned to a later
   track on the same row. Anything after them starts a new row.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	body.woocommerce-cart .body-copy > .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--r7-cart-aside);
		column-gap: var(--r7-cart-gap);
		align-items: start;
	}
	body.woocommerce-cart .body-copy > .woocommerce > * { grid-column: 1 / -1; min-width: 0; }
	body.woocommerce-cart .body-copy > .woocommerce > .woocommerce-cart-form { grid-column: 1; margin-bottom: 0; }
	body.woocommerce-cart .body-copy > .woocommerce > .cart-collaterals { grid-column: 2; width: auto; align-self: stretch; }

	/* An empty cart has neither named child; keep it the single centred column
	   the block above set up. */
	body.woocommerce-cart .body-copy > .woocommerce:has(> .wc-empty-cart-message) { grid-template-columns: minmax(0, 1fr); }

	/* Tighter cells while the table shares the row: at 1024 the left track is
	   ~600px for six columns. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table th,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td { padding-inline: 10px; }
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr > :first-child { padding-left: var(--s4); }
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr > :last-child { padding-right: var(--s4); }
	body.woocommerce-cart table.cart td.actions .coupon .input-text { width: 180px; }
}

@media (min-width: 1280px) {
	body.woocommerce-cart .woocommerce-cart-form table.shop_table th,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td { padding-inline: var(--s3); }
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr > :first-child { padding-left: var(--r7-cart-pad); }
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr > :last-child { padding-right: var(--r7-cart-pad); }
	body.woocommerce-cart table.cart td.actions .coupon .input-text { width: 220px; }
}

/* Stretch the collaterals across its own grid row, then stick the totals inside
   it. Sticking the collaterals itself uses the entire WooCommerce grid as its
   boundary, so the summary can slide over later full-width rows (cross-sells
   and the four points). The stretched column ends with the cart's row, keeping
   the summary beside the items and releasing it before the next section.

   Sticky only when there is height to be sticky in. On a short window a pinned
   summary taller than the viewport would hide its own button below the fold
   with no way to scroll to it until the whole cart had gone past. The offset is
   the sticky header plus the same gap the prepared checkout's aside uses. */
@media (min-width: 1024px) and (min-height: 640px) {
	body.woocommerce-cart .body-copy > .woocommerce > .cart-collaterals > .cart_totals {
		position: sticky;
		top: calc(var(--nav-h) + var(--s4));
	}
}