/**
 * Grovidex Cart V1 (Phase 14C).
 *
 * Cart-scoped in two ways: this stylesheet is enqueued only on the cart
 * page (see inc/enqueue.php), and every rule is nested under a
 * .gvx-cart* class or the .gvx-cart-page body class. Nothing here
 * restyles WooCommerce tables, buttons or forms globally, and the
 * homepage, Shop, single product, account and checkout routes are
 * untouched.
 *
 * All colour, spacing, radius and type values come from the Grovidex
 * tokens in tokens.css.
 */

/* ==================================================================
 * 1. Page shell
 * ================================================================== */

/* Astra's own entry header is emptied by inc/cart.php (its title filter
   is switched off), so the leftover wrapper is removed here rather than
   left as a blank band. Scoped to the cart page only. */
body.gvx-cart-page .entry-header {
	display: none;
}

.gvx-cart {
	box-sizing: border-box;
	font-family: var(--gvx-font-sans);
	color: var(--gvx-ink-soft);
}

.gvx-cart *,
.gvx-cart *::before,
.gvx-cart *::after {
	box-sizing: border-box;
}

/* ==================================================================
 * 2. Heading (rendered by inc/cart.php, above the notices)
 * ================================================================== */

.gvx-cart__head {
	margin-bottom: var(--gvx-space-4);
}

.gvx-cart__title {
	margin: 0;
	font-size: var(--gvx-text-xl);
	font-weight: 700;
	line-height: var(--gvx-leading-tight);
	color: var(--gvx-ink);
}

.gvx-cart__sub {
	margin: var(--gvx-space-1) 0 0;
	font-size: var(--gvx-text-sm);
	line-height: var(--gvx-leading-snug);
	color: var(--gvx-ink-muted);
}

/* ==================================================================
 * 3. Layout
 * Mobile/tablet: one column, summary below.
 * Desktop (>=992px): items + summary side by side.
 * ================================================================== */

.gvx-cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gvx-space-5);
	align-items: start;
}

.gvx-cart-main {
	min-width: 0;
}

@media (min-width: 992px) {
	.gvx-cart-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--gvx-space-5);
	}
}

@media (min-width: 1200px) {
	.gvx-cart-layout {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: var(--gvx-space-6);
	}
}

/* ==================================================================
 * 4. Items container
 * ================================================================== */

.gvx-cart-items {
	min-width: 0;
}

.gvx-cart-items__title {
	margin: 0 0 var(--gvx-space-3);
	font-size: var(--gvx-text-lg);
	font-weight: 700;
	color: var(--gvx-ink);
}

.gvx-cart-items__list {
	display: flex;
	flex-direction: column;
	gap: var(--gvx-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==================================================================
 * 5. Cart item — mobile-first card
 * Deliberately NOT the Shop product card: horizontal, no stretched
 * whole-card link, and it carries interactive controls.
 * ================================================================== */

.gvx-cart-item {
	display: grid;
	/*
	 * Three columns, not two: the thumbnail column is 68px, which is
	 * narrower than the quantity control itself (72px) and far too
	 * narrow for its "Quantity" label. Pinning the qty area to that
	 * column overflowed the input by 4px and collapsed the label, so
	 * price/qty now span the full width and Remove takes a dedicated
	 * 48px end column on the subtotal row.
	 */
	grid-template-columns: 68px minmax(0, 1fr) 48px;
	grid-template-areas:
		"media content content"
		"price price   price"
		"qty   qty     qty"
		"sub   sub     remove";
	gap: var(--gvx-space-2) var(--gvx-space-3);
	margin: 0;
	padding: var(--gvx-space-4);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-md);
}

.gvx-cart-item__media {
	grid-area: media;
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--gvx-surface-dim);
	border-radius: var(--gvx-radius-sm);
}

.gvx-cart-item__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.gvx-cart-item__content {
	grid-area: content;
	min-width: 0;
}

/* Two-line clamp with the height locked to exactly two lines, so an
   external heading rule cannot make the box and the clamp disagree.
   This replaces the ~1000px-wide overflow of the stock cart. */
.gvx-cart-item__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	height: calc(2 * var(--gvx-leading-snug) * 1em);
	max-height: calc(2 * var(--gvx-leading-snug) * 1em);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	line-height: var(--gvx-leading-snug);
	overflow-wrap: break-word;
}

.gvx-cart-item__title a {
	color: var(--gvx-ink);
	text-decoration: none;
}

.gvx-cart-item__title a:hover,
.gvx-cart-item__title a:focus-visible {
	color: var(--gvx-teal-dark);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.gvx-cart-item__price { grid-area: price; }
.gvx-cart-item__quantity { grid-area: qty; }
.gvx-cart-item__subtotal { grid-area: sub; }
.gvx-cart-item__remove { grid-area: remove; }

.gvx-cart-item__price,
.gvx-cart-item__quantity,
.gvx-cart-item__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gvx-space-2);
	min-width: 0;
}

.gvx-cart-item__label {
	font-size: var(--gvx-text-sm);
	color: var(--gvx-ink-muted);
}

.gvx-cart-item__value {
	font-size: var(--gvx-text-sm);
	color: var(--gvx-ink-soft);
}

.gvx-cart-item__subtotal {
	padding-top: var(--gvx-space-2);
	border-top: 1px solid var(--gvx-border);
}

.gvx-cart-item__subtotal .gvx-cart-item__label {
	font-weight: 600;
	color: var(--gvx-ink);
}

.gvx-cart-item__subtotal .gvx-cart-item__value {
	font-size: var(--gvx-text-md);
	font-weight: 700;
	color: var(--gvx-ink);
}

/* Quantity — WooCommerce's own input, sized for touch. */
/* Never let the flex row shrink the quantity box. */
.gvx-cart-item__quantity .quantity {
	flex: 0 0 auto;
	margin: 0;
}

/*
 * The quantity box is sized here at (0,4,1).
 *
 * WooCommerce ships `.woocommerce .quantity .qty { width: 3.631em }` at
 * (0,3,0), which outranked the plain `.gvx-cart-item__quantity input.qty`
 * selector at (0,2,1) and rendered the control 65px wide / 40px tall
 * instead of the 72x44 touch target this layout asks for. Prefixing the
 * WooCommerce body class raises this rule above the stock one, so the
 * size holds without !important and without editing WooCommerce CSS.
 */
.woocommerce .gvx-cart-item__quantity .quantity input.qty,
.woocommerce-page .gvx-cart-item__quantity .quantity input.qty {
	width: 72px;
	min-height: 44px;
	padding: var(--gvx-space-1) var(--gvx-space-2);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-base);
	text-align: center;
}

.gvx-cart-item__quantity input.qty:focus-visible {
	outline: 2px solid var(--gvx-teal);
	outline-offset: 2px;
	border-color: var(--gvx-teal);
}

/* Remove — WooCommerce's nonced link, presented as a real control with a
   comfortable target. The stock cart's was 20x20. */
.gvx-cart-item__remove {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.gvx-cart-item__remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--gvx-space-2);
	border: 1px solid transparent;
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink-muted);
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
}

.gvx-cart-item__remove a.remove:hover,
.gvx-cart-item__remove a.remove:focus-visible {
	background-color: var(--gvx-teal-tint);
	border-color: var(--gvx-teal);
	color: var(--gvx-teal-dark);
}

/* ==================================================================
 * 6. Cart item — desktop row (>=992px)
 * ================================================================== */

/*
 * The six-column row needs room the 992-1199 range does not have: with a
 * 320px summary the items column measures roughly 570px, which crushed
 * the title column to ~112px. Measured, so the row starts at 1200px and
 * the card carries every narrower width. The page still becomes
 * two-column at 992px as designed.
 *
 * There is deliberately no separate header row: it lived in its own grid
 * and could not stay aligned with the item grid, and wpautop (which runs
 * over this template's output inside the Elementor text widget) injects
 * <br> between inline siblings, which pushed its captions onto a second
 * row. Each value carries its own caption instead, which is robust at
 * every width. For the same reason every label/value wrapper in the
 * template is a <div>, not a <span>: div is on wpautop's block list.
 */
@media (min-width: 1200px) {
	.gvx-cart-item {
		grid-template-columns: 88px minmax(0, 1fr) 88px 84px 100px 48px;
		grid-template-areas: "media content price qty sub remove";
		align-items: center;
		gap: var(--gvx-space-3);
	}

	.gvx-cart-item__media {
		width: 88px;
		height: 88px;
	}

	.gvx-cart-item__price,
	.gvx-cart-item__quantity,
	.gvx-cart-item__subtotal {
		display: block;
		padding-top: 0;
		border-top: 0;
	}

	.gvx-cart-item__label {
		display: block;
		margin-bottom: 2px;
		font-size: var(--gvx-text-xs);
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--gvx-ink-muted);
	}

	/* Same (0,4,1) lift as the base rule; the compact row only narrows
	   the box, the 44px height is kept at every width. */
	.woocommerce .gvx-cart-item__quantity .quantity input.qty,
	.woocommerce-page .gvx-cart-item__quantity .quantity input.qty {
		width: 100%;
		max-width: 84px;
	}
}

/* ==================================================================
 * 7. Actions — coupon + Update Cart
 * ================================================================== */

.gvx-cart-actions {
	display: flex;
	flex-direction: column;
	gap: var(--gvx-space-4);
	margin-top: var(--gvx-space-4);
	padding: var(--gvx-space-4);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-md);
}

.gvx-cart-coupon__title {
	margin: 0 0 var(--gvx-space-2);
	font-size: var(--gvx-text-sm);
	font-weight: 700;
	color: var(--gvx-ink);
}

/* Stacked on mobile — this is what fixes the stock coupon row measuring
   ~1100px inside a 330px viewport. */
.gvx-cart-coupon__row {
	display: flex;
	flex-direction: column;
	gap: var(--gvx-space-2);
}

.gvx-cart-coupon__input {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: var(--gvx-space-2) var(--gvx-space-3);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-sm);
}

.gvx-cart-coupon__input:focus-visible {
	outline: 2px solid var(--gvx-teal);
	outline-offset: 2px;
	border-color: var(--gvx-teal);
}

/* Coupon apply is the quietest of the three actions. */
.gvx-cart-coupon__apply {
	min-height: 44px;
	padding: 0 var(--gvx-space-4);
	background-color: transparent;
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink-soft);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	cursor: pointer;
}

.gvx-cart-coupon__apply:hover,
.gvx-cart-coupon__apply:focus-visible {
	border-color: var(--gvx-teal);
	color: var(--gvx-teal-dark);
}

.gvx-cart-actions__update {
	display: flex;
	flex-direction: column;
	gap: var(--gvx-space-2);
	padding-top: var(--gvx-space-4);
	border-top: 1px solid var(--gvx-border);
}

.gvx-cart-actions__hint {
	margin: 0;
	font-size: var(--gvx-text-xs);
	color: var(--gvx-ink-muted);
}

/* Update Cart is secondary: teal outline, never the gold/teal fill used
   by the primary checkout CTA. */
.gvx-cart-actions__button {
	min-height: 44px;
	padding: 0 var(--gvx-space-5);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-teal);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-teal);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	cursor: pointer;
}

.gvx-cart-actions__button:hover:not(:disabled),
.gvx-cart-actions__button:focus-visible {
	background-color: var(--gvx-teal-tint);
	color: var(--gvx-teal-dark);
}

.gvx-cart-actions__button:disabled {
	opacity: 0.55;
	cursor: default;
}

/*
 * Update Cart must be visible.
 *
 * A published WPCode snippet sets
 *   body.woocommerce-cart button[name="update_cart"]{display:none!important}
 * and its inline <style> loads AFTER this stylesheet, so a rule of equal
 * specificity would lose on source order. This selector is deliberately
 * more specific (0,4,2 vs 0,2,2), which wins regardless of order — so
 * the defect is fixed without mutating production configuration.
 */
body.woocommerce-cart .gvx-cart .gvx-cart-actions__update button[name="update_cart"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
}

/*
 * The coupon + Update Cart row goes horizontal at 1200px, not 992px.
 *
 * Between 992 and 1199 the page is already two-column, so the main
 * column is only 570-729px wide. Sharing that with the update block
 * squeezed the coupon field to 148px at 992 and 180px at 1024 — too
 * narrow to read a code in. Below 1200 the two blocks stack instead,
 * which gives the coupon the full column width.
 */
@media (min-width: 1200px) {
	.gvx-cart-actions {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--gvx-space-5);
	}

	/* Basis + floor, so the coupon can never be squeezed back down:
	   the update block gives way first. */
	.gvx-cart-coupon {
		flex: 1 1 320px;
		min-width: 260px;
		max-width: 420px;
	}

	.gvx-cart-coupon__row {
		flex-direction: row;
	}

	.gvx-cart-coupon__input {
		flex: 1 1 auto;
	}

	.gvx-cart-coupon__apply {
		flex: 0 0 auto;
	}

	.gvx-cart-actions__update {
		flex: 0 1 auto;
		align-items: flex-end;
		padding-top: 0;
		border-top: 0;
		text-align: right;
	}
}

/*
 * wpautop artifact line breaks.
 *
 * The cart shortcode’s rendered output passes through wpautop, which
 * turns the newlines in WooCommerce’s own templates into <br> elements.
 * All twelve in this region sit between a label and its control, or
 * lead/trail a flex item — none is authored content, and each adds a
 * phantom line box: the quantity cell measured 70px instead of 44px,
 * and “Proceed to checkout” rendered two lines tall (63px instead of
 * 50px). The cart region is entirely WooCommerce-generated markup, so
 * there is no editorial line break here to preserve.
 *
 * Scoped to the specific containers rather than blanketing .gvx-cart,
 * so a formatted address (which uses <br> meaningfully) is untouched.
 */
.gvx-cart .quantity > br,
.gvx-cart-coupon__row > br,
.gvx-cart .shipping-calculator-form br,
.gvx-cart .wc-proceed-to-checkout a.checkout-button > br {
	display: none;
}

/*
 * ...and the empty paragraphs from the same source.
 *
 * wpautop also wraps the leftover newlines in <p></p>, which left 17
 * genuinely empty paragraphs in this region. Three of them mattered:
 * one landed as a third flex child in each of the Price, Quantity and
 * Subtotal rows, so justify-content: space-between distributed three
 * items instead of two and parked every value in the middle of the
 * card instead of against the right edge.
 *
 * :empty matches only elements with no child nodes at all, so this
 * cannot hide a paragraph that carries any content.
 */
.gvx-cart p:empty {
	display: none;
}

/* ==================================================================
 * 8. Order summary
 * Native woocommerce_cart_totals output, restyled only. No amount is
 * produced or altered here.
 * ================================================================== */

.gvx-cart-summary {
	padding: var(--gvx-space-5);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-md);
}

.gvx-cart-summary__title {
	margin: 0 0 var(--gvx-space-4);
	font-size: var(--gvx-text-lg);
	font-weight: 700;
	color: var(--gvx-ink);
}

/* The stock totals block prints its own "Cart totals" heading; the
   summary heading above replaces it, so the duplicate is removed. */
.gvx-cart-summary .cart_totals > h2 {
	display: none;
}

/*
 * Release WooCommerce's classic two-column cart float.
 *
 * woocommerce-layout-grid.min.css ships
 *   .woocommerce .cart-collaterals .cart_totals{float:right;width:48%}
 * at specificity (0,3,0). Inside this grid column that shrink-wraps the
 * summary to ~146px and wraps the checkout label onto five lines, so the
 * selectors below deliberately carry (0,4,0) to outrank it. Verified
 * against the live stylesheet rather than assumed: a (0,2,0) rule loses.
 * Scoped to the cart summary — WooCommerce is never restyled globally.
 */
.woocommerce .gvx-cart-summary .cart-collaterals .cart_totals,
.woocommerce-page .gvx-cart-summary .cart-collaterals .cart_totals,
.woocommerce .gvx-cart-summary .cart-collaterals,
.woocommerce .gvx-cart-summary .wc-proceed-to-checkout,
.woocommerce .gvx-cart-summary .wc-proceed-to-checkout p {
	float: none;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* woocommerce-grid.min.css pins the totals label column to 40%; let the
   two columns share the narrow summary naturally instead. */
.woocommerce .gvx-cart-summary .cart-collaterals .cart_totals table th,
.woocommerce-cart .gvx-cart-summary .cart-collaterals .cart_totals table th {
	width: auto;
}

.gvx-cart-summary .shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--gvx-text-sm);
}

.gvx-cart-summary .shop_table th,
.gvx-cart-summary .shop_table td {
	padding: var(--gvx-space-2) 0;
	border: 0;
	vertical-align: top;
	text-align: left;
}

.gvx-cart-summary .shop_table th {
	font-weight: 500;
	color: var(--gvx-ink-muted);
}

.gvx-cart-summary .shop_table td {
	text-align: right;
	color: var(--gvx-ink);
}

.gvx-cart-summary .order-total th,
.gvx-cart-summary .order-total td {
	padding-top: var(--gvx-space-3);
	border-top: 1px solid var(--gvx-border);
	font-size: var(--gvx-text-md);
	font-weight: 700;
	color: var(--gvx-ink);
}

/* Shipping rows: destination text and the calculator must stay usable
   and must never overflow. Shiprocket still owns the rates. */
.gvx-cart-summary .woocommerce-shipping-destination,
.gvx-cart-summary .shipping-calculator-button {
	display: block;
	font-size: var(--gvx-text-xs);
	color: var(--gvx-ink-muted);
}

.gvx-cart-summary .shipping-calculator-button {
	color: var(--gvx-teal);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.gvx-cart-summary .shipping-calculator-form {
	display: block;
	margin-top: var(--gvx-space-3);
}

.gvx-cart-summary .shipping-calculator-form p {
	margin: 0 0 var(--gvx-space-2);
}

/*
 * Size the calculator controls to the column, but leave the native
 * <select> alone once Select2 has taken it over.
 *
 * Select2 hides the real control with
 *   .select2-hidden-accessible { position:absolute; width:1px!important }
 * at (0,1,0). An unqualified `select` here is (0,2,1) and beat it, so the
 * clipped select was stretched to width:100% -- and because it is
 * absolutely positioned, that 100% resolved against the nearest
 * positioned ancestor (the 330px Elementor container) rather than its
 * 208px form. The result was a 330px invisible box hanging 34px past the
 * viewport, which is what made the page scroll sideways whenever the
 * calculator was opened. Excluding the hidden select keeps Select2's own
 * hiding intact; the visible .select2-container is still sized here.
 */
.gvx-cart-summary .shipping-calculator-form input,
.gvx-cart-summary .shipping-calculator-form select:not(.select2-hidden-accessible),
.gvx-cart-summary .shipping-calculator-form .select2-container {
	width: 100% !important;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.gvx-cart-summary #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gvx-cart-summary #shipping_method li {
	margin: 0;
}

/* Primary CTA — normal commerce height, replacing the stock ~111px. */
.gvx-cart-summary .wc-proceed-to-checkout {
	margin: var(--gvx-space-4) 0 0;
	padding: 0;
}

.gvx-cart-summary .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: var(--gvx-space-2) var(--gvx-space-4);
	background-color: var(--gvx-teal);
	border: 1px solid var(--gvx-teal);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink-on-dark);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-base);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.gvx-cart-summary .wc-proceed-to-checkout a.checkout-button:hover,
.gvx-cart-summary .wc-proceed-to-checkout a.checkout-button:focus-visible {
	background-color: var(--gvx-teal-dark);
	border-color: var(--gvx-teal-dark);
	color: var(--gvx-ink-on-dark);
}

.gvx-cart-summary .wc-proceed-to-checkout a.checkout-button:focus-visible {
	outline: 2px solid var(--gvx-teal);
	outline-offset: 2px;
}

/* ==================================================================
 * 9. Empty cart
 * ================================================================== */

body.gvx-cart-page .cart-empty {
	margin: 0 0 var(--gvx-space-4);
	padding: var(--gvx-space-5);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-md);
	font-size: var(--gvx-text-base);
	color: var(--gvx-ink-soft);
}

/*
 * Drop WooCommerce's notice icon on the empty cart.
 *
 * WooCommerce marks this message .woocommerce-info and hangs an icon on
 * ::before at position:absolute, relying on its own large left padding
 * to leave a gutter for it. The card above uses even padding on all four
 * sides, so that icon landed on top of the message text. This panel is
 * presented as a plain card rather than a notice, so the icon goes.
 */
body.gvx-cart-page .cart-empty::before {
	content: none;
}

body.gvx-cart-page .return-to-shop {
	margin: 0;
}

body.gvx-cart-page .return-to-shop a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--gvx-space-5);
	background-color: var(--gvx-teal);
	border: 1px solid var(--gvx-teal);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink-on-dark);
	font-size: var(--gvx-text-base);
	font-weight: 700;
	text-decoration: none;
}

body.gvx-cart-page .return-to-shop a.button:hover,
body.gvx-cart-page .return-to-shop a.button:focus-visible {
	background-color: var(--gvx-teal-dark);
	border-color: var(--gvx-teal-dark);
	color: var(--gvx-ink-on-dark);
}

/* ==================================================================
 * 10. Bottom clearance
 * The shared fixed bottom navigation must never cover a cart control.
 * ================================================================== */

@media (max-width: 991px) {
	body.gvx-cart-page.gvx-has-bottom-nav .gvx-cart {
		padding-bottom: var(--gvx-space-7);
	}
}

/* ==================================================================
 * 10. Grovidex integration hardening (Phase 14D)
 *
 * Presentation only. Every rule below restyles markup WooCommerce has
 * already rendered; nothing here computes a subtotal, a shipping rate,
 * a discount or a total, and no cart contract is touched.
 * ================================================================== */

/*
 * 10.1 Heading scale.
 *
 * A theme/Elementor content rule sets
 *   .entry-content h2 { font-size: 36px; margin: 60px 0 24px }
 *   .entry-content h3 { font-size: 28px; margin: 42px 0 20px }
 * at (0,1,1), which outranked the single-class heading rules earlier in
 * this file at (0,1,0). "Your Books", "Order Summary" and "Have a
 * coupon?" all rendered at article scale with a 60px gap above them,
 * which is where the page's excess whitespace came from. Prefixing
 * .gvx-cart lifts these to (0,2,0) without depending on Astra's wrapper
 * class staying put.
 */
.gvx-cart .gvx-cart-items__title,
.gvx-cart .gvx-cart-summary__title {
	margin: 0 0 var(--gvx-space-3);
	font-size: var(--gvx-text-lg);
	line-height: var(--gvx-leading-snug);
	font-weight: 700;
	color: var(--gvx-ink);
}

.gvx-cart .gvx-cart-coupon__title {
	margin: 0 0 var(--gvx-space-2);
	font-size: var(--gvx-text-sm);
	line-height: var(--gvx-leading-snug);
	font-weight: 700;
	color: var(--gvx-ink);
}

/*
 * 10.2 One summary card, not a card inside a card.
 *
 * woocommerce-grid.min.css also ships
 *   .woocommerce-cart .cart-collaterals .cart_totals {
 *       border-width: 1px; padding: 0 20px; margin-bottom: 2em }
 * at (0,3,0). That drew a second bordered box inside the summary card and
 * inset its contents by 20px a side, which is why the checkout CTA
 * measured 262px inside a 306px card instead of filling it. (0,4,0)
 * clears it; the surrounding .gvx-cart-summary card supplies the border.
 */
.woocommerce .gvx-cart-summary .cart-collaterals .cart_totals,
.woocommerce-page .gvx-cart-summary .cart-collaterals .cart_totals,
.woocommerce-cart .gvx-cart-summary .cart-collaterals .cart_totals {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/*
 * 10.3 Totals rows.
 *
 * WooCommerce's own cell padding (0.7em 1em) is declared at (0,4,1) and
 * beat the (0,2,1) rules in section 8, so the rows kept a 15.75px side
 * inset inside an already-padded card. These carry (0,5,1).
 *
 * The label column is given a fixed share so a long shipping destination
 * has room to wrap in the value column rather than laddering one word per
 * line. Rows come from WooCommerce: coupon, fee and tax rows appear here
 * automatically and inherit this styling without any change.
 */
.woocommerce .gvx-cart-summary .cart-collaterals .cart_totals table th,
.woocommerce .gvx-cart-summary .cart-collaterals .cart_totals table td,
.woocommerce-cart .gvx-cart-summary .cart-collaterals .cart_totals table th,
.woocommerce-cart .gvx-cart-summary .cart-collaterals .cart_totals table td {
	padding: var(--gvx-space-3) 0;
	border: 0;
	vertical-align: top;
}

.woocommerce .gvx-cart-summary .cart-collaterals .cart_totals table th,
.woocommerce-cart .gvx-cart-summary .cart-collaterals .cart_totals table th {
	width: 38%;
	text-align: left;
}

/* Hairline between consecutive rows, whatever rows WooCommerce renders. */
.gvx-cart-summary .cart_totals tr + tr > th,
.gvx-cart-summary .cart_totals tr + tr > td {
	border-top: 1px solid var(--gvx-border);
}

/*
 * 10.4 Total is the strongest row, without shouting.
 * Stronger label, heavier rule above it, a step up in size -- no colour
 * coding, which is reserved for genuine states rather than ordinary
 * arithmetic.
 */
.woocommerce .gvx-cart-summary .cart-collaterals .cart_totals table tr.order-total th,
.woocommerce .gvx-cart-summary .cart-collaterals .cart_totals table tr.order-total td,
.woocommerce-cart .gvx-cart-summary .cart-collaterals .cart_totals table tr.order-total th,
.woocommerce-cart .gvx-cart-summary .cart-collaterals .cart_totals table tr.order-total td {
	padding-top: var(--gvx-space-4);
	border-top: 1px solid var(--gvx-ink-muted);
	font-size: var(--gvx-text-md);
	font-weight: 700;
	color: var(--gvx-ink);
}

/*
 * 10.5 Shipping row.
 *
 * Shiprocket and WooCommerce keep the rate and the destination; this only
 * decides how they read. The amount stays on the value line, the
 * destination sits under it as supporting text, and both wrap.
 */
.gvx-cart-summary #shipping_method li {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--gvx-space-2);
}

.gvx-cart-summary .woocommerce-shipping-destination {
	margin: var(--gvx-space-2) 0 0;
	font-size: var(--gvx-text-xs);
	line-height: var(--gvx-leading-snug);
	color: var(--gvx-ink-muted);
	overflow-wrap: break-word;
}

.gvx-cart-summary .woocommerce-shipping-destination strong {
	font-weight: 600;
	color: var(--gvx-ink-soft);
}

/*
 * 10.6 Change address is a real control.
 * WooCommerce's native toggle is untouched -- this only gives the link a
 * comfortable target and a visible focus ring; it measured 100x24 before.
 */
.gvx-cart-summary .shipping-calculator-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gvx-teal);
	font-size: var(--gvx-text-xs);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.gvx-cart-summary .shipping-calculator-button:hover,
.gvx-cart-summary .shipping-calculator-button:focus-visible {
	color: var(--gvx-teal-dark);
}

.gvx-cart-summary .shipping-calculator-button:focus-visible {
	outline: 2px solid var(--gvx-teal);
	outline-offset: 2px;
	border-radius: var(--gvx-radius-sm);
}

/*
 * 10.7 Secondary controls must beat Astra's global button fill.
 *
 * Astra's inline theme CSS paints every button with
 *   background-color: var(--ast-global-color-0)  (#046bd2)  color: #fff
 * and its selector group matches .button at (0,1,0), tying with the
 * single-class rules in sections 7 and 8 and winning on source order.
 * Apply coupon, Update Cart and the calculator's Update all rendered as
 * solid blue, competing with the teal checkout CTA and inverting the
 * intended hierarchy. These selectors carry (0,3,0)/(0,3,1).
 *
 * Hierarchy: Proceed to checkout (teal fill) > Update Cart (teal
 * outline) > Apply coupon and calculator Update (quiet outline).
 */
.gvx-cart .gvx-cart-coupon .gvx-cart-coupon__apply,
.gvx-cart-summary .shipping-calculator-form button.button {
	min-height: 44px;
	padding: 0 var(--gvx-space-4);
	background-color: var(--gvx-surface);
	background-image: none;
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink-soft);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-shadow: none;
	cursor: pointer;
}

.gvx-cart .gvx-cart-coupon .gvx-cart-coupon__apply:hover,
.gvx-cart .gvx-cart-coupon .gvx-cart-coupon__apply:focus-visible,
.gvx-cart-summary .shipping-calculator-form button.button:hover,
.gvx-cart-summary .shipping-calculator-form button.button:focus-visible {
	background-color: var(--gvx-teal-tint);
	border-color: var(--gvx-teal);
	color: var(--gvx-teal-dark);
}

.gvx-cart .gvx-cart-actions__update button.gvx-cart-actions__button {
	min-height: 44px;
	padding: 0 var(--gvx-space-5);
	background-color: var(--gvx-surface);
	background-image: none;
	border: 1px solid var(--gvx-teal);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-teal);
	font-family: var(--gvx-font-sans);
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-shadow: none;
	cursor: pointer;
}

.gvx-cart .gvx-cart-actions__update button.gvx-cart-actions__button:hover:not(:disabled),
.gvx-cart .gvx-cart-actions__update button.gvx-cart-actions__button:focus-visible {
	background-color: var(--gvx-teal-tint);
	color: var(--gvx-teal-dark);
}

/*
 * WooCommerce disables Update Cart until a quantity actually changes.
 * The disabled state has to read as "not yet", not as "broken": muted
 * rather than faded to the point of illegibility.
 */
.gvx-cart .gvx-cart-actions__update button.gvx-cart-actions__button:disabled {
	background-color: var(--gvx-bg);
	border-color: var(--gvx-border);
	color: var(--gvx-ink-muted);
	opacity: 1;
	cursor: default;
}

/*
 * 10.8 Cart actions area.
 * Coupon and Update Cart share one panel beneath the items. Top-aligned
 * so the two blocks start on the same line, and the hint is capped so it
 * cannot stretch into a single wide row.
 */
@media (min-width: 1200px) {
	.gvx-cart-actions {
		align-items: flex-start;
	}

	.gvx-cart-actions__hint {
		max-width: 26ch;
	}
}

/*
 * 10.9 Mobile summary clearance.
 * The bottom nav is fixed, so the last card needs room to clear it.
 */
@media (max-width: 991px) {
	.gvx-cart-summary-col {
		margin-bottom: var(--gvx-space-4);
	}
}
/*
 * 10.10 Stacked totals rows below 768px.
 *
 * woocommerce-smallscreen-grid.min.css takes the totals table apart at
 * max-width:768px: the table and rows become blocks, tbody th is hidden
 * outright, and the label is rebuilt as td::before from data-title with
 * float:left and font-weight:700.
 *
 * That transformation is kept rather than reverted, because the shipping
 * calculator lives inside the shipping row's cell and genuinely needs the
 * full card width on a phone -- forcing the two-column table back would
 * squeeze its country/state/city/postcode fields into roughly 150px.
 *
 * What is corrected is the fallout: the cell did not fill the card, and
 * the section 10.3/10.4 separators were hung on the now-hidden th, so the
 * rule above Total rendered as a short stub instead of spanning the row.
 * Woo's own selectors here are (0,2,3); these carry (0,4,3).
 */
@media (max-width: 768px) {
	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive {
		width: 100%;
	}

	/* Woo turns the rows into blocks but leaves tbody as a
	   table-row-group, so an anonymous table box shrink-wrapped the rows
	   to 178px inside a 249px card. Making tbody a block lets the rows
	   fill the width. */
	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive tbody,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive tbody {
		display: block;
		width: 100%;
	}

	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive tr,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive tr {
		width: 100%;
	}

	/*
	 * Put the label and amount on one line.
	 *
	 * Woo floats the td::before label left and right-aligns the cell, but
	 * that alignment does not survive here, so Subtotal and Total printed
	 * their amounts hard against the label while Shipment sat right (its
	 * amount is right-aligned by the #shipping_method rule in 10.5). Making
	 * the cell a flex row aligns every row the same way and does not depend
	 * on which element type a given row happens to contain.
	 */
	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive tr td,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive tr td {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		column-gap: var(--gvx-space-3);
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive tr td::before,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive tr td::before {
		float: none;
		flex: 0 1 auto;
		text-align: left;
	}

	/* The rate keeps the label's line; destination and the calculator take
	   their own full-width lines beneath it. */
	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive tr td > ul,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive tr td > ul {
		flex: 1 1 auto;
		min-width: 0;
	}

	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive tr td > p,
	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive tr td > form,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive tr td > p,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive tr td > form {
		flex: 1 1 100%;
		text-align: left;
	}

	/* Separator follows the cell, which is the element still rendering. */
	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive tr + tr td,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive tr + tr td {
		border-top: 1px solid var(--gvx-border);
	}

	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive tr.order-total td,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive tr.order-total td {
		border-top: 1px solid var(--gvx-ink-muted);
	}

	/* Match the label typography the table rows use at wider widths:
	   quiet for ordinary rows, strong for Total. */
	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive tr td::before,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive tr td::before {
		font-weight: 500;
		color: var(--gvx-ink-muted);
	}

	.woocommerce .gvx-cart-summary .cart_totals table.shop_table_responsive tr.order-total td::before,
	.woocommerce-page .gvx-cart-summary .cart_totals table.shop_table_responsive tr.order-total td::before {
		font-weight: 700;
		color: var(--gvx-ink);
	}
}
/*
 * 10.11 Paragraph margins in the actions panel.
 *
 * Two separate sources of dead space at the bottom of the coupon/Update
 * Cart panel:
 *
 * - The same .entry-content rule that inflated the headings also gives
 *   every <p> a bottom margin at (0,1,1), which beat the (0,1,0) rule on
 *   .gvx-cart-actions__hint. The panel is a flex column with its own gap,
 *   so those margins are pure surplus.
 * - wpautop wrapped the cart nonce field in a paragraph of its own. It
 *   renders nothing (the input is hidden) but still took a flex slot plus
 *   a bottom margin, adding roughly 36px of blank space below Update Cart.
 *   display:contents drops the box while leaving the hidden input exactly
 *   where it is in the form -- it is still submitted, since only disabled
 *   controls are left out of serialisation.
 */
.gvx-cart .gvx-cart-actions > p,
.gvx-cart .gvx-cart-actions__update > p {
	margin: 0;
}

.gvx-cart .gvx-cart-actions > p {
	display: contents;
}