/*
 * RDP Merch — Merch Studio checkout brand-token pass.
 *
 * Spec decision 7 (docs/superpowers/specs/2026-08-04-merch-studio-design.md):
 * "a token pass over Woo's own markup, not forked templates." This file
 * re-skins WooCommerce's own generated checkout markup with brand tokens —
 * no template overrides. Selectors target WooCommerce core's own class
 * names (woocommerce.php / class-wc-frontend-scripts, form-checkout.php,
 * review-order.php — WooCommerce 11.0.0), so this survives WooCommerce
 * core updates the way a forked template would not.
 *
 * Enqueued on is_checkout() and is_cart() — see functions.php. Both pages
 * can carry a Merch Studio design-thumbnail row (functions.php hooks
 * woocommerce_get_item_data, which WooCommerce's own cart.php and
 * checkout/review-order.php both call), so selectors that touch that row
 * — and anything else common to both pages — target
 * `.woocommerce-cart, .woocommerce-checkout` together. wc_body_class() is
 * an elseif chain: those two classes are mutually exclusive on the body
 * element, so listing both is required, not redundant.
 */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&display=swap");

.woocommerce-cart,
.woocommerce-checkout {
	--white: #ffffff;
	--paper: #f7f8fa;
	--grey-100: #eef0f2;
	--grey-200: #e1e5ea;
	--grey-400: #9aa1ab;
	--grey-600: #5b626c;
	--ink: #1b1e24;
	--red: #d2232a;
	--red-700: #a81b21;
	--red-100: #fbe3e4;
	--blue: #1e3a5f;
	--blue-800: #15293f;
	--blue-400: #3d6fa6;
	--blue-100: #e5ecf3;
	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;
	--dur-quick: 200ms;
	--ease-snap: cubic-bezier(0.16, 1, 0.3, 1);

	color: var(--ink);
	font-family: "Archivo", "Helvetica Neue", sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

/* --- Page heading --- */
.woocommerce-cart .page-title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .page-title,
.woocommerce-checkout .entry-title {
	font-family: "Anton", Impact, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 0.95;
	font-size: clamp(28px, 4vw, 40px);
	color: var(--ink);
	margin: 0 0 24px;
}

/* --- Notices (left-accent panel; single-sided accent = square corners per brand guide) --- */
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--grey-100);
	border: none;
	border-left: 3px solid var(--blue);
	border-radius: 0;
	color: var(--ink);
	list-style: none;
}
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
	background: var(--red-100);
	border-left-color: var(--red);
	color: var(--red-700);
}
.woocommerce-cart .woocommerce-error::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before {
	display: none;
}

/* --- Section headings ("Billing details", "Your order") --- */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--ink);
	margin: 0 0 16px;
}

/* --- Form fields ---
 * Shared by checkout (billing/shipping) and cart (coupon field, shipping
 * calculator) — both are plain Woo .input-text/select/textarea markup, same
 * treatment either page. */
.woocommerce-checkout .form-row label {
	font: 600 13px/1.4 "Archivo", sans-serif;
	color: var(--grey-600);
	margin: 0 0 8px;
	display: block;
}
.woocommerce-checkout .form-row .required {
	color: var(--red);
	text-decoration: none;
}
.woocommerce-cart .input-text,
.woocommerce-cart select,
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection {
	width: 100%;
	padding: 12px;
	font: 400 16px/1.4 "Archivo", sans-serif;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--grey-200);
	border-radius: var(--r-sm);
	box-shadow: none;
	transition: border-color var(--dur-quick) var(--ease-snap), box-shadow var(--dur-quick) var(--ease-snap);
}
.woocommerce-cart .input-text:focus,
.woocommerce-cart select:focus,
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout .select2-container--focus .select2-selection {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px var(--blue-100);
}

/* --- Order review table --- */
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
	background: var(--white);
	border: 1px solid var(--grey-200);
	border-radius: var(--r-lg);
	padding: 24px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	text-align: left;
	font: 700 12px/1 "Archivo", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grey-600);
	padding: 0 0 12px;
	border-bottom: 1px solid var(--grey-200);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
	padding: 12px 0;
	border-bottom: 1px solid var(--grey-200);
	vertical-align: top;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-name {
	font-weight: 600;
	color: var(--ink);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	border-bottom: none;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
	font-weight: 700;
	font-size: 18px;
	color: var(--ink);
	border-top: 1.5px solid var(--ink);
	padding-top: 16px;
}

/* --- Design thumbnail in the order summary (see functions.php) ---
 * The cart/checkout row is WooCommerce's own <dl class="variation"><dt>
 * Your design:</dt><dd>…</dd></dl> markup (cart/cart-item-data.php). Its
 * class name is a runtime sanitize_html_class() of our translated label,
 * so it isn't a stable selector to hide by — style the dl generically for
 * any row (ours or a future one) that carries a thumbnail image instead.
 * Scoped to the shared body classes (not a table class) because the same
 * markup renders inside two different tables — cart.php's
 * .woocommerce-cart-form__contents and review-order.php's
 * .woocommerce-checkout-review-order-table.
 */
.woocommerce-cart dl.variation,
.woocommerce-checkout dl.variation {
	margin: 4px 0 0;
}
.woocommerce-cart dl.variation dt,
.woocommerce-checkout dl.variation dt {
	font: 700 11px/1 "Archivo", sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grey-600);
	margin: 8px 0 0;
	float: none;
	clear: both;
}
.woocommerce-cart dl.variation dd,
.woocommerce-checkout dl.variation dd {
	margin: 4px 0 0;
}
.woocommerce-cart .ms-order-thumb,
.woocommerce-checkout .ms-order-thumb,
.woocommerce-cart .ms-order-thumb-wrap img,
.woocommerce-checkout .ms-order-thumb-wrap img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--r-sm);
	border: 1px solid var(--grey-200);
	background: var(--grey-100);
	margin: 8px 0 0;
}
.woocommerce-cart .ms-order-thumb-wrap,
.woocommerce-checkout .ms-order-thumb-wrap {
	margin: 8px 0 0;
}

/* --- Cart item table (woocommerce/cart/cart.php) --- */
.woocommerce-cart table.cart {
	width: 100%;
	border-collapse: collapse;
	background: var(--white);
	border: 1px solid var(--grey-200);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.woocommerce-cart table.cart thead th {
	text-align: left;
	font: 700 12px/1 "Archivo", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grey-600);
	padding: 16px;
	background: var(--paper);
	border-bottom: 1px solid var(--grey-200);
}
.woocommerce-cart table.cart td {
	padding: 16px;
	border-bottom: 1px solid var(--grey-200);
	vertical-align: middle;
}
.woocommerce-cart table.cart tr:last-child td {
	border-bottom: none;
}
.woocommerce-cart table.cart td.product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--r-sm);
	border: 1px solid var(--grey-200);
}
.woocommerce-cart table.cart td.product-name a {
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}
.woocommerce-cart table.cart td.product-name a:hover {
	color: var(--red);
}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
	font-weight: 600;
	color: var(--ink);
}
.woocommerce-cart table.cart td.product-remove a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--grey-100);
	color: var(--grey-600) !important;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: background var(--dur-quick) var(--ease-snap), color var(--dur-quick) var(--ease-snap);
}
.woocommerce-cart table.cart td.product-remove a.remove:hover {
	background: var(--red-100) !important;
	color: var(--red-700) !important;
}
.woocommerce-cart table.cart td.product-quantity input.qty {
	width: 64px;
	padding: 8px;
	font: 400 15px/1.4 "Archivo", sans-serif;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--grey-200);
	border-radius: var(--r-sm);
	text-align: center;
}
.woocommerce-cart table.cart td.product-quantity input.qty:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px var(--blue-100);
}
.woocommerce-cart table.cart td.actions {
	padding: 20px 16px;
	background: var(--paper);
}
.woocommerce-cart .coupon {
	display: inline-flex;
	gap: 8px;
	margin: 0 12px 12px 0;
}
.woocommerce-cart .coupon .input-text {
	width: auto;
}

/* --- Cart totals sidebar (woocommerce/cart/cart-totals.php, uncustomized) --- */
.woocommerce-cart .cart-collaterals {
	margin-top: 24px;
}
.woocommerce-cart .cart_totals {
	max-width: 420px;
	margin-left: auto;
	background: var(--white);
	border: 1px solid var(--grey-200);
	border-radius: var(--r-lg);
	padding: 24px;
}
.woocommerce-cart .cart_totals h2 {
	margin: 0 0 16px;
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--ink);
}
.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--grey-200);
	text-align: left;
	vertical-align: top;
	font: 400 15px/1.4 "Archivo", sans-serif;
	color: var(--ink);
}
.woocommerce-cart .cart_totals table.shop_table th {
	font-weight: 600;
	color: var(--grey-600);
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	font-weight: 700;
	font-size: 18px;
	border-top: 1.5px solid var(--ink);
	border-bottom: none;
	padding-top: 16px;
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
	margin-top: 16px;
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.button {
	width: 100%;
}

/* --- Cross-sells --- */
.woocommerce-cart .cross-sells {
	margin-top: 32px;
}
.woocommerce-cart .cross-sells h2 {
	margin: 0 0 16px;
	font-family: "Anton", Impact, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(22px, 3vw, 28px);
	color: var(--ink);
}
.woocommerce-cart .cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-cart .cross-sells ul.products li.product {
	background: var(--white);
	border: 1px solid var(--grey-200);
	border-radius: var(--r-lg);
	padding: 16px;
	text-align: center;
	transition: border-color var(--dur-quick) var(--ease-snap);
}
.woocommerce-cart .cross-sells ul.products li.product:hover {
	border-color: var(--ink);
}
.woocommerce-cart .cross-sells ul.products li.product img {
	border-radius: var(--r-sm);
}
.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	margin: 8px 0 4px;
}
.woocommerce-cart .cross-sells ul.products li.product .price {
	color: var(--grey-600);
	font-size: 14px;
}

/* --- Cart table on narrow screens: WooCommerce's own shop_table_responsive
   collapses each td to a labeled block via its data-title attribute; these
   rules just make that layout fit the card treatment above instead of
   fighting it. */
@media (max-width: 700px) {
	.woocommerce-cart table.cart thead {
		display: none;
	}
	.woocommerce-cart table.cart,
	.woocommerce-cart table.cart tbody,
	.woocommerce-cart table.cart tr,
	.woocommerce-cart table.cart td {
		display: block;
		width: 100%;
	}
	.woocommerce-cart table.cart tr {
		padding: 16px;
	}
	.woocommerce-cart table.cart td {
		border-bottom: none;
		padding: 4px 0;
	}
	.woocommerce-cart table.cart td.product-remove {
		text-align: right;
	}
	.woocommerce-cart table.cart td[data-title]::before {
		content: attr(data-title) ": ";
		font-weight: 700;
		color: var(--grey-600);
	}
	.woocommerce-cart .cart_totals {
		max-width: none;
		margin-left: 0;
	}
}

/* --- Payment methods --- */
.woocommerce-checkout ul.payment_methods {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	border-bottom: 1px solid var(--grey-200);
}
.woocommerce-checkout ul.payment_methods li {
	padding: 12px 0;
	border-top: 1px solid var(--grey-200);
}
.woocommerce-checkout ul.payment_methods li label {
	font-weight: 600;
	color: var(--ink);
}
.woocommerce-checkout .payment_box {
	margin: 8px 0 0;
	padding: 16px;
	background: var(--grey-100);
	border-radius: var(--r-sm);
	color: var(--grey-600);
	font-size: 14px;
}

/* --- Coupon --- */
.woocommerce-checkout .checkout_coupon .form-row-first,
.woocommerce-checkout .checkout_coupon .form-row-last {
	display: inline-block;
	vertical-align: middle;
}

/* --- Buttons ---
 * Brand secondary (§11 of the guide: transparent, --blue text, --grey-200
 * border) is the default for every plain WooCommerce .button here — Woo
 * gives that same bare class to "Apply coupon" (checkout/form-coupon.php)
 * and "Update cart"/"Proceed to checkout" (cart.php), none of which is the
 * page's one primary action. Solid red on all of them would flood the
 * surface well past the guide's ~10% ceiling the moment a shopper opens
 * the coupon field. #place_order — the single primary action,
 * checkout-only — gets the brand primary red on top of this, via the ID
 * selector's higher specificity.
 *
 * Selectors are element+class (a.button, button.button), not just .button:
 * WooCommerce's own woocommerce.css styles buttons the same way — wrapping
 * cart/checkout shortcode output in a plain <div class="woocommerce">, then
 * ".woocommerce a.button, .woocommerce button.button" — and a bare-class
 * selector loses that specificity fight regardless of stylesheet load
 * order (confirmed: with only ".woocommerce-cart .button" here, "Apply
 * coupon"/"Update cart"/"Proceed to checkout" kept WooCommerce's own
 * purple even after this stylesheet was made to print after GeneratePress's).
 */
.woocommerce-cart a.button,
.woocommerce-cart button.button,
.woocommerce-cart input.button,
.woocommerce-checkout a.button,
.woocommerce-checkout button.button,
.woocommerce-checkout input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 600 15px/1 "Archivo", sans-serif;
	padding: 16px 24px;
	border-radius: var(--r-sm);
	cursor: pointer;
	background: transparent;
	color: var(--blue);
	border: 1px solid var(--grey-200);
	transition: background var(--dur-quick) var(--ease-snap), border-color var(--dur-quick) var(--ease-snap), color var(--dur-quick) var(--ease-snap), transform 110ms var(--ease-snap);
}
.woocommerce-cart a.button:hover,
.woocommerce-cart button.button:hover,
.woocommerce-cart input.button:hover,
.woocommerce-checkout a.button:hover,
.woocommerce-checkout button.button:hover,
.woocommerce-checkout input.button:hover {
	border-color: var(--ink);
	color: var(--ink);
}
.woocommerce-cart a.button:active,
.woocommerce-cart button.button:active,
.woocommerce-cart input.button:active,
.woocommerce-checkout a.button:active,
.woocommerce-checkout button.button:active,
.woocommerce-checkout input.button:active {
	transform: scale(0.98);
}

.woocommerce-checkout #place_order {
	/* An ID selector already outranks WooCommerce's .woocommerce button.button
	   on specificity, unlike the plain .button rule above did. */
	background: var(--red);
	color: var(--white);
	border: none;
}
.woocommerce-checkout #place_order:hover {
	background: var(--red-700);
}

/* The cart page has no #place_order — "Proceed to checkout" is that page's
   equivalent single primary action, so it gets the same red treatment (one
   red CTA per page, same rationing principle as the checkout page). It
   ships as WooCommerce's own .alt variant (an extra class the plain
   a.button rule above does not carry), which is off-brand purple
   (#7f54b3) by default — .wc-proceed-to-checkout .checkout-button.alt
   matches that specificity (three classes) and beats it on source order. */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button.alt {
	background: var(--red);
	color: var(--white);
	border: none;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button.alt:hover {
	background: var(--red-700);
	color: var(--white);
}
.woocommerce-checkout a.showcoupon,
.woocommerce-checkout .woocommerce-form-login-toggle a,
.woocommerce-checkout .woocommerce-form-coupon-toggle a {
	color: var(--red);
	text-decoration: none;
}
.woocommerce-checkout a.showcoupon:hover,
.woocommerce-checkout .woocommerce-form-login-toggle a:hover,
.woocommerce-checkout .woocommerce-form-coupon-toggle a:hover {
	color: var(--red-700);
}

/* --- Terms checkbox --- */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 16px 0;
	font-size: 14px;
	color: var(--grey-600);
}

/* --- Empty-cart state (woocommerce/cart/cart-empty.php) ---
 * Own card rather than the plain message + text link core ships: centered,
 * icon badge in the same red-100/red-700 tint-fill pairing the "New Designs"
 * badge and school-selector initials use elsewhere on this site, one red CTA
 * (the page's single primary action, same rationing rule as the button
 * block above).
 */
.woocommerce-cart .rdps-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 420px;
	margin: 40px auto;
	padding: 8px 0;
}
.woocommerce-cart .rdps-cart-empty__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 0 20px;
	border-radius: 999px;
	background: var(--red-100);
	color: var(--red-700);
}
.woocommerce-cart .rdps-cart-empty__title {
	margin: 0 0 8px;
	font-family: "Anton", Impact, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: 26px;
	color: var(--ink);
}
.woocommerce-cart .rdps-cart-empty__subtitle {
	margin: 0 0 24px;
	color: var(--grey-600);
	font-size: 15px;
	line-height: 1.5;
}
.woocommerce-cart .rdps-cart-empty .woocommerce-info {
	width: 100%;
	text-align: left;
}
.woocommerce-cart a.rdps-cart-empty__cta.button {
	background: var(--red);
	color: var(--white);
	border: none;
}
.woocommerce-cart a.rdps-cart-empty__cta.button:hover {
	background: var(--red-700);
	color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-cart *,
	.woocommerce-cart *::before,
	.woocommerce-cart *::after,
	.woocommerce-checkout *,
	.woocommerce-checkout *::before,
	.woocommerce-checkout *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}