/* =========================================================================
 * WOOCOMMERCE
 *
 * Cart, checkout, order confirmation and My Account, restyled to match the
 * rest of the site. WooCommerce's own templates are NOT forked — these are its
 * class names, overridden from outside, so Woo stays updatable and none of
 * this has to be re-merged on every release.
 *
 * Checkout is where a student decides whether the site is trustworthy enough
 * to type a card number into, so it matters more than most pages that it does
 * not look like a different product bolted on.
 * ====================================================================== */

/* ---------------------------------------------------------------- layout */

.woocommerce-page .entry-content,
.woocommerce .woocommerce-notices-wrapper {
	max-width: var(--rcm-container);
	margin-inline: auto;
}

.woocommerce-page h1.entry-title,
.woocommerce-page .woocommerce-products-header__title {
	font-family: var(--rcm-font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.woocommerce-breadcrumb {
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
}

.woocommerce-breadcrumb a {
	color: var(--rcm-navy);
	text-decoration: none;
}

/* --------------------------------------------------------------- buttons */

/* Woo renders its own .button rather than .rcm-btn, so the RCM button is
   described again here instead of asking every template to change. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 0;
	border-radius: var(--rcm-radius-pill);
	padding: 0.7rem 1.25rem;
	font-family: var(--rcm-font-sans);
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--rcm-navy);
	color: #fff;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--rcm-navy-deep);
	color: #fff;
}

/* alt is Woo's primary — checkout, place order. Gold, as everywhere else the
   site asks for a commitment. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	background: var(--rcm-gold);
	color: var(--rcm-navy-deep);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
	background: var(--rcm-gold-deep);
	color: var(--rcm-navy-deep);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Woo ships a full-width place-order button; keep it that way, it is the one
   thing on the page the student is meant to press. */
.woocommerce #place_order {
	width: 100%;
	padding-block: 0.9rem;
	font-size: var(--rcm-text-base);
}

/* ----------------------------------------------------------------- tables */

.woocommerce table.shop_table {
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--rcm-card);
}

.woocommerce table.shop_table th {
	font-family: var(--rcm-font-sans);
	font-size: var(--rcm-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rcm-muted-fg);
	background: var(--rcm-muted);
	padding: 0.9rem 1rem;
	border: 0;
}

.woocommerce table.shop_table td {
	padding: 1rem;
	border: 0;
	border-top: 1px solid var(--rcm-border);
	vertical-align: middle;
}

.woocommerce table.shop_table .product-name a {
	font-weight: 600;
	color: var(--rcm-fg);
	text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover {
	color: var(--rcm-navy);
}

.woocommerce table.shop_table img {
	border-radius: var(--rcm-radius-sm);
}

.woocommerce .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.woocommerce a.remove {
	color: var(--rcm-muted-fg) !important;
	font-weight: 400;
}

.woocommerce a.remove:hover {
	background: var(--rcm-danger) !important;
	color: #fff !important;
}

/* ------------------------------------------------------------ cart totals */

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce .woocommerce-billing-fields h3,
.woocommerce .woocommerce-additional-fields h3 {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 0.75rem;
}

.woocommerce .cart-collaterals .cart_totals table.shop_table {
	border-radius: var(--rcm-radius-2xl);
}

.woocommerce .cart_totals .order-total .woocommerce-Price-amount {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-xl);
	color: var(--rcm-navy);
}

/* Quantity control is a tap target on a phone, not a spinner on a desk. */
.woocommerce .quantity .qty {
	min-height: 2.75rem;
	width: 4.5rem;
	padding: 0.4rem;
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius);
	background: var(--rcm-card);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ forms */

.woocommerce form .form-row {
	margin-bottom: 1rem;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--rcm-fg);
}

.woocommerce form .form-row .required {
	color: var(--rcm-danger);
	text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	min-height: 2.9rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius);
	background: var(--rcm-card);
	font-family: inherit;
	font-size: var(--rcm-text-base);
	color: var(--rcm-fg);
	box-sizing: border-box;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--rcm-navy);
	box-shadow: 0 0 0 3px rgb(0 51 160 / 0.12);
	outline: none;
}

/* Woo marks invalid fields with a class, not just a message. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--rcm-danger);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 1.5;
	padding: 0;
	color: var(--rcm-fg);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0.6rem;
	right: 0.4rem;
}

/* --------------------------------------------------------------- checkout */

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	margin-bottom: 1.5rem;
}

.woocommerce-checkout #payment {
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	padding: 1.25rem;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--rcm-border);
	padding: 0 0 1rem;
	margin: 0 0 1rem;
}

.woocommerce-checkout #payment ul.payment_methods li {
	list-style: none;
	padding: 0.5rem 0;
}

.woocommerce-checkout #payment ul.payment_methods label {
	font-weight: 600;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--rcm-muted);
	border-radius: var(--rcm-radius);
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--rcm-muted);
}

.woocommerce-terms-and-conditions-wrapper {
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
}

/* ---------------------------------------------------------------- notices */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-top: 0;
	border-radius: var(--rcm-radius-lg);
	padding: 1rem 1.25rem;
	font-size: var(--rcm-text-sm);
	line-height: 1.55;
	background: var(--rcm-navy-08);
	color: var(--rcm-fg);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: static;
	color: var(--rcm-navy);
}

.woocommerce-message {
	background: rgb(6 118 71 / 0.08);
}

.woocommerce-message::before {
	color: var(--rcm-success);
}

.woocommerce-error {
	background: rgb(180 35 24 / 0.08);
	color: var(--rcm-danger);
	list-style: none;
}

.woocommerce-error::before {
	color: var(--rcm-danger);
}

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

/* ------------------------------------------------------------- my account */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.25rem;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: var(--rcm-radius);
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	color: var(--rcm-fg);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--rcm-muted);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--rcm-navy);
	color: #fff;
}

/* --------------------------------------------------------------- coupon */

.woocommerce .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.woocommerce .coupon input.input-text {
	width: auto;
	min-width: 10rem;
	flex: 1;
}

/* ------------------------------------------------------------------ order */

.woocommerce .woocommerce-order,
.woocommerce .woocommerce-thankyou-order-received {
	font-size: var(--rcm-text-base);
}

.woocommerce ul.order_details {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin: 1.5rem 0;
	padding: 1.25rem;
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
}

.woocommerce ul.order_details li {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: var(--rcm-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rcm-muted-fg);
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--rcm-text-base);
	letter-spacing: 0;
	text-transform: none;
	color: var(--rcm-fg);
}

/* ----------------------------------------------------------------- mobile */

/* Woo turns the cart table into stacked rows below 768px. Its default borders
   fight the card, so the row is made the card instead. */
@media (max-width: 48rem) {
	/* The table itself must stop being a table, or five columns keep their
	   intrinsic width and the page scrolls sideways — the header row alone was
	   holding it 72px wider than a phone. */
	.woocommerce table.shop_table_responsive,
	.woocommerce-page table.shop_table_responsive,
	.woocommerce table.shop_table_responsive tbody,
	.woocommerce-page table.shop_table_responsive tbody {
		display: block;
		width: 100%;
	}

	.woocommerce table.shop_table_responsive thead,
	.woocommerce-page table.shop_table_responsive thead {
		display: none;
	}

	/* The column heading moves into each cell, which is what Woo's data-title
	   attribute is for. Scoped to [data-title] so cells without one — the
	   remove column, the coupon row — do not render a bare colon. */
	.woocommerce table.shop_table_responsive td[data-title]::before,
	.woocommerce-page table.shop_table_responsive td[data-title]::before {
		content: attr(data-title);
	}

	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		display: block;
		border-top: 1px solid var(--rcm-border);
		padding: 0.5rem 0;
	}

	/* display:block on the cells too. Without it they stay table-cells inside
	   a block row and keep sitting side by side, which is the broken half-
	   stacked layout. */
	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: auto;
		border: 0;
		padding: 0.4rem 1rem;
		text-align: right;
	}

	/* The remove link belongs beside the product name, not on a row of its
	   own above it. */
	.woocommerce table.shop_table_responsive tr td.product-remove,
	.woocommerce-page table.shop_table_responsive tr td.product-remove {
		justify-content: flex-end;
		padding-bottom: 0;
	}

	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		flex: 0 0 auto;
		text-align: left;
		font-size: var(--rcm-text-xs);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--rcm-muted-fg);
	}

	.woocommerce .cart-collaterals,
	.woocommerce-page .cart-collaterals {
		width: 100%;
	}

	.woocommerce .coupon input.input-text {
		min-width: 0;
	}

	.woocommerce .coupon,
	.woocommerce-cart-form .button {
		float: none !important;
		width: 100%;
	}

	.woocommerce .quantity .qty {
		width: 5rem;
	}

	/* Woo's own buttons are thumb-sized on a phone too. */
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce #respond input#submit {
		min-height: 2.75rem;
	}
}