/**
 * Winkelwagen op mobiel.
 *
 * Per artikel: titel, daaronder "Op voorraad" op één regel, daaronder
 * "klaar om af te halen of te versturen", en onder die regel het aantal
 * (− 1 +), de prijs en het prullenbakje. Daaronder het totaalblok over de
 * volle breedte.
 *
 * Geladen na afrekenen.css en shop.css, alleen op de winkelwagenpagina
 * (inc/enqueue.php). Maten staan in :root.
 */
:root {
	--wagen-mobiel-beeld: 4rem;    /* productfoto */
	--wagen-mobiel-gat:   0.75rem; /* ruimte tussen de onderdelen van een regel */
}

@media (max-width: 640px) {

	.winkelwagen { gap: var(--ruimte-s); }

	.wagenregels { padding: 0.2rem 1rem; }

	.winkelwagen .wagenregel {
		grid-template-columns: 1.2rem var(--wagen-mobiel-beeld) minmax(0, 1fr) auto 2rem;
		grid-template-areas:
			"kies beeld info   info  info"
			"kies aantal aantal prijs weg";
		column-gap: var(--wagen-mobiel-gat);
		row-gap: 0.7rem;
		align-items: center;
	}

	.winkelwagen .wagenregel__kies   { grid-area: kies; }
	.winkelwagen .wagenregel__beeld  { grid-area: beeld; align-self: start; }
	.winkelwagen .wagenregel__info   { grid-area: info; min-width: 0; }
	.winkelwagen .wagenregel__aantal { grid-area: aantal; grid-column: auto; justify-self: start; }
	.winkelwagen .wagenregel__prijs  { grid-area: prijs; grid-column: auto; grid-row: auto; }
	.winkelwagen .wagenregel__weg    { grid-area: weg; justify-self: end; }

	.winkelwagen .wagenregel__beeld img {
		width: var(--wagen-mobiel-beeld);
		height: var(--wagen-mobiel-beeld);
	}

	/* Op voorraad op één regel, de levering eronder, zonder streepje. */
	.wagenregel__voorraad { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.35; }
	.wagenregel__groen,
	.wagenregel__rood { white-space: nowrap; }
	.wagenregel__streep { display: none; }

	.wagenregel__aantal .quantity .kwdv-stap { width: 2rem; height: 2.2rem; }
	.wagenregel__aantal .quantity input.qty { width: 2.2rem; height: 2.2rem; }
	.wagenregel__prijs { font-size: 1rem; }

	/* Totaalblok over de volle breedte, knop en iconen netjes gecentreerd. */
	.wagentotaal { position: static; width: 100%; padding: 1.1rem 1rem; box-sizing: border-box; }
	.wagentotaal__titel { font-size: 1.25rem; }
	.wagentotaal__knop .button,
	.wagentotaal__knop .checkout-button { width: 100%; box-sizing: border-box; white-space: normal; }
	.wagentotaal__iconen .shopbetaal__lijst { flex-wrap: wrap; }

	.winkelwagen__weg { width: 100%; justify-content: center; }
}