/*
 * Cart page.
 *
 * Enqueued on is_cart() only (functions.php). Pairs with
 * woocommerce/cart/cart.php and cart/cart-empty.php.
 */

.kyrex-cart {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 900px) {
	.kyrex-cart {
		grid-template-columns: minmax(0, 1fr) 20rem;
	}

	.kyrex-cart__form {
		grid-column: 1;
	}

	.kyrex-cart__collaterals {
		grid-column: 2;
		position: sticky;
		/* Clears the sticky site header so the summary never hides under it. */
		top: 6rem;
	}
}

/* ── Line items ────────────────────────────────────────────────────
   A real table at desktop: this is tabular data, and the column headers
   are genuinely useful to a screen reader. */

.kyrex-cart__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--kyrex-font-body);
}

.kyrex-cart__table th {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kyrex-charcoal-muted);
	text-align: left;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--kyrex-border);
}

.kyrex-cart__table td {
	padding: 1.25rem 0.75rem 1.25rem 0;
	border-bottom: 1px solid var(--kyrex-border);
	vertical-align: top;
}

.kyrex-cart__table .product-thumbnail {
	width: 5.5rem;
}

.kyrex-cart__table .product-thumbnail img {
	width: 5rem;
	height: 5rem;
	object-fit: cover;
	border: 1px solid var(--kyrex-border);
}

.kyrex-cart__item-name {
	font-family: var(--kyrex-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--kyrex-charcoal);
	text-decoration: none;
}

.kyrex-cart__item-name:hover {
	border-bottom: 1px solid var(--kyrex-gold);
}

/* ── Slot and add-ons ──────────────────────────────────────────────
   The reason this page needed templating at all. WooCommerce prints cart
   item data as a flat <dl> at body weight, so "Date & Time" — the single
   most important fact about a booking — read no differently from anything
   else on the row. */

.kyrex-cart__item-meta {
	margin-top: 0.5rem;
}

.kyrex-cart__item-meta dl,
.kyrex-cart__item-meta .variation {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.125rem 0.5rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.kyrex-cart__item-meta dt {
	font-weight: 600;
	color: var(--kyrex-charcoal-muted);
	margin: 0;
}

.kyrex-cart__item-meta dd {
	margin: 0;
	color: var(--kyrex-charcoal);
}

.kyrex-cart__item-meta dd p {
	margin: 0;
}

.kyrex-cart__table .product-price,
.kyrex-cart__table .product-subtotal {
	white-space: nowrap;
	color: var(--kyrex-charcoal);
}

.kyrex-cart__table .product-subtotal {
	font-weight: 600;
}

.kyrex-cart__table .quantity input.qty {
	width: 3.5rem;
	padding: 0.375rem 0.5rem;
	font-family: var(--kyrex-font-body);
	font-size: 0.875rem;
	color: var(--kyrex-charcoal);
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-radius: var(--kyrex-radius-sm);
	text-align: center;
}

.kyrex-cart__table .quantity input.qty:focus-visible {
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 1px;
}

.kyrex-cart__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
	color: var(--kyrex-charcoal-muted);
	border-radius: var(--kyrex-radius-pill);
	transition: color 150ms ease, background-color 150ms ease;
}

.kyrex-cart__remove:hover {
	color: var(--kyrex-wine);
	background-color: var(--kyrex-ivory);
}

.kyrex-cart__remove:focus-visible {
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 2px;
}

/* ── Actions row ───────────────────────────────────────────────────*/

.kyrex-cart__table td.actions {
	padding-top: 1.5rem;
	border-bottom: 0;
}

.kyrex-cart__coupon {
	display: inline-flex;
	gap: 0.5rem;
	margin-right: 0.75rem;
	flex-wrap: wrap;
}

.kyrex-cart__coupon-field {
	padding: 0.625rem 0.875rem;
	font-family: var(--kyrex-font-body);
	font-size: 0.875rem;
	color: var(--kyrex-charcoal);
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-radius: var(--kyrex-radius-sm);
	min-width: 10rem;
}

.kyrex-cart__coupon-field:focus-visible {
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 1px;
}

/* ── Totals panel ──────────────────────────────────────────────────*/

/*
 * WooCommerce floats this panel at `width: 48%`
 * (`.cart-collaterals .cart_totals { float: right; width: 48% }`), which is
 * sized for its own two-column cart layout. Dropped into our 20rem sidebar
 * column that resolved to 154px, and the totals table — 180px wide — spilled
 * straight out of the card, taking the checkout button with it.
 *
 * The grid column already does the sizing, so the float and the percentage
 * both have to go.
 *
 * The selector needs `.woocommerce` and both container classes to outrank
 * `.woocommerce .cart-collaterals .cart_totals` (0,3,0) — measured, after a
 * first attempt at (0,2,0) silently lost and left the panel at 154px.
 */
.woocommerce .cart-collaterals.kyrex-cart__collaterals .cart_totals {
	float: none;
	width: 100%;
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-top: 3px solid var(--kyrex-accent);
	padding: 1.5rem;
}

.kyrex-cart__collaterals .cart_totals h2 {
	font-family: var(--kyrex-font-display);
	font-size: 1.25rem;
	margin: 0 0 1rem;
}

.kyrex-cart__collaterals table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--kyrex-font-body);
	font-size: 0.875rem;
}

.kyrex-cart__collaterals th,
.kyrex-cart__collaterals td {
	padding: 0.625rem 0;
	text-align: left;
	border-bottom: 1px solid var(--kyrex-border);
	font-weight: 400;
	color: var(--kyrex-charcoal-muted);
}

.kyrex-cart__collaterals td {
	text-align: right;
	color: var(--kyrex-charcoal);
}

.kyrex-cart__collaterals .order-total th,
.kyrex-cart__collaterals .order-total td {
	border-bottom: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--kyrex-charcoal);
	padding-top: 1rem;
}

.kyrex-cart__collaterals .wc-proceed-to-checkout {
	margin-top: 1.25rem;
}

/*
 * Matches WooCommerce's own `.woocommerce-cart .wc-proceed-to-checkout
 * a.checkout-button` at (0,3,1) and wins on load order — it sets
 * `font-size: 1.25em; padding: 1em`, which at this width wrapped the label
 * outside the button box.
 */
.woocommerce .cart-collaterals.kyrex-cart__collaterals .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 0.75rem;
	padding: 1rem 1.25rem;
	margin-bottom: 0;
}

/* ── Narrow widths: stacked cards ──────────────────────────────────
   Each row becomes its own card, with the column header re-attached to each
   cell through the `data-title` attributes in the template. Done here rather
   than via WooCommerce's `shop_table_responsive` class, which the template
   deliberately omits — see the note there. */

@media (max-width: 767px) {
	.kyrex-cart__table thead {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	.kyrex-cart__table tr.woocommerce-cart-form__cart-item {
		display: grid;
		grid-template-columns: 5rem 1fr auto;
		gap: 0 1rem;
		padding: 1.25rem 0;
		border-bottom: 1px solid var(--kyrex-border);
	}

	.kyrex-cart__table td {
		border-bottom: 0;
		padding: 0;
	}

	.kyrex-cart__table .product-thumbnail {
		grid-row: 1 / span 3;
	}

	.kyrex-cart__table .product-name {
		grid-column: 2;
	}

	.kyrex-cart__table .product-remove {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	/* Price, quantity and subtotal sit under the name, each labelled by the
	   column header it lost when the table stopped being a table. */
	.kyrex-cart__table .product-price,
	.kyrex-cart__table .product-quantity,
	.kyrex-cart__table .product-subtotal {
		grid-column: 2 / span 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding-top: 0.625rem;
		font-size: 0.875rem;
	}

	.kyrex-cart__table .product-price::before,
	.kyrex-cart__table .product-quantity::before,
	.kyrex-cart__table .product-subtotal::before {
		content: attr(data-title);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--kyrex-charcoal-muted);
	}

	.kyrex-cart__table td.actions {
		display: block;
		padding-top: 1.5rem;
	}

	.kyrex-cart__coupon {
		display: flex;
		margin: 0 0 0.75rem;
	}

	.kyrex-cart__update {
		width: 100%;
	}
}

/* ── Cross-sell ────────────────────────────────────────────────────
   Baseline 10.7. Below the totals rather than above: above, it competes
   with Proceed to checkout; below, it is there for somebody who has
   already decided and is looking for one more thing.

   Card-light on purpose — this is a suggestion, not a second catalogue,
   and it must not out-shout the thing the shopper came here to do. */

.kyrex-cross-sell {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--kyrex-border);
}

.kyrex-cross-sell__heading {
	font-family: var(--kyrex-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--kyrex-charcoal);
	margin: 0 0 1.25rem;
}

.kyrex-cross-sell__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

@media (min-width: 40rem) {
	.kyrex-cross-sell__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

.kyrex-cross-sell__link {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 0.875rem;
	align-items: center;
	padding: 0.75rem;
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-radius: var(--kyrex-radius-lg);
	text-decoration: none;
	color: var(--kyrex-charcoal);
	transition: border-color 150ms ease;
	height: 100%;
}

.kyrex-cross-sell__link:hover {
	border-color: var(--kyrex-gold-soft);
}

.kyrex-cross-sell__link:focus-visible {
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 2px;
}

.kyrex-cross-sell__media {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--kyrex-radius-sm);
	overflow: hidden;
	background-color: var(--kyrex-ivory);
	border: 1px solid var(--kyrex-border);
	position: relative;
}

.kyrex-cross-sell__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Same plus mark the product cards use, so a package without photography
   reads as intentional rather than broken. */
.kyrex-cross-sell__placeholder::before,
.kyrex-cross-sell__placeholder::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--kyrex-gold-soft);
	transform: translate(-50%, -50%);
}

.kyrex-cross-sell__placeholder::before {
	width: 0.875rem;
	height: 1px;
}

.kyrex-cross-sell__placeholder::after {
	width: 1px;
	height: 0.875rem;
}

.kyrex-cross-sell__body {
	display: block;
	min-width: 0;
}

.kyrex-cross-sell__name {
	display: block;
	font-family: var(--kyrex-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
}

.kyrex-cross-sell__price {
	display: block;
	font-family: var(--kyrex-font-body);
	font-size: 0.8125rem;
	color: var(--kyrex-charcoal-muted);
	margin-top: 0.25rem;
}