/*!
 * Custom Winkelmand – opmaak van charmins.nl.
 *
 * De productcontainers in een grid, met als laatste cel de card met het subtotaal en de knop naar afrekenen. De
 * opmaak komt uit de bestaande mini-cart-CSS van charmins.nl. Kleuren en lettertypes blijven gekoppeld aan de
 * globale Elementor-instellingen (--e-global-…); de waarde na de komma is de huidige waarde, als fallback buiten
 * Elementor. De iconen komen uit /wp-content/uploads/2026/02/, net als nu.
 *
 * Grid aanpassen:  .cwm { --cwm-kolom: 360px; --cwm-gap: 8px; }   (minimale kolombreedte en tussenruimte)
 * Vaste kolommen:  [custom_winkelmand kolommen="2"]
 * Card verplaatsen: .cwm .cwm-totaal { grid-column: 1 / -1; }      (bijv. over de volle breedte onder de producten)
 *
 * Uitzetten: add_filter( 'custom_winkelmand_load_css', '__return_false' );
 * Aanpassen: kopieer dit bestand naar jouw-thema/custom-winkelmand/winkelmand.css.
 * :not(#cwm) verhoogt alleen de specificiteit, zodat knop- en invoerstijlen van het thema niet doorlekken.
 */

.cwm {
	--cwm-ink: var(--e-global-color-3885d94, #2b030b);    /* merk, prijs */
	--cwm-tekst: var(--e-global-color-secondary, #676767); /* producttitel, aantal, pijltjes */
	--cwm-lijn: var(--e-global-color-0a264cb, #e0e0e0);    /* randen */
	--cwm-grijs: var(--e-global-color-accent, #bbbbbb);     /* prullenbak */
	--cwm-wijn: var(--e-global-color-bbb6b8b, #600e23);     /* tekst maatlabel, meldingen */
	--cwm-blush: var(--e-global-color-8fa1963, #fbdfe2);    /* achtergrond maatlabel, meldingen */
	--cwm-sans: var(--e-global-typography-3fc14e7-font-family, "General Sans"), sans-serif;
	--cwm-kolom: 360px;
	--cwm-gap: 8px;
}

.cwm .cwm-body:focus {
	outline: none;
}

/* Prijzen zonder €-teken, zoals in de huidige winkelmand */
.cwm .woocommerce-Price-currencySymbol {
	display: none;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Grid
 * ------------------------------------------------------------------------------------------------------------- */
.cwm .cwm-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cwm-kolom)), 1fr));
	gap: var(--cwm-gap);
}

.cwm--kolommen .cwm-items {
	grid-template-columns: repeat(var(--cwm-kolommen), minmax(0, 1fr));
}

@media (max-width: 767px) {
	.cwm--kolommen .cwm-items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * Container per product
 * ------------------------------------------------------------------------------------------------------------- */
.cwm .woo_amc_item_wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	border: none;
	background: transparent;
	color: #232323;
	font-size: 16px;
	transition: opacity 0.3s, transform 0.3s;
}

.cwm .woo_amc_item {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid var(--cwm-lijn);
	background: #fff;
}

.cwm .woo_amc_item .woo_amc_img {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	width: 127px;
	height: 127px;
	box-sizing: border-box;
}

.cwm .woo_amc_img a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cwm .woo_amc_img a img,
.cwm .woo_amc_img img {
	display: block;
	max-width: 58px;
	width: 100%;
	height: auto;
	object-fit: contain;
	transition: filter 0.2s, opacity 0.2s;
}

/* Even hoge containers in een rij: info bovenaan, aantal onderaan (zie .woo_amc_hoeveelheid) */
.cwm .woo_amc_item .woo_amc_container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-self: stretch;
	flex-grow: 1;
	gap: 0;
	min-width: 0;
	border-left: 1px solid var(--cwm-lijn);
}

.cwm .woo_amc_item .woo_amc_info {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
	padding: 16px;
}

.cwm .woo_amc_merk_wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
}

.cwm .woo_amc_merk {
	font-family: var(--e-global-typography-4e7e568-font-family, "Sintony"), sans-serif;
	font-size: var(--e-global-typography-4e7e568-font-size, 1rem);
	font-weight: var(--e-global-typography-4e7e568-font-weight, 400);
	text-transform: var(--e-global-typography-4e7e568-text-transform, uppercase);
	line-height: var(--e-global-typography-4e7e568-line-height, 1.2em);
	letter-spacing: var(--e-global-typography-4e7e568-letter-spacing, -0.02em);
	word-spacing: var(--e-global-typography-4e7e568-word-spacing, normal);
	color: var(--cwm-ink);
}

.cwm .woo_amc_merk_wrapper .woo_amc_maat,
.cwm .woo_amc_badge {
	padding: 3px 6px;
	border-radius: 8px;
	font-family: var(--e-global-typography-e1dc14f-font-family, "General Sans"), sans-serif;
	font-size: var(--e-global-typography-e1dc14f-font-size, 0.75rem);
	font-weight: var(--e-global-typography-e1dc14f-font-weight, 400);
	text-transform: var(--e-global-typography-e1dc14f-text-transform, none);
	line-height: 1em;
	white-space: nowrap;
}

.cwm .woo_amc_merk_wrapper .woo_amc_maat {
	color: var(--cwm-wijn);
	background-color: var(--cwm-blush);
}

/* Labels bij een probleem of nabestelling, naast merk en maat */
.cwm .woo_amc_badge--error {
	color: var(--cwm-blush);
	background-color: var(--cwm-wijn);
}

.cwm .woo_amc_badge--info {
	color: var(--cwm-tekst);
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--cwm-lijn);
}

.cwm .woo_amc_prijs {
	text-align: right;
}

.cwm .woo_amc_prijs * {
	font-family: var(--e-global-typography-fc20fe5-font-family, "General Sans"), sans-serif;
	font-size: var(--e-global-typography-fc20fe5-font-size, 1rem);
	font-weight: var(--e-global-typography-fc20fe5-font-weight, 500);
	text-transform: var(--e-global-typography-fc20fe5-text-transform, none);
	line-height: var(--e-global-typography-fc20fe5-line-height, 1.2em);
	letter-spacing: var(--e-global-typography-fc20fe5-letter-spacing, normal);
	word-spacing: var(--e-global-typography-fc20fe5-word-spacing, normal);
	color: var(--cwm-ink);
}

.cwm .woo_amc_prijs del,
.cwm .woo_amc_prijs del * {
	font-weight: 400;
	color: var(--cwm-grijs);
}

.cwm .woo_amc_title {
	width: 100%;
}

.cwm .woo_amc_title a {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 230px;
	height: auto;
	font-family: var(--e-global-typography-3fc14e7-font-family, "General Sans"), sans-serif;
	font-size: var(--e-global-typography-3fc14e7-font-size, 0.875rem);
	font-weight: var(--e-global-typography-3fc14e7-font-weight, 400);
	text-transform: var(--e-global-typography-3fc14e7-text-transform, none);
	line-height: var(--e-global-typography-3fc14e7-line-height, 1.38em);
	letter-spacing: var(--e-global-typography-3fc14e7-letter-spacing, normal);
	word-spacing: var(--e-global-typography-3fc14e7-word-spacing, normal);
	color: var(--cwm-tekst);
	text-decoration: none;
}

.cwm .woo_amc_meta {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--cwm-sans);
	font-size: 0.75rem;
	line-height: 1.38em;
	color: var(--cwm-tekst);
}

/* Aantal en verwijderen */
.cwm .woo_amc_hoeveelheid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding: 16px;
	border-top: 1px solid var(--cwm-lijn);
}

.cwm .woo_amc_item_quanity_wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.cwm .woo_amc_item_quanity_minus,
.cwm .woo_amc_item_quanity_plus {
	display: flex;
	width: 12px;
	height: 12px;
	vertical-align: middle;
	cursor: pointer;
	background-color: var(--cwm-tekst);
	-webkit-mask: url(/wp-content/uploads/2026/02/uitklappen-icon.svg) no-repeat center center;
	mask: url(/wp-content/uploads/2026/02/uitklappen-icon.svg) no-repeat center center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: opacity 0.15s;
}

.cwm .woo_amc_item_quanity_plus {
	transform: rotate(180deg);
}

.cwm .woo_amc_item_quanity_update.is-disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* De breedte staat inline op het veld (12px per cijfer), net als bij de oude mini-cart. */
.cwm input.woo_amc_item_quanity:not(#cwm) {
	box-sizing: content-box;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 3px;
	outline: 0;
	box-shadow: none;
	background: #fff;
	color: var(--cwm-tekst);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	vertical-align: top;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.cwm input.woo_amc_item_quanity:not(#cwm)::-webkit-outer-spin-button,
.cwm input.woo_amc_item_quanity:not(#cwm)::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.cwm .woo_amc_item_delete {
	display: flex;
	flex-shrink: 0;
	width: 16px;
	height: 18px;
	margin-left: auto;
	cursor: pointer;
	background-color: var(--cwm-grijs);
	-webkit-mask: url(/wp-content/uploads/2026/02/prullenbak.svg) no-repeat center right;
	mask: url(/wp-content/uploads/2026/02/prullenbak.svg) no-repeat center right;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 0.15s;
}

.cwm .woo_amc_item_delete:hover {
	background-color: var(--cwm-wijn);
}

/* Statussen per product */
.cwm .woo_amc_item_wrap.is-removing {
	opacity: 0;
	transform: scale(0.96);
	pointer-events: none;
}

.cwm .woo_amc_item_wrap.has-problem--out_of_stock .woo_amc_img img,
.cwm .woo_amc_item_wrap.has-problem--not_purchasable .woo_amc_img img {
	filter: grayscale(1);
	opacity: 0.5;
}

/* Meldingen bij een product: een extra regel in de container, net als het aantal */
.cwm .woo_amc_item_notices {
	border-top: 1px solid var(--cwm-lijn);
}

.cwm .woo_amc_item_notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0;
	padding: 12px 16px;
	font-family: var(--cwm-sans);
	font-size: 0.875rem;
	line-height: 1.38em;
	color: var(--cwm-tekst);
}

.cwm .woo_amc_item_notice + .woo_amc_item_notice {
	border-top: 1px solid var(--cwm-lijn);
}

.cwm .woo_amc_item_notice--error {
	color: var(--cwm-wijn);
	background-color: var(--cwm-blush);
}

.cwm .woo_amc_item_notice--warning {
	color: var(--cwm-ink);
	background-color: #f7f5f5;
}

.cwm .woo_amc_item_notice--info {
	color: var(--cwm-tekst);
	background-color: #fafafa;
}

.cwm .woo_amc_item_notice_action:not(#cwm),
.cwm .cwm-notice__close:not(#cwm) {
	all: unset;
	box-sizing: border-box;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.cwm .woo_amc_item_notice_action:not(#cwm) {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Card met het subtotaal en de knop naar afrekenen
 *
 * Markup en opmaak van de footer van de mini-cart (.woo_amc_footer). In de mini-cart staat die vast onderaan het
 * paneel; hier is het een card in het grid, met dezelfde rand als de productcontainers.
 * ------------------------------------------------------------------------------------------------------------- */
.cwm .woo_amc_footer.cwm-totaal {
	position: relative;
	inset: auto;
	display: flex;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--cwm-lijn);
	border-radius: 8px;
	background: #fff;
	transition: none;
}

.cwm .cwm-totaal .woo_amc_flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	width: 100%;
}

/* Is de rij hoger dan de card (een product met een melding), dan blijft de knop onderaan staan. */
.cwm .cwm-totaal .woo_amc_center {
	flex: 1 1 auto;
	justify-content: space-between;
	margin: 0;
}

.cwm .cwm-totaal .woo_amc_footer_lines {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
}

.cwm .cwm-totaal .woo_amc_footer_lines:has(.woo_amc_free_shipping_notice:not(:empty)) {
	gap: 12px;
}

.cwm .cwm-totaal .woo_amc_footer_total {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.cwm .cwm-totaal .woo_amc_value {
	display: flex;
	flex-direction: row;
	gap: 4px;
}

.cwm .cwm-totaal .woo_amc_value::after {
	content: "EUR";
}

.cwm .cwm-totaal .woo_amc_footer_total .woo_amc_label,
.cwm .cwm-totaal .woo_amc_footer_total .woo_amc_value *,
.cwm .cwm-totaal .woo_amc_footer_total .woo_amc_value::after {
	font-family: var(--e-global-typography-2ac2622-font-family, "Sintony"), sans-serif;
	font-size: var(--e-global-typography-2ac2622-font-size, 1.125rem);
	font-weight: var(--e-global-typography-2ac2622-font-weight, 400);
	text-transform: var(--e-global-typography-2ac2622-text-transform, uppercase);
	line-height: var(--e-global-typography-2ac2622-line-height, 1em);
	letter-spacing: var(--e-global-typography-2ac2622-letter-spacing, -0.04em);
	color: var(--cwm-ink);
}

/* Melding over gratis verzending (bij zakelijk: "Besteed nog … en krijg gratis verzending!") */
.cwm .cwm-totaal .woo_amc_free_shipping_notice,
.cwm .cwm-totaal .charmins-free-shipping-notice {
	font-family: var(--e-global-typography-64299bd-font-family, "General Sans"), sans-serif;
	font-size: var(--e-global-typography-64299bd-font-size, 1rem);
	font-weight: var(--e-global-typography-64299bd-font-weight, 400);
	text-transform: var(--e-global-typography-64299bd-text-transform, none);
	line-height: var(--e-global-typography-64299bd-line-height, 1.2em);
	color: var(--cwm-tekst);
}

.cwm .cwm-totaal .woo_amc_footer_w50 {
	width: 100%;
}

.cwm a.woo_afrekenen:not(#cwm) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	padding: 20px 28px;
	border-radius: 4px;
	background-color: var(--cwm-wijn);
	color: var(--cwm-blush);
	font-family: var(--e-global-typography-4e7e568-font-family, "Sintony"), sans-serif;
	font-size: var(--e-global-typography-4e7e568-font-size, 1rem);
	font-weight: var(--e-global-typography-4e7e568-font-weight, 400);
	text-transform: var(--e-global-typography-4e7e568-text-transform, uppercase);
	line-height: var(--e-global-typography-4e7e568-line-height, 1.2em);
	letter-spacing: var(--e-global-typography-4e7e568-letter-spacing, -0.02em);
	text-decoration: none;
	transition: background-color 0.15s, opacity 0.15s;
}

/* Slotje vóór de tekst, net als in de mini-cart */
.cwm a.woo_afrekenen:not(#cwm)::before {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 18px;
	background-color: var(--e-global-color-3e96f4a, #f6a9b4);
	-webkit-mask: url(/wp-content/uploads/2026/02/slot.svg) no-repeat center center;
	mask: url(/wp-content/uploads/2026/02/slot.svg) no-repeat center center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.cwm a.woo_afrekenen:not(#cwm):hover {
	background-color: var(--cwm-ink);
	color: var(--cwm-blush);
}

/* Er wordt nog een aantal opgeslagen voordat de klant doorgaat naar afrekenen. */
.cwm--leaving a.woo_afrekenen:not(#cwm) {
	opacity: 0.6;
	pointer-events: none;
}

@media (max-width: 767px) {
	.cwm .woo_amc_footer.cwm-totaal {
		padding: 20px;
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * Meldingen zonder product (bijv. "… is verwijderd omdat het niet meer leverbaar is") en lege winkelmand
 * ------------------------------------------------------------------------------------------------------------- */
.cwm .cwm-notices {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: var(--cwm-gap);
}

.cwm .cwm-notice {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	font-family: var(--cwm-sans);
	font-size: 0.875rem;
	line-height: 1.38em;
	color: var(--cwm-wijn);
	background-color: var(--cwm-blush);
}

.cwm .cwm-notice a {
	color: inherit;
	font-weight: 500;
}

.cwm .cwm-notice__close:not(#cwm) {
	font-size: 1.25rem;
	line-height: 1;
	opacity: 0.7;
}

.cwm .cwm-notice__close:not(#cwm):hover {
	opacity: 1;
}

.cwm .cwm-empty {
	margin: 0;
	font-family: var(--e-global-typography-64299bd-font-family, "General Sans"), sans-serif;
	font-size: var(--e-global-typography-64299bd-font-size, 1rem);
	line-height: var(--e-global-typography-64299bd-line-height, 1.2em);
	color: var(--cwm-tekst);
}

/* ---------------------------------------------------------------------------------------------------------------
 * Toetsenbord, schermlezers, minder beweging
 * ------------------------------------------------------------------------------------------------------------- */
.cwm [role="button"]:focus-visible,
.cwm a:focus-visible {
	outline: 2px solid var(--cwm-wijn);
	outline-offset: 2px;
}

.cwm .woo_amc_item_notice_action:not(#cwm):focus-visible,
.cwm .cwm-notice__close:not(#cwm):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

.cwm-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cwm *,
	.cwm *::before,
	.cwm *::after {
		transition: none !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}