/*
 * Het zijmandje.
 *
 * Een `<dialog>` die tegen de rand schuift in plaats van in het midden te
 * staan. Het gedrag — Escape sluit, de achtergrond is niet bereikbaar met de
 * tab-toets, de aandacht komt terug — blijft van de browser; dit is alleen
 * weergave.
 */

/* ---------- De zwevende knop ---------- */

.gardenia-mandjeknop {
	position: fixed;
	right: var(--gard-ruimte-4, 1rem);
	bottom: var(--gard-ruimte-4, 1rem);
	z-index: 90;

	display: flex;
	align-items: center;
	gap: var(--gard-ruimte-2, .5rem);

	min-height: var(--gard-raakvlak, 44px);
	padding: var(--gard-ruimte-2, .5rem) var(--gard-ruimte-4, 1rem);

	border: 0;
	border-radius: var(--gard-hoek-rond, 999px);
	background: var(--gard-accent, #8a6a3b);
	color: var(--gard-accent-op, #fff);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--gard-schaduw-3, 0 12px 32px rgba(0, 0, 0, .14));

	/* Onder de veiligheidsrand van een telefoon met een balk onderin. */
	margin-bottom: env(safe-area-inset-bottom, 0);
}

.gardenia-mandjeknop[hidden] { display: none; }

.gardenia-mandjeknop__ico { display: grid; place-items: center; }

.gardenia-mandjeknop__aantal { font-variant-numeric: tabular-nums; }

/* ---------- De lade ---------- */

.gardenia-mandje {
	/*
	 * Een `<dialog>` staat standaard in het midden met een automatische breedte.
	 * `margin: 0 0 0 auto` met volle hoogte maakt er een lade van tegen de
	 * rechterrand — zonder `position: fixed`, zodat de browser hem zelf blijft
	 * plaatsen en de achtergrond blijft afschermen.
	 */
	margin: 0 0 0 auto;
	width: min(26rem, 100%);
	max-width: 100%;
	height: 100%;
	max-height: 100%;

	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--gard-blad, #fff);
	color: var(--gard-inkt, #1c1c1a);
	box-shadow: var(--gard-schaduw-3, 0 12px 32px rgba(0, 0, 0, .14));

	display: flex;
	flex-direction: column;
}

.gardenia-mandje::backdrop { background: rgba(0, 0, 0, .45); }

/*
 * De kop van de lade blijft staan bij het scrollen. Bij een mandje met tien
 * regels verdwijnt de sluitknop anders uit beeld, en dan zoekt de gast naar een
 * manier om eruit te komen.
 */
.gardenia-mandje__kop {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--gard-blad, #fff);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gard-ruimte-3, .75rem);
	padding: var(--gard-ruimte-4, 1rem);
	border-bottom: 1px solid var(--gard-rand, #e2ded4);
}

.gardenia-mandje__titel {
	margin: 0;
	font-size: var(--gard-tekst-l, 1.1rem);
}

.gardenia-mandje__sluit {
	min-width: var(--gard-raakvlak, 44px);
	min-height: var(--gard-raakvlak, 44px);
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.gardenia-mandje__inhoud {
	flex: 1;
	overflow-y: auto;
	padding: var(--gard-ruimte-4, 1rem);

	/* Onder de veiligheidsrand, anders valt de afrekenknop achter de balk. */
	padding-bottom: calc(var(--gard-ruimte-4, 1rem) + env(safe-area-inset-bottom, 0));
}

.gardenia-mandje__inhoud.is-bezig { opacity: .55; }

/* ---------- Regels ---------- */

.gardenia-mandje__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gard-ruimte-3, .75rem);
}

.gardenia-mandje__regel {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--gard-ruimte-3, .75rem);
	padding-bottom: var(--gard-ruimte-3, .75rem);
	border-bottom: 1px solid var(--gard-rand, #e2ded4);
}

.gardenia-mandje__beeld {
	width: 3.25rem;
	height: 3.25rem;
	object-fit: cover;
	border-radius: var(--gard-hoek-s, 6px);
	display: block;
}

.gardenia-mandje__tekst {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.gardenia-mandje__naam { font-weight: 600; }

.gardenia-mandje__keuzes {
	font-size: var(--gard-tekst-s, .82rem);
	color: var(--gard-stil, #6a6a64);
}

.gardenia-mandje__prijs {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*
 * De teller staat onder de regel en niet ernaast: bij een naam van drie regels
 * zou hij anders in het midden zweven, en op een smalle telefoon past het niet.
 */
.gardenia-mandje__teller {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: var(--gard-ruimte-2, .5rem);
}

.gardenia-mandje__knopje {
	min-width: var(--gard-raakvlak, 44px);
	min-height: var(--gard-raakvlak, 44px);
	border: 1px solid var(--gard-rand, #e2ded4);
	border-radius: var(--gard-hoek-rond, 999px);
	background: var(--gard-blad, #fff);
	color: inherit;
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.gardenia-mandje__aantal {
	min-width: 2ch;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.gardenia-mandje__weg {
	margin-left: auto;
	border-style: dashed;
	color: var(--gard-stil, #6a6a64);
}

/* ---------- Meldingen ---------- */

.gardenia-mandje__melding,
.gardenia-mandje__fout,
.gardenia-mandje__leeg {
	margin: var(--gard-ruimte-4, 1rem) 0;
	padding: var(--gard-ruimte-3, .75rem);
	border-radius: var(--gard-hoek, 12px);
	font-size: var(--gard-tekst-s, .88rem);
}

.gardenia-mandje__melding.is-goed { background: var(--gard-accent-zacht, #f6f1e8); }
.gardenia-mandje__melding.is-let  { background: var(--gard-accent-zacht, #f6f1e8); }

.gardenia-mandje__melding.is-fout,
.gardenia-mandje__fout {
	background: var(--gard-fout-zacht, #fdeceb);
	color: var(--gard-fout, #a3231b);
}

.gardenia-mandje__leeg {
	text-align: center;
	color: var(--gard-stil, #6a6a64);
}

/* ---------- Kortingsbon ---------- */

.gardenia-mandje__bon {
	display: flex;
	gap: var(--gard-ruimte-2, .5rem);
	margin: var(--gard-ruimte-4, 1rem) 0;
}

.gardenia-mandje__bon input {
	flex: 1;
	min-width: 0;
	min-height: var(--gard-raakvlak, 44px);
	padding: var(--gard-ruimte-2, .5rem) var(--gard-ruimte-3, .75rem);
	border: 1px solid var(--gard-rand, #e2ded4);
	border-radius: var(--gard-hoek, 12px);
	font: inherit;
}

.gardenia-mandje__bonknop {
	min-height: var(--gard-raakvlak, 44px);
	padding: 0 var(--gard-ruimte-4, 1rem);
	border: 1px solid var(--gard-rand, #e2ded4);
	border-radius: var(--gard-hoek, 12px);
	background: var(--gard-grond, #faf8f4);
	font: inherit;
	cursor: pointer;
}

/* ---------- Voet ---------- */

.gardenia-mandje__voet {
	position: sticky;
	bottom: 0;
	margin-top: var(--gard-ruimte-4, 1rem);
	padding-top: var(--gard-ruimte-3, .75rem);
	border-top: 1px solid var(--gard-rand, #e2ded4);
	background: var(--gard-blad, #fff);
}

.gardenia-mandje__totaal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 var(--gard-ruimte-3, .75rem);
	font-size: var(--gard-tekst-m, 1rem);
}

.gardenia-mandje__totaal strong { font-variant-numeric: tabular-nums; }

.gardenia-mandje__afrekenen {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--gard-raakvlak, 44px);
	border-radius: var(--gard-hoek, 12px);
	background-color: var(--gard-accent, #8a6a3b);
	background-image: var(--gard-glans, none);
	box-shadow: inset 0 1px 0 var(--gard-glansrand, transparent);
	color: var(--gard-accent-op, #fff);
	font-weight: 700;
	text-decoration: none;
}

/* ---------- Telefoon ---------- */

@media (max-width: 640px) {

	/* Volledige breedte: een lade van 26rem naast een scherm van 22rem past niet. */
	.gardenia-mandje { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   De winkelwagen in de kop van het thema

   ── Waarom hier iets moet gebeuren ────────────────────────────────────────

   Elk thema heeft zijn eigen mini-winkelwagen in de kop. Die blijft bestaan
   naast ons zijmandje, en dan zijn er twee winkelwagens op één pagina — met
   twee opmaken en twee plekken waar een gast een aantal kan wijzigen.

   Twee wegen, allebei geldig:

   - staat het zijmandje áán, dan neemt het script de knop in de kop over en
     opent de lade in plaats van het paneel van het thema (zie `mandje.js`)
   - staat het uit, dan blijft het paneel van het thema, maar dan wel in onze
     kleuren — wat hieronder staat
   ═══════════════════════════════════════════════════════════════════════════ */

.widget_shopping_cart_content,
.woocommerce-mini-cart__empty-message {
	color: var(--gard-inkt, #1c1c1a);
	font-size: var(--gard-tekst-s, .9rem);
}

ul.woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 3rem 1fr auto;
	gap: var(--gard-ruimte-3, .75rem);
	align-items: start;
	padding: var(--gard-ruimte-3, .75rem) 0;
	margin: 0;
	border-bottom: 1px solid var(--gard-rand, #e2ded4);
}

ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 3rem;
	height: 3rem;
	margin: 0;
	object-fit: cover;
	border-radius: var(--gard-hoek-s, 6px);
	float: none;
}

/*
 * WooCommerce zet het kruisje `position: absolute` in de rechterbovenhoek. In
 * een raster is dat een element dat over de prijs heen valt — precies het soort
 * "blokken lopen door elkaar" dat je hier ziet.
 */
ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove {
	position: static;
	grid-column: 3;
	grid-row: 1;
	width: var(--gard-raakvlak, 44px);
	height: var(--gard-raakvlak, 44px);
	display: grid;
	place-items: center;
	margin: 0;
	color: var(--gard-stil, #6a6a64);
	background: none;
}

ul.woocommerce-mini-cart li.woocommerce-mini-cart-item .quantity {
	grid-column: 2;
	grid-row: 2;
	color: var(--gard-stil, #6a6a64);
	font-variant-numeric: tabular-nums;
}

.woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	padding: var(--gard-ruimte-3, .75rem) 0;
	margin: 0;
	border-bottom: 1px solid var(--gard-rand, #e2ded4);
	font-weight: 700;
}

.woocommerce-mini-cart__total .amount { font-variant-numeric: tabular-nums; }

.woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--gard-ruimte-2, .5rem);
	margin: var(--gard-ruimte-3, .75rem) 0 0;
}

.woocommerce-mini-cart__buttons a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--gard-raakvlak, 44px);
	margin: 0;
	border-radius: var(--gard-hoek, 12px);
	font-weight: 600;
}

/* De tweede knop is "afrekenen" en krijgt de accentkleur; de eerste is rustig. */
.woocommerce-mini-cart__buttons a.button:not(.checkout) {
	background: transparent;
	border: 1px solid var(--gard-rand, #e2ded4);
	color: var(--gard-inkt, #1c1c1a);
}

.woocommerce-mini-cart__buttons a.button.checkout {
	background: var(--gard-accent, #8a6a3b);
	color: var(--gard-accent-op, #fff);
}