/* ==========================================================================
   V20 — cart.css
   Cart page (/cart). Empty state cloned from v20.nl (heading + warning alert +
   continue-shopping link) plus a 4-up product suggestion row.
   ========================================================================== */

.cart-page {
	padding-block: 3rem;
}

/* ---- Empty cart ---- */
.cart-empty {
	max-width: 760px;
	margin: 0 auto;
}

.cart-empty__heading {
	margin: 0 0 1.5rem;
	color: #fff;
	font-weight: 700;
	font-size: 1.75rem;
}

.cart-empty__heading span {
	color: #9ca3af;
	font-size: 1rem;
	font-weight: 400;
}

.cart-empty__alert {
	padding: 3rem;
	text-align: center;
	color: #664d03;
	background: #fff3cd;
	border: 1px solid #ffe69c;
	border-radius: .5rem;
}

.cart-empty__alert h4 {
	margin: 0 0 1rem;
	font-weight: 600;
	font-size: 1.25rem;
}

.cart-empty__cta {
	display: inline-block;
	padding: .6rem 1.5rem;
	color: #fff;
	background: #198754;
	border-radius: 50rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease;
}

.cart-empty__cta:hover {
	color: #fff;
	background: #157347;
}

.cart-empty__back {
	margin-top: 1rem;
}

.cart-empty__back a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: #9ca3af;
	text-decoration: none;
	transition: color .2s ease;
}

.cart-empty__back a:hover {
	color: #fff;
}

.cart-empty__back svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---- Suggestion row ---- */
.cart-suggest {
	margin-top: 3.5rem;
}

.cart-suggest__title {
	margin: 0 0 1.5rem;
	color: #fff;
	font-weight: 700;
	font-size: 1.25rem;
	text-transform: uppercase;
	text-align: center;
}

/* 4-up grid (reuses .product-card / .product-grid from shop.css). */
.product-grid--4 {
	grid-template-columns: 1fr;
}

@media (min-width: 576px) {
	.product-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.product-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---- Coupon form (classic cart): gap + input sized/heighted like the button ---- */
.woocommerce .cart .coupon,
.woocommerce-cart-form .coupon,
.woocommerce-cart .cart .coupon {
	display: flex;
	align-items: stretch;   /* input stretches to the button's height */
	gap: .75rem;
	flex-wrap: wrap;
}

.woocommerce #coupon_code.input-text {
	flex: 0 1 240px;
	min-width: 200px;
	width: auto;
	margin: 0;
	text-align: center;
}

.woocommerce .cart .coupon .button {
	margin: 0;
	white-space: nowrap;
}

/* Mobile: stack the field above the button so neither is squeezed. Side by
   side, the input (240px) + no-wrap button (240px) exceed a phone viewport,
   forcing the whole cart table to overflow and shrinking the button below its
   own text ("Waardebon toepassen" spilled past the green box). Full-width,
   stacked, both fit cleanly. */
@media (max-width: 767px) {
	.woocommerce .cart .coupon,
	.woocommerce-cart-form .coupon,
	.woocommerce-cart .cart .coupon {
		flex-direction: column;
	}

	.woocommerce #coupon_code.input-text {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}

	/* WooCommerce's own smallscreen stylesheet pins the coupon button to
	   width:48% via `.woocommerce table.cart td.actions .coupon .button`
	   (specificity 0,5,2). 48% can't fit "Waardebon toepassen", so the label
	   spilled past the button. Match its structure + the form class to outrank
	   it (0,6,2) and take the full column width. */
	.woocommerce-cart-form table.cart td.actions .coupon .button {
		width: 100%;
		float: none;
	}

	/* "Update winkelwagen" — a neutral secondary button so it reads apart from
	   the solid-neon coupon button above and the outline checkout button below.
	   It lights up neon on hover. WooCommerce ships it disabled until a quantity
	   changes; the disabled state gets its own clean muted look instead of core's
	   washed-out opacity:.5 over the neon fill (the old muddy-green). */
	.woocommerce-cart-form td.actions button[name="update_cart"] {
		background-color: #1b1f29;
		color: #e5e7eb;
		border: 1px solid var(--v20-border);
		box-shadow: none;
	}

	.woocommerce-cart-form td.actions button[name="update_cart"]:hover {
		background-color: var(--v20-neon);
		color: #000;
		border-color: var(--v20-neon);
		box-shadow: 0 0 11px var(--v20-neon);
	}

	.woocommerce-cart-form td.actions button[name="update_cart"]:disabled,
	.woocommerce-cart-form td.actions button[name="update_cart"]:disabled[disabled] {
		background-color: #14161c;
		color: #5b6470;
		border-color: var(--v20-border);
		opacity: 1;
		box-shadow: none;
		cursor: not-allowed;
	}
}