/* DQ Winkelwagen: opmaak van de winkelwagentabel (Total + WooCommerce). */

.woocommerce-cart-form {
	--dq-ww-lijn: #ececec;
	--dq-ww-zacht: #6b6b6b;
	--dq-ww-vlak: #f7f7f7;
}

/* ---------- Algemeen (alle schermen) ---------- */

.woocommerce-cart-form table.shop_table tr.cart_item td {
	vertical-align: middle;
}

/* Onderdelen van een set: ingeklapt of compact. */
.woocommerce-cart-form table.shop_table tr.dq-set-onderdeel.dq-ingeklapt {
	display: none !important;
}

.woocommerce-cart-form table.shop_table tr.dq-set-onderdeel td {
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 13px;
	color: var(--dq-ww-zacht);
	border: 0;
}

.woocommerce-cart-form table.shop_table tr.dq-set-onderdeel td.product-name a:not(.tm-cart-edit-options) {
	color: inherit;
	font-weight: 400;
}

.woocommerce-cart-form table.shop_table tr.dq-set-onderdeel .product-thumbnail img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

/* "Deel van: <set>" is overbodig nu de onderdelen onder de set staan. */
.woocommerce-cart-form tr.dq-set-onderdeel dl.variation .variation-Deelvan {
	display: none;
}

.woocommerce-cart-form tr.dq-set-onderdeel .tm-cart-edit-options {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
}

.woocommerce-cart-form table.shop_table tr.dq-set-toggle td {
	padding: 0 0 12px;
	border: 0;
	text-align: left;
}

.woocommerce-cart-form .dq-set-knop {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 420px;
	margin: 0;
	padding: 9px 12px;
	min-height: 0;
	background: var(--dq-ww-vlak);
	border: 0;
	border-radius: 8px;
	color: #111;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s;
}

.woocommerce-cart-form .dq-set-knop-tekst {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.woocommerce-cart-form .dq-set-knop-aantal {
	flex: none;
	padding: 2px 8px;
	background: #fff;
	border-radius: 999px;
	color: var(--dq-ww-zacht);
	font-size: 12px;
	font-weight: 500;
}

/* Pijltje. */
.woocommerce-cart-form .dq-set-knop::after {
	content: '';
	flex: none;
	width: 6px;
	height: 6px;
	margin: 0 2px 0 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s;
}

.woocommerce-cart-form .dq-set-knop[aria-expanded="true"]::after {
	transform: translateY(1px) rotate(-135deg);
}

.woocommerce-cart-form .dq-set-knop:hover,
.woocommerce-cart-form .dq-set-knop:focus-visible {
	background: #efefef;
	color: #111;
}

.woocommerce-cart-form .dq-set-knop:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

/* Extra Product Options: de totaalrij van een onderdeel herhaalt alleen het aantal. */
.woocommerce-cart-form table.shop_table tr.dq-set-onderdeel.tc-epo-cart-row-total {
	display: none !important;
}

/* ---------- Desktop ---------- */

@media only screen and (min-width: 768px) {
	/* Prijs en subtotaal van een onderdeel horen bij de set (Extra Product Options toont ze toch). */
	.woocommerce-cart-form table.shop_table tr.dq-set-onderdeel td.product-price,
	.woocommerce-cart-form table.shop_table tr.dq-set-onderdeel td.product-subtotal {
		visibility: hidden;
	}

	/* Product met keuzes: aantal en subtotaal alleen op de totaalrij, geen losse "1" bij elke keuze. */
	.woocommerce-cart-form table.shop_table tr.woocommerce-cart-form__cart-item:not(.dq-set-onderdeel):has(+ tr.tm-epo-cart-row) td.product-quantity,
	.woocommerce-cart-form table.shop_table tr.woocommerce-cart-form__cart-item:not(.dq-set-onderdeel):has(+ tr.tm-epo-cart-row) td.product-subtotal,
	.woocommerce-cart-form table.shop_table tr.tm-epo-cart-row:not(.tc-epo-cart-row-total) td.product-quantity {
		visibility: hidden;
	}

	.woocommerce-cart-form table.shop_table tr.tm-epo-cart-row:not(.tc-epo-cart-row-total) td {
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.woocommerce-cart-form table.shop_table tr.dq-set-onderdeel .product-thumbnail {
		text-align: right;
	}

	.woocommerce-cart-form table.shop_table tr.dq-set-heeft-onderdelen td {
		border-bottom: 0;
	}
}

/* ---------- Mobiel: elk product als compacte kaart ---------- */

@media only screen and (max-width: 767px) {
	.woocommerce-cart-form table.shop_table_responsive {
		border: 0;
	}

	.woocommerce-cart-form table.shop_table_responsive tbody {
		display: block;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"foto naam naam"
			"foto prijs prijs"
			"foto aantal subtotaal";
		column-gap: 12px;
		row-gap: 4px;
		align-items: center;
		padding: 14px 32px 14px 0;
		border-top: 1px solid var(--dq-ww-lijn);
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
		text-align: left;
		min-width: 0;
	}

	/* Geen "Prijs:"/"Subtotaal:"-labels meer voor elke waarde. */
	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td::before {
		content: none !important;
		display: none !important;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-thumbnail {
		grid-area: foto;
		align-self: start;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-thumbnail img {
		display: block;
		width: 72px;
		height: 72px;
		max-width: none;
		object-fit: contain;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-name {
		grid-area: naam;
		font-size: 14px;
		line-height: 1.35;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-name dl.variation {
		margin: 4px 0 0;
		font-size: 12px;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-price {
		grid-area: prijs;
		font-size: 13px;
		color: var(--dq-ww-zacht);
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-quantity {
		grid-area: aantal;
		justify-self: start;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-quantity .quantity {
		margin: 0;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-subtotal {
		grid-area: subtotaal;
		justify-self: end;
		font-weight: 700;
		font-size: 15px;
		white-space: nowrap;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-remove {
		position: absolute;
		top: 12px;
		right: 0;
		width: auto;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td.product-remove a.remove {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		font-size: 18px;
		line-height: 1;
	}

	/* Lege cellen (prijs/subtotaal van onderdelen) nemen geen ruimte in. */
	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td:empty,
	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel td.product-price,
	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel td.product-subtotal,
	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel td.product-remove {
		display: none;
	}

	/* Onderdelen van een set: één regel met kleine foto, naam en aantal. */
	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel {
		grid-template-columns: 40px minmax(0, 1fr) auto;
		grid-template-areas: "foto naam aantal";
		padding: 4px 0 4px 20px;
		border-top: 0;
		row-gap: 0;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel td.product-thumbnail {
		align-self: center;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel td.product-thumbnail img {
		width: 40px;
		height: 40px;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel td.product-name {
		font-size: 13px;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel td.product-quantity {
		justify-self: end;
		font-size: 13px;
		color: var(--dq-ww-zacht);
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel td.product-quantity::after {
		content: '×';
		margin-left: 1px;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-toggle {
		display: block;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-toggle td::before {
		content: none !important;
		display: none !important;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-toggle td.dq-leeg {
		display: none;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-toggle td.dq-knop-cel {
		display: block;
		padding: 0 0 14px 84px;
	}

	/* Extra Product Options: een product met keuzes staat verdeeld over een productrij, een rij per keuze
	 * en een totaalrij met het aantal en het subtotaal. */
	.woocommerce-cart-form table.shop_table_responsive tr.cart_item.woocommerce-cart-form__cart-item:has(+ tr.tm-epo-cart-row) {
		grid-template-areas:
			"foto naam naam"
			"foto prijs prijs";
		padding-bottom: 6px;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item.woocommerce-cart-form__cart-item:has(+ tr.tm-epo-cart-row) td.product-quantity,
	.woocommerce-cart-form table.shop_table_responsive tr.cart_item.woocommerce-cart-form__cart-item:has(+ tr.tm-epo-cart-row) td.product-subtotal {
		display: none;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.tm-epo-cart-row {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas: ". naam naam";
		padding: 0 32px 4px 0;
		border-top: 0;
		row-gap: 0;
	}

	/* Overschrijft ".woocommerce table.shop_table .tm-epo-cart-row-product + .tm-epo-cart-row td" uit het child theme. */
	.woocommerce .woocommerce-cart-form table.shop_table_responsive tr.tm-epo-cart-row td {
		position: static;
		left: auto;
		width: auto;
		font-style: normal;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.tm-epo-cart-row td:not(.product-name) {
		display: none;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.tm-epo-cart-row td.product-name {
		display: block;
		font-size: 13px;
		line-height: 1.4;
	}

	.woocommerce-cart-form tr.tm-epo-cart-row .tm-epo-cart-option-label,
	.woocommerce-cart-form tr.tm-epo-cart-row .tc-epo-cart-option-value {
		display: inline;
	}

	.woocommerce-cart-form tr.tm-epo-cart-row .tm-epo-cart-option-label {
		font-weight: 600;
	}

	.woocommerce-cart-form tr.tm-epo-cart-row .tm-epo-cart-option-label::after {
		content: ': ';
	}

	.woocommerce-cart-form tr.tm-epo-cart-row .tc-epo-cart-option-value {
		color: var(--dq-ww-zacht);
	}

	.woocommerce-cart-form tr.tm-epo-cart-row .tm-epo-cart-option-mobile {
		display: none;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.tm-epo-cart-row.tc-epo-cart-row-total {
		grid-template-areas: ". aantal subtotaal";
		padding: 6px 32px 14px 0;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.tm-epo-cart-row.tc-epo-cart-row-total td.product-name {
		display: none;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.tm-epo-cart-row.tc-epo-cart-row-total td.product-quantity,
	.woocommerce-cart-form table.shop_table_responsive tr.tm-epo-cart-row.tc-epo-cart-row-total td.product-subtotal {
		display: block;
	}

	/* Keuzes van een onderdeel: kleine regel onder het onderdeel. */
	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel.tm-epo-cart-row {
		grid-template-columns: 40px minmax(0, 1fr);
		grid-template-areas: ". naam";
		padding: 0 0 4px 20px;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel.tm-epo-cart-row td.product-name {
		font-size: 12px;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel.woocommerce-cart-form__cart-item:has(+ tr.tm-epo-cart-row) {
		grid-template-areas: "foto naam aantal";
		padding-bottom: 0;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.dq-set-onderdeel.woocommerce-cart-form__cart-item:has(+ tr.tm-epo-cart-row) td.product-quantity {
		display: block;
	}

	/* Knoppen onder de tabel. */
	.woocommerce-cart-form table.shop_table_responsive tr:not(.cart_item):not(.dq-set-toggle) {
		display: block;
		border-top: 1px solid var(--dq-ww-lijn);
	}

	.woocommerce-cart-form table.shop_table_responsive td.actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 16px 0 0;
		border: 0;
	}

	.woocommerce-cart-form table.shop_table_responsive td.actions::before {
		content: none !important;
	}

	.woocommerce-cart .woocommerce-cart-form td.actions .button.verder-winkelen,
	.woocommerce-cart .woocommerce-cart-form td.actions .button.empty-button {
		flex: 1 1 0;
		float: none;
		margin: 0;
		text-align: center;
		white-space: nowrap;
	}

	.woocommerce-cart .woocommerce-cart-form td.actions .button.update-button {
		flex: 1 1 100%;
		float: none !important;
		width: 100%;
		margin: 0 !important;
	}

	.woocommerce-cart .woocommerce-cart-form td.actions .button.update-button:disabled {
		display: none !important;
	}
}