/**
 * SuperSquare Storefront — Cart UI (v5, rebuilt against the verified real DOM)
 *
 * Loads on is_cart() (and is_checkout(), but contains no Checkout-scoped
 * selectors — Checkout/Payment/Order Success live entirely in checkout.css).
 *
 * VERIFIED REAL STRUCTURE (read directly from the installed WooCommerce
 * template + shortcode source, and from page.php):
 *   page.php   → <div class="ssq-page-wrapper ssq-wc-portal-page">
 *                  <div class="ssq-container"><article>
 *                    <div class="ssq-page-content ssq-wc-content">
 *                      {the_content() = the [woocommerce_cart] shortcode output}
 *   cart.php   →      <form class="woocommerce-cart-form">...</form>
 *                      <div class="cart-collaterals">...</div>
 * There is NO ".woocommerce" wrapper anywhere in this chain — confirmed by
 * reading cart/cart.php and includes/shortcodes/class-wc-shortcode-cart.php
 * directly. The real, verified common parent of the two siblings above is
 * ".ssq-wc-content" (shared with My Account, so every rule below is scoped
 * under body.woocommerce-cart). No template override, all cart AJAX/nonces
 * stay fully native.
 */

.woocommerce-cart {
	--pf-ink: #14161a;
	--pf-muted: #6b7280;
	--pf-line: #e5e7eb;
	--pf-surface: #ffffff;
	--pf-field: #f3f4f6;
	--pf-accent: #4f46e5;
	--pf-accent-dark: #4338ca;
	--pf-accent-tint: #eef2ff;
	--pf-success: #16a34a;
	--pf-danger: #dc2626;
	--pf-danger-tint: #fef2f2;
	--pf-radius: 16px;
	--pf-radius-sm: 10px;
	--pf-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 28px rgba(20, 22, 26, 0.06);
}

body.woocommerce-cart .site-main {
	background: #fafafb;
	padding-block: 0 clamp(2rem, 5vw, 4rem);
}

body.woocommerce-cart .entry-title {
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2.25rem) 1.5rem 1.25rem;
	color: var(--pf-ink);
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

body.woocommerce-cart .ssq-container {
	max-width: 1320px;
}

/* ==========================================================================
   Real grid container: .ssq-wc-content is the verified common parent of
   .woocommerce-cart-form and .cart-collaterals. Scoped to Cart only.
   ========================================================================== */
body.woocommerce-cart .ssq-wc-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
	align-items: start;
}

.woocommerce-cart-form {
	min-width: 0;
}

/* ==========================================================================
   Cart items table → premium card rows
   ========================================================================== */
.woocommerce-cart-form table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 0.75rem;
}

.woocommerce-cart-form table.shop_table thead {
	display: none;
}

.woocommerce-cart-form table.shop_table tr.cart_item {
	background: var(--pf-surface);
	box-shadow: var(--pf-shadow);
	border-radius: var(--pf-radius);
}

.woocommerce-cart-form table.shop_table td {
	padding: 1.1rem 0.9rem;
	border: 0;
	border-top: 1px solid var(--pf-line);
	border-bottom: 1px solid var(--pf-line);
	color: var(--pf-ink);
	vertical-align: middle;
}

.woocommerce-cart-form table.shop_table td:first-child {
	border-left: 1px solid var(--pf-line);
	border-top-left-radius: var(--pf-radius);
	border-bottom-left-radius: var(--pf-radius);
}

.woocommerce-cart-form table.shop_table td:last-child {
	border-right: 1px solid var(--pf-line);
	border-top-right-radius: var(--pf-radius);
	border-bottom-right-radius: var(--pf-radius);
}

.woocommerce-cart-form .product-thumbnail img {
	width: 76px;
	height: 76px;
	object-fit: contain;
	background: var(--pf-field);
	border-radius: var(--pf-radius-sm);
	padding: 6px;
}

.woocommerce-cart-form .product-name a {
	color: var(--pf-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-cart-form .product-name a:hover {
	color: var(--pf-accent);
}

.woocommerce-cart-form .product-name dl.variation {
	margin: 0.35rem 0 0;
	color: var(--pf-muted);
	font-size: 0.78rem;
}

.woocommerce-cart-form .product-price {
	color: var(--pf-muted);
	font-size: 0.875rem;
}

.woocommerce-cart-form .product-subtotal {
	color: var(--pf-ink);
	font-size: 1rem;
	font-weight: 800;
	text-align: right;
}

.woocommerce-cart-form .product-remove {
	text-align: center;
}

.woocommerce-cart-form .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pf-danger-tint);
	color: var(--pf-danger);
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-cart-form .product-remove a.remove:hover {
	background: var(--pf-danger);
	color: #fff;
}

/* Premium quantity stepper (real input, enhanced by main.js) */
.woocommerce-cart-form .quantity,
.ssq-quantity-control {
	display: inline-flex;
	align-items: center;
	height: 40px;
	border: 1px solid var(--pf-line);
	border-radius: 999px;
	background: var(--pf-field);
	overflow: hidden;
}

.woocommerce-cart-form .quantity .qty {
	width: 42px !important;
	height: 100%;
	padding: 0;
	border: 0 !important;
	background: transparent;
	box-shadow: none !important;
	text-align: center;
	font-weight: 700;
	color: var(--pf-ink);
	-moz-appearance: textfield;
}

.woocommerce-cart-form .quantity .qty::-webkit-inner-spin-button,
.woocommerce-cart-form .quantity .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.ssq-qty-button {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--pf-ink);
	font: 700 1.15rem/1 inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ssq-qty-button:hover {
	background: var(--pf-accent-tint);
	color: var(--pf-accent-dark);
}

.ssq-qty-button:focus-visible {
	outline: 2px solid var(--pf-accent);
	outline-offset: -2px;
}

/* Update-cart / coupon row (td.actions, full width inside the table) */
.woocommerce-cart-form td.actions {
	background: transparent !important;
	border: 0 !important;
	padding: 0.5rem 0 0 !important;
}

.woocommerce-cart-form .coupon {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem;
	border: 1px solid var(--pf-line);
	border-radius: 999px;
	background: var(--pf-surface);
}

.woocommerce-cart-form .coupon input[type="text"] {
	min-width: 170px;
	height: 40px;
	padding: 0 0.9rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 0.875rem;
}

.woocommerce-cart-form .coupon input[type="text"]:focus {
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--pf-accent-tint);
}

.woocommerce-cart-form button[name="update_cart"],
.woocommerce-cart-form .coupon button {
	height: 40px;
	padding: 0 1.15rem;
	border: 0;
	border-radius: 999px;
	background: var(--pf-ink);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.woocommerce-cart-form button[name="update_cart"]:hover,
.woocommerce-cart-form .coupon button:hover {
	background: var(--pf-accent);
}

.woocommerce-cart-form button[name="update_cart"] {
	margin-left: 0.75rem;
}

/* ==========================================================================
   Order summary panel (.cart-collaterals — real sibling of the form)
   ========================================================================== */
.cart-collaterals {
	min-width: 0;
}

.cart_totals {
	padding: clamp(1.5rem, 3vw, 1.85rem);
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-radius);
	background: var(--pf-surface);
	box-shadow: var(--pf-shadow);
}

.cart_totals h2 {
	margin: 0 0 1.1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--pf-line);
	color: var(--pf-ink);
	font-size: 1.15rem;
	font-weight: 800;
}

.cart_totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 1.25rem;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: 0.65rem 0;
	border: 0;
	border-bottom: 1px solid var(--pf-line);
	font-size: 0.85rem;
	color: var(--pf-muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.cart_totals table.shop_table th {
	text-align: left;
	font-weight: 600;
}

.cart_totals table.shop_table td {
	color: var(--pf-ink);
	font-weight: 700;
}

.cart_totals .cart-discount td {
	color: var(--pf-success);
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	padding-top: 1rem;
	border-top: 2px solid var(--pf-ink);
	border-bottom: 0;
	color: var(--pf-ink);
	font-size: 1.2rem;
	font-weight: 900;
}

.woocommerce-shipping-calculator {
	padding: 0.9rem;
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-radius-sm);
	background: var(--pf-field);
	font-size: 0.82rem;
}

.woocommerce-shipping-calculator .button {
	margin-top: 0.6rem;
	height: 38px;
	padding: 0 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--pf-ink);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
}

.wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 54px;
	border-radius: 999px;
	background: var(--pf-accent);
	color: #fff !important;
	font-size: 0.95rem;
	font-weight: 800;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.wc-proceed-to-checkout a.checkout-button::after {
	content: "→";
}

.wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--pf-accent-dark);
	transform: translateY(-1px);
}

.ssq-cart-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--pf-line);
}

.ssq-cart-trust span {
	color: var(--pf-muted);
	font-size: 0.72rem;
	font-weight: 600;
}

/* ==========================================================================
   Empty cart (cart-empty.php renders instead of cart.php — same
   .ssq-wc-content parent, single-column grid already stacks it correctly)
   ========================================================================== */
.cart-empty.woocommerce-info,
.wc-empty-cart-message + .return-to-shop {
	max-width: 560px;
	margin: 2rem auto;
	text-align: center;
}

.cart-empty.woocommerce-info {
	padding: 3rem 1.5rem 1rem;
	border: 0;
	border-radius: var(--pf-radius) var(--pf-radius) 0 0;
	background: var(--pf-surface);
	box-shadow: var(--pf-shadow);
	color: var(--pf-ink);
	font-size: 1.1rem;
	font-weight: 700;
	list-style: none;
}

.return-to-shop {
	padding: 0 1.5rem 2.25rem;
	border-radius: 0 0 var(--pf-radius) var(--pf-radius);
	background: var(--pf-surface);
	box-shadow: var(--pf-shadow);
}

.return-to-shop .button {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 1.3rem;
	border: 0;
	border-radius: 999px;
	background: var(--pf-accent);
	color: #fff !important;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

/* ==========================================================================
   Notices (Cart-scoped)
   ========================================================================== */
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info {
	max-width: 1320px;
	margin: 1.25rem auto 0;
	padding: 0.9rem 1.25rem;
	border: 0;
	border-left: 4px solid var(--pf-accent);
	border-radius: var(--pf-radius-sm);
	background: var(--pf-surface);
	box-shadow: var(--pf-shadow);
	color: var(--pf-ink);
	font-size: 0.875rem;
	list-style: none;
}

body.woocommerce-cart .woocommerce-error {
	border-left-color: var(--pf-danger);
	color: var(--pf-danger);
}

/* ==========================================================================
   Responsive — 320 / 375 / 430 / tablet / desktop / large desktop
   ========================================================================== */

/* Tablet: comfortable single column, wider row padding. */
@media (min-width: 600px) and (max-width: 991px) {
	body.woocommerce-cart .ssq-container {
		padding-inline: 2rem;
	}
}

/* Desktop: real two-column layout against the verified real parent,
   sticky order summary. */
@media (min-width: 992px) {
	body.woocommerce-cart .ssq-wc-content {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
		gap: 2rem;
	}

	.cart-collaterals {
		position: sticky;
		top: 32px;
		align-self: start;
	}
}

@media (min-width: 1400px) {
	body.woocommerce-cart .ssq-container,
	body.woocommerce-cart .entry-title {
		max-width: 1480px;
	}

	body.woocommerce-cart .ssq-wc-content {
		grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
	}
}

/* Mobile: card layout, no overflowing table, real sticky CTA (320/375/430px). */
@media (max-width: 767px) {
	body.woocommerce-cart .entry-title {
		padding-inline: 1.1rem;
	}

	body.woocommerce-cart .ssq-container {
		padding-inline: 0.9rem;
	}

	.woocommerce-cart-form table.shop_table {
		border-spacing: 0 0.85rem;
	}

	.woocommerce-cart-form table.shop_table tr.cart_item {
		display: grid;
		position: relative;
		grid-template-columns: 68px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name remove"
			"thumb price price"
			"thumb qty subtotal";
		gap: 0.3rem 0.85rem;
		padding: 1rem;
	}

	.woocommerce-cart-form table.shop_table td {
		padding: 0;
		border: 0 !important;
	}

	.woocommerce-cart-form .product-thumbnail {
		grid-area: thumb;
	}

	.woocommerce-cart-form .product-name {
		grid-area: name;
		padding-right: 2rem !important;
	}

	.woocommerce-cart-form .product-price {
		grid-area: price;
	}

	.woocommerce-cart-form .product-quantity {
		grid-area: qty;
		margin-top: 0.4rem;
	}

	.woocommerce-cart-form .product-subtotal {
		grid-area: subtotal;
		align-self: end;
		text-align: right;
	}

	.woocommerce-cart-form .product-remove {
		grid-area: remove;
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
	}

	.woocommerce-cart-form table.shop_table tr:not(.cart_item) {
		display: block;
	}

	.woocommerce-cart-form .coupon {
		display: grid;
		grid-template-columns: 1fr auto;
		width: 100%;
	}

	.woocommerce-cart-form .coupon input[type="text"] {
		width: 100%;
		min-width: 0;
	}

	.woocommerce-cart-form button[name="update_cart"] {
		width: 100%;
		margin: 0.75rem 0 0;
	}

	body.woocommerce-cart {
		padding-bottom: max(1rem, env(safe-area-inset-bottom));
	}

	.wc-proceed-to-checkout {
		position: sticky;
		bottom: 0;
		margin: 0 -0.9rem -1.1rem;
		padding: 0.85rem 0.9rem calc(0.85rem + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.97);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--pf-line);
		box-shadow: 0 -10px 26px rgba(20, 22, 26, 0.1);
	}
}

/* Small phones: tighten paddings so nothing crowds at 320-375px. */
@media (max-width: 380px) {
	.woocommerce-cart-form table.shop_table tr.cart_item {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		padding: 0.75rem;
	}

	.woocommerce-cart-form .product-thumbnail img {
		width: 56px;
		height: 56px;
	}

	.cart_totals {
		padding: 1.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc-proceed-to-checkout a.checkout-button,
	.woocommerce-cart-form .product-remove a.remove,
	.ssq-qty-button {
		transition: none;
	}
}