/*
 * Pretzo theme — cart.css
 * Uitsluitend geladen op de native winkelwagenpagina
 * (pretzo_is_cart_page(), page-templates/cart.php) — Fase 7B.1.
 *
 * Styling laag over WooCommerce's ONGEWIJZIGDE, klassieke
 * `[woocommerce_cart]`-shortcode-markup (templates/cart/cart.php,
 * cart-empty.php) — geen enkele WooCommerce-klassenaam hieronder is
 * hier zelf geïntroduceerd; alles bestaat al in WooCommerce's eigen
 * templates en wordt hier uitsluitend visueel aangesloten op het
 * Pretzo-designsysteem (dezelfde tokens als home/winkel/product/regio).
 */

/* ---------- Breadcrumb & heading ---------- */

.pretzo-cart__breadcrumb {
	padding-block: var(--wp--preset--spacing--sm, 1rem) 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted, #4b5563);
}

.pretzo-cart__breadcrumb a {
	color: inherit;
}

.pretzo-cart__inner {
	padding-block: clamp(1.5rem, 3vw + 1rem, 3rem);
}

.pretzo-cart__heading {
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
}

/*
 * Zelfde sitebrede legacy-conflict als al drie keer eerder bevestigd
 * (shop, single-product, regio): `.elementor-kit-1181 h1 { font-size:
 * 104px; }`, specificiteit (0,1,1). `.pretzo-cart .pretzo-cart__heading`
 * = (0,2,0), wint zonder `!important`. Proactief toegepast — dezelfde
 * Elementor-Kit is op deze pagina bevestigd actief geweest
 * (Fase 7A-audit), dus dit conflict is zeer waarschijnlijk ook hier
 * van toepassing; te bevestigen bij de eerste visuele QA.
 */
.pretzo-cart .pretzo-cart__heading {
	font-size: var(--wp--preset--font-size--display);
}

@media (max-width: 600px) {
	.pretzo-cart .pretzo-cart__heading {
		font-size: clamp(2rem, 4vw + 1.2rem, 2.375rem);
		line-height: 1.1;
	}
}

/* ---------- Notices ---------- */

.pretzo-cart .woocommerce-notices-wrapper {
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
}

.pretzo-cart .woocommerce-message,
.pretzo-cart .woocommerce-error,
.pretzo-cart .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 1em 1.25em;
	border-radius: var(--wp--custom--radius--md, 10px);
	border: 1px solid var(--wp--preset--color--border, #e2e5ea);
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--navy, #111827);
}

.pretzo-cart .woocommerce-message {
	border-color: #bfe3c3;
	background: #f1faf2;
}

.pretzo-cart .woocommerce-error {
	border-color: #f3c2c2;
	background: #fdf2f2;
}

.pretzo-cart .woocommerce-info {
	border-color: #bcd9f7;
	background: #f0f7fe;
}

.pretzo-cart .woocommerce-message a.button,
.pretzo-cart .woocommerce-error a.button,
.pretzo-cart .woocommerce-info a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0.6em 1.25em;
	border-radius: var(--wp--custom--radius--md, 10px);
	background: var(--wp--preset--color--blue, #007bff);
	color: var(--wp--preset--color--white, #fff);
	text-decoration: none;
	font-weight: 600;
}

/* ---------- Cart table ---------- */

.pretzo-cart table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
}

.pretzo-cart table.cart th,
.pretzo-cart table.cart td {
	padding: 1em 0.75em;
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e5ea);
	text-align: left;
	vertical-align: middle;
}

.pretzo-cart table.cart thead th {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--muted, #4b5563);
	border-bottom-color: var(--wp--preset--color--navy, #111827);
}

.pretzo-cart .product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md, 10px);
	border: 1px solid var(--wp--preset--color--border, #e2e5ea);
}

.pretzo-cart .product-name a {
	color: var(--wp--preset--color--navy, #111827);
	font-weight: 700;
	text-decoration: none;
}

.pretzo-cart .product-name a:hover {
	color: var(--wp--preset--color--blue, #007bff);
}

/*
 * WooCommerce Bookings hangt de boekingsdetails (datum/duur) als
 * `dl.wc-item-meta`/`dl.variation` onder de productnaam — bestaande
 * WooCommerce/Bookings-markup, hier alleen leesbaarder opgemaakt.
 */
.pretzo-cart .product-name dl.wc-item-meta,
.pretzo-cart .product-name dl.variation {
	margin: 0.5em 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted, #4b5563);
}

.pretzo-cart .product-name dl.wc-item-meta dt,
.pretzo-cart .product-name dl.variation dt {
	float: left;
	clear: left;
	margin: 0 0.4em 0 0;
	font-weight: 600;
}

.pretzo-cart .product-name dl.wc-item-meta dd,
.pretzo-cart .product-name dl.variation dd {
	margin: 0 0 0.2em;
}

.pretzo-cart .product-price,
.pretzo-cart .product-subtotal {
	font-weight: 700;
	color: var(--wp--preset--color--navy, #111827);
	white-space: nowrap;
}

/* Snippet 8 forceert de aantal-weergave al naar "1" (visueel) — dit
 * template laat dat gedrag bewust ongewijzigd. De onderstaande regels
 * zorgen alleen dat het overgebleven input-element, ongeacht of het
 * zichtbaar/leesbaar is, netjes oogt zolang snippet 8 actief is. */
.pretzo-cart .quantity .qty {
	width: 4rem;
	min-height: 40px;
	padding: 0.4em 0.5em;
	border: 1px solid var(--wp--preset--color--border, #e2e5ea);
	border-radius: var(--wp--custom--radius--sm, 6px);
	font-size: 1rem;
	text-align: center;
}

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

.pretzo-cart .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--surface, #f5f6f8);
	color: var(--wp--preset--color--navy, #111827);
	text-decoration: none;
	font-size: 1.1rem;
	line-height: 1;
}

.pretzo-cart .product-remove a.remove:hover {
	background: #fdf2f2;
	color: #c0392b;
}

/* ---------- Coupon + update-cart row ---------- */

.pretzo-cart .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: var(--wp--preset--spacing--md, 1.5rem) 0;
}

.pretzo-cart .coupon label {
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted, #4b5563);
}

.pretzo-cart .coupon #coupon_code {
	flex: 1 1 220px;
	min-height: 44px;
	padding: 0.6em 0.9em;
	border: 1px solid var(--wp--preset--color--border, #e2e5ea);
	border-radius: var(--wp--custom--radius--md, 10px);
	font-size: 1rem;
}

.pretzo-cart .coupon .button,
.pretzo-cart button[name="update_cart"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6em 1.5em;
	border: 2px solid var(--wp--preset--color--navy, #111827);
	border-radius: var(--wp--custom--radius--md, 10px);
	background: transparent;
	color: var(--wp--preset--color--navy, #111827);
	font-weight: 600;
	cursor: pointer;
}

.pretzo-cart .coupon .button:hover,
.pretzo-cart button[name="update_cart"]:hover {
	background: var(--wp--preset--color--navy, #111827);
	color: var(--wp--preset--color--white, #fff);
}

/* ---------- Cart totals ---------- */

.pretzo-cart .cart-collaterals {
	display: flex;
	justify-content: flex-end;
}

.pretzo-cart .cart_totals {
	width: 100%;
	max-width: 420px;
	padding: var(--wp--preset--spacing--md, 1.5rem);
	background: var(--wp--preset--color--surface, #f5f6f8);
	border: 1px solid var(--wp--preset--color--border, #e2e5ea);
	border-radius: var(--wp--custom--radius--lg, 16px);
}

.pretzo-cart .cart_totals h2 {
	font-size: var(--wp--preset--font-size--h3);
	margin-bottom: 0.6em;
}

.pretzo-cart .cart_totals table.shop_table {
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
}

.pretzo-cart .cart_totals table.shop_table th,
.pretzo-cart .cart_totals table.shop_table td {
	padding: 0.6em 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e5ea);
}

.pretzo-cart .cart_totals .order-total th,
.pretzo-cart .cart_totals .order-total td {
	border-bottom: none;
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 700;
	color: var(--wp--preset--color--navy, #111827);
}

.pretzo-cart .cart_totals .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pretzo-cart .wc-proceed-to-checkout {
	margin-top: 0.5rem;
}

.pretzo-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.9em 1.5em;
	border-radius: var(--wp--custom--radius--md, 10px);
	background: var(--wp--preset--color--blue, #007bff);
	color: var(--wp--preset--color--white, #fff);
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 700;
	text-decoration: none;
	text-align: center;
}

.pretzo-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--blue, #007bff) 85%, black);
}

/* ---------- "Verder winkelen" ---------- */

.pretzo-cart .return-to-shop .button,
.pretzo-cart .woocommerce-cart-form ~ p .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7em 1.5em;
	border-radius: var(--wp--custom--radius--md, 10px);
	background: transparent;
	border: 2px solid var(--wp--preset--color--navy, #111827);
	color: var(--wp--preset--color--navy, #111827);
	text-decoration: none;
	font-weight: 600;
}

.pretzo-cart .return-to-shop .button:hover,
.pretzo-cart .woocommerce-cart-form ~ p .button:hover {
	background: var(--wp--preset--color--navy, #111827);
	color: var(--wp--preset--color--white, #fff);
}

/* ---------- Empty cart ---------- */

.pretzo-cart .cart-empty {
	padding: 2rem 0;
	font-size: var(--wp--preset--font-size--h4);
}

.pretzo-cart .wc-empty-cart-message {
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
}

/* ---------- Responsive ---------- */

@media (min-width: 782px) {
	.pretzo-cart .cart_totals {
		margin-top: 0;
	}
}

@media (max-width: 781px) {
	/*
	 * WooCommerce's eigen `shop_table_responsive` doet dit al met
	 * `data-title`-attributen + CSS `content: attr(data-title)`, maar
	 * die overlay-regel zit in WooCommerce's eigen frontend-CSS die dit
	 * theme niet laadt. Native, eenvoudiger alternatief zonder JS: de
	 * header verbergen en elke cel op een eigen regel tonen — leesbaar
	 * zonder afhankelijkheid van WooCommerce's kern-stylesheet.
	 */
	.pretzo-cart table.cart thead {
		display: none;
	}

	.pretzo-cart table.cart,
	.pretzo-cart table.cart tbody,
	.pretzo-cart table.cart tr,
	.pretzo-cart table.cart td {
		display: block;
		width: 100%;
	}

	.pretzo-cart table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 72px 1fr;
		gap: 0.25em 1em;
		padding: 1em 0;
		border-bottom: 1px solid var(--wp--preset--color--border, #e2e5ea);
	}

	.pretzo-cart table.cart td {
		border-bottom: none;
		padding: 0.15em 0;
	}

	.pretzo-cart table.cart td.product-thumbnail {
		grid-row: 1 / span 4;
	}

	.pretzo-cart table.cart td.product-remove {
		grid-column: 2;
		text-align: left;
	}

	.pretzo-cart .cart-collaterals {
		justify-content: stretch;
	}

	.pretzo-cart .cart_totals {
		max-width: 100%;
	}

	.pretzo-cart .coupon #coupon_code {
		flex: 1 1 100%;
	}
}