/* ============================================================================
   cart.css — /cart/ page (WooCommerce shortcode [woocommerce_cart]).

   Brand-styles the default Woo cart markup: table, totals, buttons, notices.
   Scoped to body.woocommerce-cart so we never bleed into checkout, my-account,
   or product pages — those have their own stylesheets.

   The bare "Cart" H1 is suppressed in PHP (inc/content-pages.php via
   astra_the_title_enabled) so there is no display:none here — the title
   markup never renders.

   The coupon field is hidden globally via the woocommerce_coupons_enabled
   filter in inc/woocommerce.php — no CSS needed.
   ============================================================================ */

/* --- Page frame -------------------------------------------------------------
   Push the cart content down from the header and give it breathing room. */

.woocommerce-cart .ast-container,
.woocommerce-cart #primary {
	padding-top: 32px;
	padding-bottom: 64px;
}

/* Wrap the woocommerce shortcode output in a max-width container so the
   table + collaterals don't sprawl on wide screens.

   On desktop (>=900px) it also becomes a 2-col grid: cart-form left,
   cart-collaterals (totals) right. The default WC markup makes the form and
   the collaterals SIBLINGS inside this .woocommerce wrapper -- so the grid
   has to live here, not on .cart-collaterals (which only contains the totals
   itself). Notices / empty-cart messages span both columns. */
.woocommerce-cart .woocommerce {
	max-width: var(--dtr-container);
	margin: 0 auto;
	padding: 0 var(--dtr-gutter);
}

@media (min-width: 900px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		/* Items column = 1fr (fills remaining space); totals column = 380px
		   (fixed, wide enough for the longest single-line totals row).
		   With a 24px column-gap and the 1232px container that yields:
		     items ~828px (~67%) | gap 24px (~2%) | totals 380px (~31%)
		   At the 900px breakpoint:
		     items ~448px (~53%) | gap 24px (~3%) | totals 380px (~45%)
		   Both columns are top-aligned via align-items:start and explicitly
		   set to width:100% of their cells (see .woocommerce-cart-form /
		   .cart-collaterals rules below) so neither shrinks to content or
		   falls back to Woo's default 65%/30% float widths. */
		grid-template-columns: minmax(0, 1fr) 380px;
		column-gap: 24px;
		row-gap: 24px;
		align-items: start;
	}
	/* Anything that should span both columns (notices, empty-cart paragraph,
	   the "Return to shop" link, and the WC checkout-button bottom margin). */
	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
	.woocommerce-cart .woocommerce > .woocommerce-message,
	.woocommerce-cart .woocommerce > .woocommerce-info,
	.woocommerce-cart .woocommerce > .woocommerce-error,
	.woocommerce-cart .woocommerce > .cart-empty,
	.woocommerce-cart .woocommerce > .return-to-shop {
		grid-column: 1 / -1;
	}
	.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
		grid-column: 1;
		min-width: 0; /* allow the table to shrink instead of overflowing the col */
	}
	.woocommerce-cart .woocommerce > .cart-collaterals {
		grid-column: 2;
		width: 100%; /* override Woo's default float-right 48% width */
	}
}

/* --- Notices (added to basket / errors / info) ------------------------------ */

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
	background: var(--dtr-cream);
	border: 1px solid var(--dtr-beige);
	border-left: 4px solid var(--dtr-gold);
	border-radius: var(--dtr-radius-md);
	color: var(--dtr-primary-dark);
	padding: 14px 18px;
	margin: 0 0 24px;
	font-family: var(--dtr-font-body);
	font-size: 0.95rem;
	box-shadow: var(--dtr-shadow-sm);
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.woocommerce-cart .woocommerce-error {
	border-left-color: var(--dtr-red);
	background: #FDF1EF;
	border-color: rgba(217, 76, 58, 0.3);
	color: #6b1e15;
}

.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before {
	display: none; /* Woo's default green checkmark — replaced by border accent. */
}

.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-info .button {
	margin-left: auto;
}

/* --- Cart table ------------------------------------------------------------- */

/* Override Woo's default .woocommerce-cart-form { width: 65%; float: left }
   so the form fills its grid column (1fr) instead of sitting at 65% of it.
   Without this, the table only takes ~65% of the items column, leaving the
   remaining ~35% as visible empty space between the table and the totals
   column -- on top of the grid's column-gap. margin-bottom is kept for the
   <900px stacked flow where the form and collaterals are document siblings. */
.woocommerce-cart .woocommerce-cart-form {
	width: 100%;
	float: none;
	margin-bottom: 32px;
}

.woocommerce-cart table.shop_table.cart {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--dtr-white);
	border: 1px solid var(--dtr-beige);
	border-radius: var(--dtr-radius-lg);
	overflow: hidden;
	box-shadow: var(--dtr-shadow-sm);
	margin: 0;
}

.woocommerce-cart table.shop_table.cart thead th {
	background: var(--dtr-primary);
	color: var(--dtr-white);
	font-family: var(--dtr-font-heading);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 16px;
	border: 0;
}

.woocommerce-cart table.shop_table.cart tbody td {
	padding: 18px 16px;
	border: 0;
	border-bottom: 1px solid var(--dtr-grey-100);
	vertical-align: middle;
	font-family: var(--dtr-font-body);
	color: var(--dtr-grey-900);
	background: var(--dtr-white);
}

.woocommerce-cart table.shop_table.cart tbody tr:last-child td {
	border-bottom: 0;
}

/* Thumbnail column. */
.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--dtr-radius-md);
	border: 1px solid var(--dtr-grey-100);
}

/* Product-name column (carries reservation badge + cart-item-data). */
.woocommerce-cart table.shop_table.cart td.product-name a {
	font-family: var(--dtr-font-heading);
	font-weight: 700;
	color: var(--dtr-primary);
	font-size: 1rem;
	text-decoration: none;
}
.woocommerce-cart table.shop_table.cart td.product-name a:hover,
.woocommerce-cart table.shop_table.cart td.product-name a:focus-visible {
	color: var(--dtr-teal-text);
	text-decoration: underline;
}

/* Skill-answer + other cart-item-data list ("Skill answer: SUV"). */
.woocommerce-cart table.shop_table.cart td.product-name dl.variation {
	margin: 8px 0 0;
	padding: 8px 10px;
	background: var(--dtr-cream);
	border-radius: var(--dtr-radius-sm);
	border: 1px solid var(--dtr-beige);
	font-size: 0.85rem;
	color: var(--dtr-grey-600);
	display: inline-block;
}
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt {
	font-weight: 700;
	color: var(--dtr-primary);
	display: inline;
	margin: 0 4px 0 0;
}
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd {
	display: inline;
	margin: 0;
}
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd p {
	display: inline;
	margin: 0;
}

/* Price / Subtotal columns. */
.woocommerce-cart table.shop_table.cart td.product-price,
.woocommerce-cart table.shop_table.cart td.product-subtotal {
	font-family: var(--dtr-font-heading);
	font-weight: 700;
	color: var(--dtr-primary-dark);
	font-variant-numeric: tabular-nums;
}
.woocommerce-cart table.shop_table.cart td.product-subtotal {
	font-size: 1.05rem;
}

/* Quantity column — match the brand quantity-stepper aesthetic. */
.woocommerce-cart table.shop_table.cart td.product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--dtr-beige);
	border-radius: var(--dtr-radius-md);
	overflow: hidden;
	background: var(--dtr-cream);
}
.woocommerce-cart table.shop_table.cart td.product-quantity input.qty {
	width: 56px;
	height: 40px;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--dtr-font-heading);
	font-weight: 700;
	color: var(--dtr-primary);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.woocommerce-cart table.shop_table.cart td.product-quantity input.qty:focus-visible {
	outline: 2px solid var(--dtr-gold);
	outline-offset: -2px;
}
.woocommerce-cart table.shop_table.cart td.product-quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart table.shop_table.cart td.product-quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Remove (×) button. */
.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--dtr-grey-100);
	color: var(--dtr-grey-600);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background var(--dtr-transition), color var(--dtr-transition), transform var(--dtr-transition);
}
.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover,
.woocommerce-cart table.shop_table.cart td.product-remove a.remove:focus-visible {
	background: var(--dtr-red);
	color: var(--dtr-white);
	transform: scale(1.08);
	outline: none;
}

/* Reservation badge: lift into a block under the product name (it's already
   styled by main.css — here we just give it spacing inside the table). */
.woocommerce-cart table.shop_table.cart td.product-name .dtr-reservation {
	margin-top: 8px;
}

/* --- Cart actions row (Update cart + nonce) -------------------------------- */

.woocommerce-cart table.shop_table.cart td.actions {
	background: var(--dtr-cream);
	padding: 16px;
	text-align: right;
	border-top: 1px solid var(--dtr-beige);
}

/* --- Buttons: brand the WC default `.button` + variants -------------------- */

.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-info .button,
.woocommerce-cart table.shop_table.cart td.actions button.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .return-to-shop a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--dtr-font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	padding: 0.85rem 1.5rem;
	border-radius: var(--dtr-radius-md);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background var(--dtr-transition), color var(--dtr-transition), border-color var(--dtr-transition), transform var(--dtr-transition);
	text-decoration: none;
	line-height: 1;
	background: var(--dtr-gold);
	color: var(--dtr-primary);
	text-shadow: none;
	box-shadow: none;
}

.woocommerce-cart .woocommerce-message .button:hover,
.woocommerce-cart .woocommerce-info .button:hover,
.woocommerce-cart table.shop_table.cart td.actions button.button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .return-to-shop a.button:hover {
	background: var(--dtr-gold-dark);
	color: var(--dtr-primary);
	transform: translateY(-1px);
}

.woocommerce-cart .woocommerce-message .button:focus-visible,
.woocommerce-cart .woocommerce-info .button:focus-visible,
.woocommerce-cart table.shop_table.cart td.actions button.button:focus-visible,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible,
.woocommerce-cart .return-to-shop a.button:focus-visible {
	outline: 3px solid var(--dtr-primary);
	outline-offset: 2px;
}

/* Update cart can be disabled until quantity changes — keep it visible but
   show the muted state clearly. */
.woocommerce-cart table.shop_table.cart td.actions button.button[disabled],
.woocommerce-cart table.shop_table.cart td.actions button.button:disabled {
	background: var(--dtr-grey-100);
	color: var(--dtr-grey-600);
	cursor: not-allowed;
	opacity: 1;
	border-color: var(--dtr-grey-300);
}
.woocommerce-cart table.shop_table.cart td.actions button.button[disabled]:hover,
.woocommerce-cart table.shop_table.cart td.actions button.button:disabled:hover {
	background: var(--dtr-grey-100);
	color: var(--dtr-grey-600);
	transform: none;
}

/* Proceed to checkout: largest CTA on the page. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	padding: 1.05rem 1.5rem;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: var(--dtr-shadow-md);
}

/* --- Cart collaterals (totals + cross-sells) -------------------------------
   IMPORTANT: WooCommerce's own woocommerce-layout-grid.min.css and
   woocommerce-grid.min.css ship with a triple-class selector chain
       .woocommerce .cart-collaterals .cart_totals  (specificity 0,3,0)
   that floats .cart_totals right at width:48% and pads it 0 20px. Without
   matching or exceeding that specificity, our 2-class selectors lose the
   cascade, and the totals box collapses to ~182px floated right inside its
   380px grid cell -- which is exactly the visible "huge gap" the user saw.

   Fix: every .cart_totals rule below is prefixed with
       .woocommerce-cart .cart-collaterals .cart_totals  (also 0,3,0)
   plus a leading "body" type selector on the layout-critical rules
   (width/float/padding/h2) giving them (0,3,1) -- which beats WC outright
   regardless of stylesheet load order. */

.woocommerce-cart .cart-collaterals {
	width: 100%;
	float: none;
}

/* Hide cross-sells block — competitions site doesn't cross-sell. */
.woocommerce-cart .cart-collaterals .cross-sells {
	display: none;
}

/* --- Basket totals box ----------------------------------------------------- */

body.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--dtr-white);
	border: 1px solid var(--dtr-beige);
	border-radius: var(--dtr-radius-lg);
	padding: 24px;                       /* beats WC's padding:0 20px (0,3,0) */
	box-shadow: var(--dtr-shadow-md);
	position: relative;
	width: 100%;                         /* beats WC's width:48% (0,3,0) */
	float: none;                         /* beats WC's float:right (0,3,0) */
	box-sizing: border-box;
}
@media (min-width: 900px) {
	body.woocommerce-cart .cart-collaterals .cart_totals {
		position: sticky;
		top: 96px;
	}
}

body.woocommerce-cart .cart-collaterals .cart_totals h2 {
	font-family: var(--dtr-font-heading);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--dtr-primary);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--dtr-gold);
	white-space: nowrap;       /* never break "Basket totals" mid-word */
	overflow: hidden;          /* safety net at very small widths */
	text-overflow: ellipsis;
}

body.woocommerce-cart .cart-collaterals .cart_totals table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	border: 0;
	margin: 0;
}

body.woocommerce-cart .cart-collaterals .cart_totals table th,
body.woocommerce-cart .cart-collaterals .cart_totals table td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--dtr-grey-100);
	font-family: var(--dtr-font-body);
	font-size: 0.95rem;
	color: var(--dtr-grey-900);
	background: transparent;
	vertical-align: middle;
}

body.woocommerce-cart .cart-collaterals .cart_totals table th {
	font-weight: 600;
	color: var(--dtr-primary);
	text-align: left;
	white-space: nowrap; /* keep "Subtotal", "Shipping", "Total" on one line */
	width: 1%;           /* beats WC's width:40% on th (0,4,1) via our (0,4,2) */
}

body.woocommerce-cart .cart-collaterals .cart_totals table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
	padding-left: 12px;
	white-space: nowrap; /* keep "£19.90" / "Free" / "£0.00" intact on one line */
}

body.woocommerce-cart .cart-collaterals .cart_totals table tr.order-total th,
body.woocommerce-cart .cart-collaterals .cart_totals table tr.order-total td {
	border-bottom: 0;
	padding-top: 16px;
	font-family: var(--dtr-font-heading);
	font-weight: 800;
	color: var(--dtr-primary);
	font-size: 1.15rem;
}

body.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout {
	margin-top: 20px;
	padding: 0;
}

/* Shipping calculator inside totals (if enabled). */
body.woocommerce-cart .cart-collaterals .cart_totals .shipping-calculator-button {
	color: var(--dtr-teal-text);
	font-weight: 700;
	text-decoration: underline;
}

/* --- Empty cart ------------------------------------------------------------ */

.woocommerce-cart .cart-empty {
	background: var(--dtr-white);
	border: 1px solid var(--dtr-beige);
	border-radius: var(--dtr-radius-lg);
	padding: 32px;
	margin: 0 0 24px;
	font-family: var(--dtr-font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--dtr-primary);
	text-align: center;
	list-style: none;
}
.woocommerce-cart .return-to-shop {
	text-align: center;
	margin: 0;
}

/* --- Responsive: stack the table on small screens -------------------------- */

@media (max-width: 767px) {
	.woocommerce-cart table.shop_table.cart {
		display: block;
	}
	.woocommerce-cart table.shop_table.cart thead {
		display: none; /* hidden — each cell carries its own label via data-title */
	}
	.woocommerce-cart table.shop_table.cart tbody,
	.woocommerce-cart table.shop_table.cart tbody tr {
		display: block;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item {
		padding: 16px;
		border-bottom: 1px solid var(--dtr-grey-100);
		display: grid;
		grid-template-columns: 80px 1fr;
		gap: 12px 16px;
		align-items: center;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item:last-child {
		border-bottom: 0;
	}
	.woocommerce-cart table.shop_table.cart tbody td {
		padding: 0;
		border: 0;
	}
	.woocommerce-cart table.shop_table.cart tbody td.product-remove {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		order: -1;
	}
	.woocommerce-cart table.shop_table.cart tbody td.product-thumbnail {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
		width: 80px;
		height: 80px;
	}
	.woocommerce-cart table.shop_table.cart tbody td.product-name {
		grid-column: 2;
		grid-row: 2;
	}
	.woocommerce-cart table.shop_table.cart tbody td.product-price,
	.woocommerce-cart table.shop_table.cart tbody td.product-quantity,
	.woocommerce-cart table.shop_table.cart tbody td.product-subtotal {
		grid-column: 1 / -1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 0 0;
		border-top: 1px dashed var(--dtr-grey-100);
	}
	.woocommerce-cart table.shop_table.cart tbody td.product-price::before,
	.woocommerce-cart table.shop_table.cart tbody td.product-quantity::before,
	.woocommerce-cart table.shop_table.cart tbody td.product-subtotal::before {
		content: attr(data-title);
		font-family: var(--dtr-font-heading);
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--dtr-grey-600);
	}

	/* Actions row stacks full-width. */
	.woocommerce-cart table.shop_table.cart td.actions {
		display: block;
		grid-column: 1 / -1;
		text-align: center;
		padding: 16px;
	}
	.woocommerce-cart table.shop_table.cart td.actions button.button {
		width: 100%;
	}

	/* Proceed-to-checkout already full-width. */
	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
		font-size: 1rem;
	}

	/* Totals: not sticky on mobile. */
	body.woocommerce-cart .cart-collaterals .cart_totals {
		position: static;
		padding: 20px;
	}
}