/**
 * Winkelwagenpagina — styling in lijn met het checkout-design (checkout-steps.css).
 * Hoort bij inc/cart-page.php.
 */

:root {
	--hps-cart-accent: #3caf66;
	--hps-cart-accent-dark: #339a57;
	--hps-cart-ink: #1d1d1b;
	--hps-cart-ink-soft: #5a5a57;
	--hps-cart-muted: #8a8a86;
	--hps-cart-border: #e2e2e2;
	--hps-cart-field-border: #d5d9dd;
}

/* ── Layout: tabel links, totalen rechts (zoals de checkout-samenvatting) ─
   De cart-shortcode staat in een Elementor-pagina (.elementor-shortcode);
   .entry-content is de fallback voor een klassieke pagina-template. */
.woocommerce-cart .elementor-shortcode > .woocommerce,
.woocommerce-cart .entry-content > .woocommerce {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 40px;
	align-items: start;
}
.woocommerce-cart .elementor-shortcode > .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .elementor-shortcode > .woocommerce > .cross-sells,
.woocommerce-cart .entry-content > .woocommerce > .cross-sells,
.woocommerce-cart .elementor-shortcode > .woocommerce > .wc-empty-cart-message,
.woocommerce-cart .entry-content > .woocommerce > .wc-empty-cart-message,
.woocommerce-cart .elementor-shortcode > .woocommerce > .return-to-shop,
.woocommerce-cart .entry-content > .woocommerce > .return-to-shop {
	grid-column: 1 / -1;
}
@media (max-width: 991.98px) {
	.woocommerce-cart .elementor-shortcode > .woocommerce,
	.woocommerce-cart .entry-content > .woocommerce { grid-template-columns: 1fr; gap: 26px; }
}

/* ── Succesmelding ("… is toegevoegd") rustiger en in de huisstijl ─────── */
.woocommerce-cart .woocommerce-message {
	border: 1px solid var(--hps-cart-border);
	border-left: 4px solid var(--hps-cart-accent);
	border-radius: 8px;
	background: #fff;
	color: var(--hps-cart-ink);
}

/* ── Productentabel als kaart ─────────────────────────────────────────── */
.woocommerce-cart form.woocommerce-cart-form {
	border: 1px solid var(--hps-cart-border);
	border-radius: 10px;
	background: #fff;
	padding: 8px 20px 20px;
}
.woocommerce-cart .shop_table.cart { width: 100%; border: 0; border-collapse: collapse; margin: 0; }
.woocommerce-cart .shop_table.cart th {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--hps-cart-ink);
	text-align: left;
	padding: 14px 10px;
	border-bottom: 1px solid var(--hps-cart-border);
}
.woocommerce-cart .shop_table.cart td {
	padding: 16px 10px;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	text-align: left;
}
.woocommerce-cart .shop_table.cart .product-thumbnail img {
	width: 72px;
	height: auto;
	border: 1px solid #f0f0f0;
	border-radius: 8px;
}
.woocommerce-cart .shop_table.cart .product-name a {
	font-weight: 600;
	color: var(--hps-cart-ink);
	text-decoration: none;
}
.woocommerce-cart .shop_table.cart .product-name a:hover { color: var(--hps-cart-accent-dark); }
.woocommerce-cart .shop_table.cart .product-name .variation {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--hps-cart-ink-soft);
}
.woocommerce-cart .shop_table.cart .product-price,
.woocommerce-cart .shop_table.cart .product-subtotal { white-space: nowrap; }
.woocommerce-cart .shop_table.cart .product-subtotal { font-weight: 700; }
.woocommerce-cart .shop_table.cart a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--hps-cart-muted) !important;
	font-size: 18px;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.woocommerce-cart .shop_table.cart a.remove:hover {
	background: #fdeeeb;
	color: #e0523f !important;
}

/* Aantal-veld: zelfde maat/rand als de checkout-velden. */
.woocommerce-cart .shop_table.cart .quantity .qty {
	width: 74px;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--hps-cart-field-border);
	border-radius: 6px;
	text-align: center;
}
.woocommerce-cart .shop_table.cart .quantity .qty:focus {
	border-color: var(--hps-cart-accent);
	box-shadow: 0 0 0 1px rgba(60, 175, 102, .25);
	outline: none;
}

/* ── Actiebalk: kortingscode + bijwerken ──────────────────────────────── */
.woocommerce-cart .shop_table.cart td.actions { padding: 18px 10px 0; border-bottom: 0; }
.woocommerce-cart .shop_table.cart td.actions .coupon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	float: left;
}
.woocommerce-cart .shop_table.cart td.actions .coupon label { margin: 0; font-weight: 600; }
.woocommerce-cart .shop_table.cart td.actions .coupon .input-text {
	width: 170px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--hps-cart-field-border);
	border-radius: 6px;
}
.woocommerce-cart .shop_table.cart td.actions .btn {
	min-height: 44px;
	border-radius: 6px;
	font-weight: 600;
	color: var(--hps-cart-accent-dark);
	border-color: var(--hps-cart-accent);
	background: #fff;
}
.woocommerce-cart .shop_table.cart td.actions .btn:hover:not(:disabled) {
	background: var(--hps-cart-accent);
	border-color: var(--hps-cart-accent);
	color: #fff;
}
.woocommerce-cart .shop_table.cart td.actions > .btn { float: right; }
.woocommerce-cart .shop_table.cart td.actions::after { content: ""; display: table; clear: both; }

/* ── Totalen-kaart rechts (zoals checkout-samenvatting) ───────────────── */
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
	border: 1px solid var(--hps-cart-border);
	border-radius: 10px;
	background: #fff;
	padding: 20px;
	position: sticky;
	top: 20px;
}
.woocommerce-cart .cart-collaterals .cart_totals > h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--hps-cart-ink);
}
.woocommerce-cart .cart_totals .shop_table { width: 100%; border: 0; border-collapse: collapse; }
.woocommerce-cart .cart_totals .shop_table th,
.woocommerce-cart .cart_totals .shop_table td {
	padding: 8px 0;
	font-size: 14px;
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	text-align: left;
}
.woocommerce-cart .cart_totals .shop_table td { text-align: right; }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td { font-weight: 700; font-size: 15px; border-bottom: 0; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination { font-size: 13px; color: var(--hps-cart-muted); }

/* Afrekenknop: identiek aan de bestelknop in de checkout. */
.woocommerce-cart .wc-proceed-to-checkout { padding: 14px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	background: var(--hps-cart-accent);
	border-color: var(--hps-cart-accent);
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	padding: 15px 24px;
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--hps-cart-accent-dark);
	border-color: var(--hps-cart-accent-dark);
	color: #fff;
}

/* ── Cross-sells over de volle breedte onder het grid ─────────────────── */
.woocommerce-cart .cross-sells > h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--hps-cart-ink);
	margin: 10px 0 18px;
}

/* ── Mobiel: gestapelde rijen van de responsive tabel netjes ──────────── */
@media (max-width: 767.98px) {
	.woocommerce-cart form.woocommerce-cart-form { padding: 4px 14px 14px; }
	.woocommerce-cart .shop_table.cart td.actions .coupon { float: none; width: 100%; }
	.woocommerce-cart .shop_table.cart td.actions .coupon .input-text { flex: 1 1 auto; width: auto; }
	.woocommerce-cart .shop_table.cart td.actions > .btn { float: none; width: 100%; margin-top: 10px; }
}