/* =====================================================================
   AVD winkelwagen — zijpaneel
   Hoort bij avd-winkelwagen.php en avd-mini-cart.php.
   Naar het ontwerp "winkelwagen-en-checkout-avd.html", onderdeel 1b.

   1  Kleuren en maten
   2  Het paneel zelf
   3  Kop
   4  Voortgangsbalk gratis verzending
   5  Productregels
   6  Voet met totalen en de knop
   7  Melding minimumbedrag
   8  Lege wagen
   9  Mobiel
   ===================================================================== */

/* --- 1  Kleuren en maten ------------------------------------------- */

:root{
	--avd-petrol:#126985;
	--avd-inkt:#0d2a35;
	--avd-oranje:#dd9933;
	--avd-oranje-donker:#c8862a;
	--avd-oranje-licht:#e8bd7d;
	--avd-groen:#1e8449;
	--avd-lichtblauw:#eaf3f6;
	--avd-lijn:#dde5e8;
	--avd-grijs:#5b6b73;
	--avd-rood:#c0392b;
	--avd-rood-tekst:#a5301f;
	--avd-rood-vlak:#fdeceb;
	--avd-wagen-breedte:460px;
}

/* --- 2  Het paneel zelf --------------------------------------------- */

.shoptimizer-mini-cart-wrap{
	width:var(--avd-wagen-breedte) !important;
	max-width:100% !important;
	padding:0 !important;
	background:#fff !important;
	display:flex !important;
	flex-direction:column !important;
	overflow:hidden !important;
}

/* De kop en de sluitknop van het thema gebruiken we niet: die zitten nu in
   ons eigen paneel, zodat het aantal meeloopt bij elke wijziging. */
.shoptimizer-mini-cart-wrap > .cart-drawer-heading,
.shoptimizer-mini-cart-wrap > .close-drawer,
.shoptimizer-mini-cart-wrap .cart-drawer-below,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__empty-message,
.shoptimizer-mini-cart-wrap .free-shipping-progress-bar,
.shoptimizer-mini-cart-wrap .cart-drawer-free-shipping{
	display:none !important;
}

.shoptimizer-mini-cart-wrap .widget_shopping_cart,
.shoptimizer-mini-cart-wrap .widget.woocommerce.widget_shopping_cart,
.shoptimizer-mini-cart-wrap .widget_shopping_cart_content{
	flex:1 1 auto !important;
	min-height:0 !important;
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
	display:flex !important;
	flex-direction:column !important;
	overflow:hidden !important;
}

.avd-wagen{
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	min-height:0;
	height:100%;
	background:#fff;
	color:var(--avd-inkt);
	font-size:15px;
	line-height:1.5;
	text-align:left;
}

.avd-wagen *,
.avd-wagen *::before,
.avd-wagen *::after{ box-sizing:border-box; }

/* --- 3  Kop --------------------------------------------------------- */

.avd-wagen-kop{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:20px 22px 16px;
	border-bottom:1px solid var(--avd-lijn);
	flex:0 0 auto;
}

.avd-wagen-titel{
	font-size:18px;
	font-weight:700;
	color:var(--avd-inkt);
	line-height:1.3;
	margin:0;
}

.avd-wagen-titel span{ color:var(--avd-grijs); font-weight:500; }

.avd-wagen-sluit{
	width:32px;
	height:32px;
	min-height:0 !important;
	padding:0 !important;
	margin:0 !important;
	border:0 !important;
	border-radius:6px !important;
	background:none !important;
	color:var(--avd-inkt) !important;
	font-size:20px !important;
	line-height:1 !important;
	font-weight:400 !important;
	letter-spacing:0 !important;
	text-transform:none !important;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:none !important;
}

.avd-wagen-sluit:hover,
.avd-wagen-sluit:focus{ background:var(--avd-lichtblauw) !important; color:var(--avd-inkt) !important; }

/* --- 4  Voortgangsbalk gratis verzending ---------------------------- */

.avd-wagen-balk{
	padding:14px 22px;
	background:var(--avd-lichtblauw);
	display:flex;
	flex-direction:column;
	gap:8px;
	flex:0 0 auto;
}

.avd-wagen-baan{
	height:6px;
	border-radius:99px;
	background:#d3e2e8;
	overflow:hidden;
}

.avd-wagen-vulling{
	height:100%;
	border-radius:99px;
	background:var(--avd-petrol);
	transition:width .3s ease;
}

.avd-wagen-balk.is-gratis .avd-wagen-vulling{ background:var(--avd-groen); }

.avd-wagen-baantekst{
	font-size:14px;
	line-height:1.4;
	color:var(--avd-inkt);
}

.avd-wagen-baantekst strong{ color:var(--avd-petrol); font-weight:700; }
.avd-wagen-baantekst strong .woocommerce-Price-amount{ color:var(--avd-petrol); }
.avd-wagen-baantekst.is-gratis{ color:var(--avd-groen); font-weight:600; }

/* --- 5  Productregels ----------------------------------------------- */

.avd-wagen-regels{
	flex:1 1 auto;
	min-height:0;
	overflow-y:auto;
	overflow-x:hidden;
	padding:0 22px;
	-webkit-overflow-scrolling:touch;
}

.avd-wagen-regel{
	display:grid;
	grid-template-columns:60px minmax(0,1fr);
	gap:14px;
	padding:16px 0;
	border-bottom:1px solid var(--avd-lijn);
}

.avd-wagen-regel:last-child{ border-bottom:0; }

.avd-wagen-foto{ width:60px; height:60px; }

.avd-wagen-foto a{ display:block; }

.avd-wagen-foto img{
	width:60px !important;
	height:60px !important;
	max-width:60px !important;
	border:1px solid var(--avd-lijn);
	border-radius:8px;
	background:#fff;
	object-fit:contain;
	padding:3px;
	margin:0 !important;
	float:none !important;
	display:block;
}

.avd-wagen-regelkant{
	display:flex;
	flex-direction:column;
	gap:8px;
	min-width:0;
}

.avd-wagen-regelkop{
	display:flex;
	gap:12px;
	align-items:flex-start;
	justify-content:space-between;
}

.avd-wagen-naam{
	font-size:14px;
	line-height:1.35;
	color:var(--avd-inkt);
	font-weight:500;
	min-width:0;
}

.avd-wagen .avd-wagen-naam a,
.avd-wagen .avd-wagen-naam a:visited{
	color:var(--avd-inkt) !important;
	text-decoration:none;
	font-weight:500;
	box-shadow:none;
}

.avd-wagen .avd-wagen-naam a:hover,
.avd-wagen .avd-wagen-naam a:focus{ color:var(--avd-petrol) !important; text-decoration:underline; }

.avd-wagen-prijzen{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:2px;
	flex:0 0 auto;
}

.avd-wagen-prijs{
	font-size:15px;
	font-weight:700;
	color:var(--avd-inkt);
	white-space:nowrap;
}

.avd-wagen-was{
	font-size:12px;
	color:var(--avd-grijs);
	text-decoration:line-through;
	white-space:nowrap;
}

.avd-wagen-was .woocommerce-Price-amount{ color:var(--avd-grijs); }

.avd-wagen-regelvoet{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.avd-wagen-teller{
	display:flex;
	align-items:center;
	border:1px solid var(--avd-lijn);
	border-radius:8px;
	overflow:hidden;
	background:#fff;
}

.avd-wagen-teller button{
	width:38px;
	height:38px;
	min-height:0 !important;
	padding:0 !important;
	margin:0 !important;
	border:0 !important;
	border-radius:0 !important;
	background:#fff !important;
	color:var(--avd-petrol) !important;
	font-size:18px !important;
	font-weight:500 !important;
	line-height:1 !important;
	letter-spacing:0 !important;
	text-transform:none !important;
	cursor:pointer;
	box-shadow:none !important;
	display:flex;
	align-items:center;
	justify-content:center;
}

.avd-wagen-teller button:hover:not(:disabled){ background:var(--avd-lichtblauw) !important; color:var(--avd-petrol) !important; }
.avd-wagen-teller button:disabled{ opacity:.35; cursor:default; }

.avd-wagen-aantal{
	min-width:30px;
	text-align:center;
	font-size:15px;
	font-weight:600;
	color:var(--avd-inkt);
	padding:0 2px;
}

.avd-wagen-weg{
	border:0 !important;
	background:none !important;
	padding:6px 0 !important;
	margin:0 !important;
	min-height:0 !important;
	font-size:13px !important;
	font-weight:400 !important;
	line-height:1.4 !important;
	letter-spacing:0 !important;
	text-transform:none !important;
	color:var(--avd-grijs) !important;
	text-decoration:underline;
	text-underline-offset:2px;
	cursor:pointer;
	box-shadow:none !important;
}

.avd-wagen-weg:hover{ color:var(--avd-inkt) !important; background:none !important; }

/* Even wachten terwijl de server bijwerkt. */
.avd-wagen.is-bezig{ pointer-events:none; }
.avd-wagen.is-bezig .avd-wagen-regels,
.avd-wagen.is-bezig .avd-wagen-totalen{ opacity:.55; transition:opacity .15s; }

/* --- 6  Voet met totalen en de knop ---------------------------------- */

.avd-wagen-voet{
	flex:0 0 auto;
	border-top:1px solid var(--avd-lijn);
	padding:18px 22px;
	display:flex;
	flex-direction:column;
	gap:14px;
	background:#fff;
}

.avd-wagen-totalen{
	display:flex;
	flex-direction:column;
	gap:6px;
}

.avd-wagen-rij{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	gap:12px;
	font-size:14px;
	color:var(--avd-grijs);
}

.avd-wagen-rij .avd-wagen-waarde{ color:var(--avd-inkt); }
.avd-wagen-rij .avd-wagen-waarde .woocommerce-Price-amount{ color:var(--avd-inkt); }

.avd-wagen-eind{
	padding-top:8px;
	border-top:1px solid var(--avd-lijn);
}

.avd-wagen-eind > span:first-child{
	font-size:16px;
	font-weight:700;
	color:var(--avd-inkt);
}

.avd-wagen-groot{
	font-size:21px;
	font-weight:700;
	color:var(--avd-inkt);
	white-space:nowrap;
}

.avd-wagen-groot .woocommerce-Price-amount{ color:var(--avd-inkt); font-weight:700; }

a.avd-wagen-afrekenen,
button.avd-wagen-afrekenen,
.avd-wagen .avd-wagen-afrekenen{
	display:flex !important;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:52px;
	padding:10px 18px !important;
	margin:0 !important;
	border:0 !important;
	border-radius:8px !important;
	background:var(--avd-oranje) !important;
	color:#fff !important;
	font-size:17px !important;
	font-weight:600 !important;
	line-height:1.2 !important;
	letter-spacing:0 !important;
	text-transform:none !important;
	text-decoration:none !important;
	text-align:center;
	cursor:pointer;
	box-shadow:none !important;
	transition:background .15s ease;
}

a.avd-wagen-afrekenen:hover,
button.avd-wagen-afrekenen:hover,
a.avd-wagen-afrekenen:focus,
button.avd-wagen-afrekenen:focus{
	background:var(--avd-oranje-donker) !important;
	color:#fff !important;
}

.avd-wagen .avd-wagen-afrekenen.is-licht,
.avd-wagen .avd-wagen-afrekenen.is-licht:hover{
	background:var(--avd-oranje-licht) !important;
	color:#fff !important;
}

.avd-wagen-euro{
	display:flex;
	align-items:flex-start;
	gap:8px;
	font-size:12px;
	line-height:1.45;
	color:var(--avd-grijs);
}

.avd-wagen-euroteken{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:26px;
	height:20px;
	border-radius:4px;
	background:var(--avd-lichtblauw);
	color:var(--avd-petrol);
	font-size:11px;
	font-weight:700;
	flex:0 0 auto;
}

img.avd-wagen-logos{
	height:20px;
	width:auto;
	max-width:100%;
	object-fit:contain;
	object-position:left;
	opacity:.85;
	margin:0;
	display:block;
}

/* --- 7  Melding minimumbedrag ---------------------------------------- */

.avd-wagen-blokkade{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.avd-wagen-melding{
	display:flex;
	align-items:flex-start;
	gap:10px;
	padding:13px 14px;
	border:1px solid var(--avd-lijn);
	border-radius:8px;
	background:#f7fafb;
	transition:background .15s ease, border-color .15s ease;
}

.avd-wagen-meldicoon{
	width:20px;
	height:20px;
	border-radius:99px;
	background:var(--avd-lijn);
	color:#fff;
	font-size:12px;
	font-weight:700;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	line-height:1;
}

.avd-wagen-meldtekst{
	font-size:13px;
	line-height:1.5;
	color:var(--avd-inkt);
}

.avd-wagen-melding.is-fout{
	background:var(--avd-rood-vlak);
	border-color:var(--avd-rood);
}

.avd-wagen-melding.is-fout .avd-wagen-meldicoon{ background:var(--avd-rood); }
.avd-wagen-melding.is-fout .avd-wagen-meldtekst{ color:var(--avd-rood-tekst); }

/* --- 8  Lege wagen --------------------------------------------------- */

.avd-wagen-leeg{
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:14px;
	padding:40px 22px;
	text-align:center;
}

.avd-wagen-leeg p{
	margin:0;
	font-size:16px;
	color:var(--avd-grijs);
}

a.avd-wagen-leegknop{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:46px;
	padding:0 22px;
	border:1px solid var(--avd-petrol);
	border-radius:8px;
	background:#fff;
	color:var(--avd-petrol);
	font-size:15px;
	font-weight:600;
	text-decoration:none;
}

a.avd-wagen-leegknop:hover{ background:var(--avd-petrol); color:#fff; }

.avd-wagen.is-leeg .avd-wagen-voet{ border-top:1px solid var(--avd-lijn); }

/* --- 9  Mobiel ------------------------------------------------------- */

@media (max-width:768px){

	.shoptimizer-mini-cart-wrap{ width:100% !important; max-width:100% !important; }

	.avd-wagen-kop{ padding:16px 16px 14px; }
	.avd-wagen-titel{ font-size:17px; }
	.avd-wagen-sluit{ width:44px; height:44px; margin-right:-10px !important; font-size:22px !important; }

	.avd-wagen-balk{ padding:14px 16px; }

	.avd-wagen-regels{ padding:0 16px; }
	.avd-wagen-regel{ grid-template-columns:56px minmax(0,1fr); gap:12px; }
	.avd-wagen-foto{ width:56px; height:56px; }
	.avd-wagen-foto img{ width:56px !important; height:56px !important; max-width:56px !important; }
	.avd-wagen-regelkant{ gap:10px; }
	.avd-wagen-regelkop{ gap:10px; }

	.avd-wagen-teller button{ width:44px; height:44px; font-size:20px !important; }
	.avd-wagen-aantal{ min-width:34px; }
	.avd-wagen-weg{ padding:8px 0 !important; }

	.avd-wagen-voet{ padding:16px; gap:12px; }
	.avd-wagen-groot{ font-size:20px; }
	.avd-wagen .avd-wagen-afrekenen{ min-height:54px; }
}

/* --- 10  De stand van het paneel ---------------------------------------
   Het thema schuift het paneel met de eigenschap right naar buiten, met een
   waarde die bij zijn eigen breedte hoort (420px). Onze breedte is 460px, dus
   die twee moeten gelijk lopen, anders steekt er een rand uit beeld.
   ---------------------------------------------------------------------- */

body:not(.drawer-open) .shoptimizer-mini-cart-wrap{
	right:calc(var(--avd-wagen-breedte) * -1) !important;
}

@media (max-width:768px){
	body:not(.drawer-open) .shoptimizer-mini-cart-wrap{ right:-100% !important; }
}

/* Tijdelijke melding in het paneel, bijvoorbeeld bij te weinig voorraad. */
.avd-wagen-tijdelijk{
  margin:0 20px 12px;
  padding:12px 14px;
  border:1px solid #f0b7b7;
  border-left:4px solid #c1272d;
  border-radius:10px;
  background:#fdf3f3;
  color:#8f1d22;
  font-size:14px;
  line-height:1.45;
}


/* ---------------------------------------------------------------------------
   Voordeelbundels in het winkelwagenpaneel
   ---------------------------------------------------------------------------
   Een bundel komt als losse artikelen in de winkelwagen, want de leverancier
   moet ze los kunnen uitlezen. Voor de klant hoort dat er wel uit te zien als
   een geheel: de bundelregel bovenaan met het totaalbedrag, de artikelen
   ingesprongen daaronder.
   --------------------------------------------------------------------------- */

.avd-wagen .avd-wagen-regel.is-bundel-ouder {
	padding-bottom: 10px;
	border-bottom: 0;
}

.avd-wagen .avd-wagen-regel.is-bundel-kind {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 26px;
	border-bottom: 0;
	position: relative;
}

.avd-wagen .avd-wagen-regel.is-bundel-kind::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 0;
	bottom: 0;
	width: 2px;
	border-radius: 2px;
	background: #dde5e8;
}

.avd-wagen .avd-wagen-regel.is-bundel-kind + .avd-wagen-regel:not(.is-bundel-kind) {
	border-top: 1px solid #eef2f4;
	padding-top: 14px;
}

.avd-wagen .avd-wagen-regel.is-bundel-kind .avd-wagen-foto {
	width: 40px;
	min-width: 40px;
}

.avd-wagen .avd-wagen-regel.is-bundel-kind .avd-wagen-naam {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}

.avd-wagen .avd-wagen-regel.is-bundel-kind .avd-wagen-prijs {
	font-size: 13px;
	font-weight: 600;
}

.avd-wagen .avd-wagen-regel.is-bundel-kind .avd-wagen-was {
	font-size: 12px;
}

.avd-wagen .avd-wagen-bundelnoot {
	margin-top: 2px;
	font-size: 12px;
	color: #7d99a3;
	line-height: 1.3;
}