/* Verzendblok "Wanneer verzenden wij?" - pop-up overlay.
 * Overgenomen uit Code Snippets snippet 9, ongewijzigd. */

.sdvz-overlay{position:fixed;inset:0;background:rgba(18,18,26,.55);display:flex;align-items:flex-start;
              justify-content:center;padding:34px 16px;z-index:99999;overflow:auto;color:#1A1A1A;line-height:1.55}
.sdvz-overlay[hidden]{display:none}
.sdvz-overlay *{box-sizing:border-box}
.sdvz-modal{width:100%;max-width:640px;margin:auto;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(20,20,40,.25)}
.sdvz-mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 20px 2px}
.sdvz-mhead h3{margin:0;font-size:19px;letter-spacing:-.018em;line-height:1.28}
.sdvz-x{flex:none;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#5C5C67;
        background:none;border:0;font-family:inherit;cursor:pointer;padding:0}
.sdvz-ring{width:26px;height:26px;border-radius:50%;border:1.5px solid #E6007E;color:#E6007E;display:grid;place-items:center;font-size:13px}
/* Greep en voet horen bij het vel op een telefoon. Ze staan hier uit en gaan
   in de mediaquery onderaan pas aan. */
.sdvz-greep{display:none}
.sdvz-mvoet{display:none}
.sdvz-terug{display:block;width:100%;padding:13px 16px;border-radius:10px;border:1.5px solid #E6007E;
            background:#fff;color:#E6007E;font-family:inherit;font-size:15px;font-weight:700;
            letter-spacing:-.01em;cursor:pointer}
.sdvz-mbody{padding:14px 20px 20px}
.sdvz-cut{margin-bottom:13px;background:#fff;border:1px solid #E4E4EA;border-left:4px solid #E6007E;
          border-radius:10px;padding:12px 15px;font-size:14px;display:flex;align-items:center;gap:12px}
.sdvz-ct{flex:1;min-width:0}
.sdvz-cut em{font-style:normal;font-weight:700;color:#B10062}
.sdvz-klok{flex:none;display:inline-flex;align-items:center;gap:6px;background:#E6007E;color:#fff;
           border-radius:99px;padding:4px 12px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sdvz-cut.sdvz-krap{border-left-color:#C26A00}
.sdvz-cut.sdvz-krap em{color:#96560A}
.sdvz-cut.sdvz-krap .sdvz-klok{background:#C26A00}
.sdvz-kaarten{display:grid;grid-template-columns:1fr 1fr;column-gap:11px;row-gap:0}
.sdvz-mkaart{border:1px solid #E4E4EA;border-radius:12px;overflow:hidden;background:#fff}
.sdvz-mkaart.sdvz-mspoed{border-color:#F6D8E8;background:#FEFAFC}
/* Vaste kophoogte: het prijspilletje maakt de spoedkop 42px en de standaardkop
   met alleen het doosje 35px. Zonder deze regel begint de rechterkaart 7px
   lager dan de linker en loopt alles daaronder mee uit de pas. */
.sdvz-mkop{display:flex;align-items:center;gap:8px;padding:0 13px;min-height:42px;background:#F3F3F7}
/* Een vast vakje voor het icoon: de doos is 17px en de bliksem 14px, zonder dit
   begint de tekst van de twee koppen niet op dezelfde plek. */
.sdvz-mki{flex:none;display:flex;align-items:center;justify-content:center;width:17px}
.sdvz-mkaart.sdvz-mspoed .sdvz-mkop{background:#E6007E}
.sdvz-lb{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#5C5C67}
.sdvz-mkaart.sdvz-mspoed .sdvz-lb{color:#fff}
.sdvz-prijspil{margin-left:auto;flex:none;font-size:10.5px;font-weight:700;white-space:nowrap;
               background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.6);color:#fff;padding:3px 10px;border-radius:99px}
.sdvz-minhoud{padding:13px 15px 14px}
.sdvz-wanneer{display:block;font-size:12.5px;color:#5C5C67;margin-bottom:2px}
.sdvz-datum{display:block;font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1.18}
.sdvz-mkaart.sdvz-mspoed .sdvz-datum{color:#E6007E}
.sdvz-bez{display:block;font-size:13px;color:#5C5C67;margin-top:9px;padding-top:9px;border-top:1px solid #F0F0F4;line-height:1.45}
.sdvz-bez b{color:#3A3A44;font-weight:600}
.sdvz-mini{display:block;font-size:12.4px;color:#5C5C67;line-height:1.5;margin-top:8px}
.sdvz-mkaart.sdvz-muit{border-color:#E4E4EA;background:#FBFBFD}
.sdvz-mkaart.sdvz-muit .sdvz-mkop{background:#F1F1F4}
.sdvz-mkaart.sdvz-muit .sdvz-lb{color:#8A8A95}
.sdvz-mkaart.sdvz-muit .sdvz-wanneer{color:#8A8A95;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.sdvz-mkaart.sdvz-muit .sdvz-datum{color:#5C5C67;font-size:19px}
/* Beide kaarten op hetzelfde rijenraster: kop, "Wij verzenden", de datum, de
   bezorgregel en de kleine noot krijgen links en rechts dezelfde hoogte. Dat
   houdt ook de scheidingslijn boven "Verwachte bezorging" gelijk zodra de
   standaarddatum over twee regels valt. Kent een browser geen subgrid, dan
   blijft de oude stapeling staan; de vaste kophoogte hierboven houdt het daar
   netjes genoeg. */
@supports (grid-template-rows: subgrid){
	.sdvz-kaarten{grid-template-rows:auto auto auto auto auto}
	.sdvz-mkaart{display:grid;grid-row:span 5;grid-template-rows:subgrid}
	.sdvz-minhoud{display:grid;grid-row:span 4;grid-template-rows:subgrid}
}
.sdvz-sternoot{margin-top:11px;background:#FFF6E2;border:1px solid #F2DFB0;border-radius:10px;padding:11px 14px;
               font-size:12.8px;color:#96560A;line-height:1.55;display:flex;gap:10px}
.sdvz-g{flex:none;font-weight:800;font-size:15px;line-height:1.3}
.sdvz-sternoot b{color:#7A4508;font-weight:700}
.sdvz-pickup{margin-top:11px;background:#F4F4F7;border-radius:10px;padding:11px 14px;display:flex;gap:9px;
             align-items:flex-start;font-size:13px;color:#5C5C67;line-height:1.5}
.sdvz-pickup .sdvz-ic{flex:none;position:relative;top:2px}
.sdvz-pickup b{font-weight:700;color:#1A1A1A}
.sdvz-voet{margin-top:11px;font-size:12.2px;color:#8A8A95;line-height:1.55}
.sdvz-klappen{margin-top:14px;border:1px solid #E4E4EA;border-radius:11px;overflow:hidden}
.sdvz-kn{width:100%;text-align:left;padding:14px 15px;display:flex;align-items:center;gap:11px;cursor:pointer;
         background:none;border:0;font-family:inherit;color:inherit;border-radius:10px}
.sdvz-kn:focus{outline:none;box-shadow:none}
.sdvz-kn:focus-visible{outline:2px solid #E6007E;outline-offset:-3px;border-radius:10px}
.sdvz-klap.sdvz-open .sdvz-kn{border-radius:10px 10px 0 0}
.sdvz-x:focus{outline:none;box-shadow:none}
.sdvz-x:focus-visible .sdvz-ring{outline:2px solid #E6007E;outline-offset:2px}
.sdvz-tw{flex:1;min-width:0}
.sdvz-kt{display:block;font-size:14px;font-weight:600;line-height:1.3}
.sdvz-ks{display:block;font-size:12.2px;color:#8A8A95;line-height:1.35;margin-top:2px}
.sdvz-pijl{flex:none;transition:transform .18s}
.sdvz-klap.sdvz-open .sdvz-kn{border-bottom:1px solid #F0F0F4;background:#FBFBFD}
.sdvz-klap.sdvz-open .sdvz-pijl{transform:rotate(180deg)}
.sdvz-paneel{padding:14px 15px 15px}
.sdvz-paneel[hidden]{display:none}
.sdvz-kopje{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#8A8A95;margin:0 0 9px}
.sdvz-fijn{display:grid;gap:11px}
.sdvz-fijn div{font-size:13px;color:#5C5C67;line-height:1.6}
.sdvz-fijn b{color:#1A1A1A;font-weight:600}
.sdvz-scheiding{margin-top:18px;padding-top:17px;border-top:1px solid #E4E4EA}
.sdvz-wklijst{border:1px solid #E4E4EA;border-radius:10px;overflow:hidden}
table.sdvz-wk{width:100%;border-collapse:collapse;table-layout:fixed;margin:0}
table.sdvz-wk th{text-align:left;white-space:nowrap;font-size:10.5px;font-weight:700;text-transform:uppercase;
                 letter-spacing:.07em;color:#5C5C67;background:#F6F6F9;padding:9px 13px;border-bottom:1px solid #E4E4EA}
table.sdvz-wk th.sdvz-thsp{background:#FDF2F7;color:#B10062}
table.sdvz-wk td{padding:11px 13px;vertical-align:top;border-bottom:1px solid #F0F0F4;background:#fff}
table.sdvz-wk tr:last-child td{border-bottom:0}
table.sdvz-wk td.sdvz-spcel{background:#FEFBFC}
table.sdvz-wk tr.sdvz-nu td.sdvz-dagcel,table.sdvz-wk tr.sdvz-nu td.sdvz-stdcel{background:#EBF7F1}
table.sdvz-wk tr.sdvz-weg td{opacity:.45}
table.sdvz-wk col.sdvz-c1{width:124px}
table.sdvz-wk col.sdvz-c3{width:196px}
.sdvz-wkdag{display:block;font-size:14px;font-weight:700;letter-spacing:-.015em;line-height:1.25;white-space:nowrap}
.sdvz-wkdatum{display:block;font-size:12.5px;color:#5C5C67;margin-top:1px}
.sdvz-wkv{display:block;font-size:13.4px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.sdvz-wkv.sdvz-wkvsp{color:#E6007E}
.sdvz-wkv.sdvz-wkvgeen{color:#8A8A95;font-weight:600}
.sdvz-wkb{display:block;font-size:11.8px;color:#5C5C67;margin-top:2px;line-height:1.4}
.sdvz-nootje{font-size:12.2px;color:#8A8A95;line-height:1.5;margin-top:10px}
.sdvz-vandaagpil{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
                 background:#1B9354;color:#fff;padding:2px 6px;border-radius:99px;vertical-align:middle;margin-left:5px}
@media(max-width:600px){
	/* -----------------------------------------------------------------------
	 * Op een telefoon is dit geen gecentreerd venster maar een vel dat van
	 * onderen opkomt: bovenaan blijft een strook van de pagina zichtbaar achter
	 * de verduistering, de rest is schermbreed en sluit tegen de onderkant aan.
	 *
	 * Kop en voet staan vast, alleen het middenstuk schuift. Daarvoor is de
	 * modal een flexkolom; `min-height:0` op het middenstuk is daarbij geen
	 * franje maar noodzaak, anders weigert een flexkind te krimpen en scrollt
	 * het niet.
	 * --------------------------------------------------------------------- */
	.sdvz-overlay{align-items:flex-end;padding:0;overflow:hidden}

	.sdvz-modal{max-width:none;margin:0;border-radius:16px 16px 0 0;
	            display:flex;flex-direction:column;
	            max-height:calc(100vh - 46px);max-height:calc(100dvh - 46px)}

	.sdvz-greep{display:block;flex:none;padding:9px 0 1px}
	.sdvz-greep::before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:#D9D9E2;margin:0 auto}

	.sdvz-mhead{flex:none;padding:6px 16px 12px;border-bottom:1px solid #ECECF2}
	.sdvz-mhead h3{font-size:17px}

	.sdvz-mbody{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 18px}

	/* De veilige zone onderaan is de balk van de iPhone; zonder deze marge valt
	   de knop daar deels achter. */
	.sdvz-mvoet{display:block;flex:none;background:#fff;border-top:1px solid #ECECF2;
	            padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}

	/* Onder elkaar valt er niets uit te lijnen: terug naar een gewone stapeling. */
	.sdvz-kaarten{grid-template-columns:1fr;grid-template-rows:auto;row-gap:11px}
	.sdvz-mkaart{display:block;grid-row:auto}
	.sdvz-minhoud{display:block;grid-row:auto}
	.sdvz-cut{flex-direction:column;align-items:flex-start;gap:7px}
	table.sdvz-wk col.sdvz-c1{width:78px}
	table.sdvz-wk col.sdvz-c3{width:98px}
	table.sdvz-wk th,table.sdvz-wk td{padding:8px 9px}

	/* De koppen mogen hier afbreken. Op nowrap schoven "Standaard productie" en
	   "Spoed productie" over elkaar heen: die kop is 153px breed en de kolom in
	   de pop-up maar 66px. Dezelfde behandeling als op de klantenservicepagina,
	   waar dit al zo stond - de pop-up was daar overheen gezien. */
	table.sdvz-wk th{white-space:normal;font-size:9.5px;letter-spacing:.05em;line-height:1.3}

	/* De middelste kolom draagt de langste tekst ("ma 31 t/m di 1 sep") en heeft
	   in het venster van de pop-up minder ruimte dan op de pagina. Daarom hier
	   iets kleiner, en de dagcel mag zijn pilletje op een eigen regel zetten. */
	.sdvz-wkv{font-size:12.4px}
	.sdvz-wkb{font-size:10.8px}
	.sdvz-wkdag{font-size:13px;white-space:normal}
	.sdvz-wkdatum{font-size:11.5px}

	/* Het pilletje is 63px breed en de dagkolom houdt er 60 over; zonder deze
	   regel steekt hij de volgende kolom in. Hij valt hier toch al op een eigen
	   regel onder de dagnaam. */
	.sdvz-vandaagpil{font-size:8px;padding:2px 5px;letter-spacing:.04em;margin-left:0}
}