/* Delhaize bakkerij bestellen. Kleuren en lettertypes van de site. */
.dh-bk {
	--dh-rood: #c8202f;
	--dh-rood-donker: #a50d27;
	--dh-roze: #F5B4CB;
	--dh-roze-licht: #FFF6F5;
	--dh-lijn: #e7dcdc;
	--dh-grijs: #e6e2de;
	--dh-kop: 'Cervo Neue Semi Bold', 'Cervo Neue Black', sans-serif;
	--dh-tekst: 'Breve News Book', Georgia, serif;
	font-family: var(--dh-tekst);
	color: #000;
}
.dh-bk button { font-family: inherit; cursor: pointer; }
.dh-bk button:disabled { cursor: default; }

/* Category tabs */
.dh-tabs { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 32px; }
.dh-tab {
	font-family: 'Cervo Neue Black', var(--dh-kop) !important;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 1;
	letter-spacing: .02em;
	color: #000;
	background: #fff;
	border: 1px solid var(--dh-lijn);
	border-radius: 999px;
	padding: 13px 26px;
	transition: background .2s, color .2s, border-color .2s;
}
.dh-tab:hover { border-color: var(--dh-rood); color: var(--dh-rood); }
.dh-tab.is-actief { background: var(--dh-rood); border-color: var(--dh-rood); color: #fff; }

/* Layout */
.dh-bk-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 28px; align-items: start; }
body .dh-bk .dh-cat-titel { margin: 0; font-size: 48px; line-height: 1; }
.dh-bk p { padding-bottom: 0; }
.dh-bk .dh-cat-aantal { margin: 4px 0 0 !important; padding: 0 !important; font-size: 18px; }
.dh-bk .dh-cat-info { margin: 2px 0 0 !important; padding: 0 !important; color: var(--dh-rood); font-size: 15px; }
.dh-cat-info:empty { display: none; }

/* Product cards */
.dh-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.dh-kaart { display: flex; flex-direction: column; background: var(--dh-roze-licht); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.dh-kaart-foto { aspect-ratio: 3 / 2; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dh-kaart-foto img { width: 100%; height: 100%; object-fit: contain; margin: 0 !important; }
.dh-foto-leeg {
	width: 64px; height: 64px; opacity: .25;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23c8202f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 30c0-10 10-16 22-16s22 6 22 16c0 3-2 5-5 5v15H15V35c-3 0-5-2-5-5z'/%3E%3Cpath d='M24 26l4 4M32 24l4 4M40 26l4 4'/%3E%3C/svg%3E");
}
.dh-kaart-tekst { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 16px; }
body .dh-bk .dh-kaart-titel { font-family: var(--dh-tekst) !important; text-transform: none; font-weight: 400; font-size: 22px; line-height: 1.25; letter-spacing: 0; margin: 0; color: #000; }
.dh-kaart-eenheid { margin: 0 0 18px; font-size: 18px; color: #000; }
.dh-kaart-onder { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dh-prijs { font-family: var(--dh-kop); font-weight: 800; font-size: 22px; color: var(--dh-rood); white-space: nowrap; }

/* Quantity control */
.dh-teller { display: flex; align-items: center; background: #fff; border-radius: 999px; padding: 0; min-width: 120px; justify-content: space-between; }
.dh-teller button { width: 38px; height: 38px; border: 0; border-radius: 50%; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .15s, background .2s; }
.dh-min { background: transparent; color: #000; font-family: var(--dh-kop) !important; font-weight: 800; }
.dh-min:disabled { color: #000; opacity: 1; }
.heeft-aantal .dh-min { background: var(--dh-grijs); }
.dh-plus { background: var(--dh-rood); color: #fff; font-weight: 700; }
.dh-teller button:not(:disabled):hover { transform: scale(1.08); }
.dh-aantal { font-family: var(--dh-kop); font-weight: 800; font-size: 24px; min-width: 24px; text-align: center; }

/* Basket panel */
.dh-bk-mandje { background: var(--dh-roze-licht); padding: 36px 30px 40px; position: sticky; top: 140px; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
body .dh-bk .dh-kop { font-size: 22px; line-height: 1.1; margin: 0; }
.dh-mandje-aantal { margin: 6px 0 0; font-size: 18px; }
.dh-mandje-lijst { list-style: none; margin: 16px 0 0 !important; padding: 0 !important; }
.dh-mandje-lijst li { display: flex; align-items: flex-start; gap: 18px; padding: 8px 0 !important; margin: 0 !important; list-style: none !important; }
.dh-mandje-lijst li::before { display: none !important; }
.dh-badge { flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--dh-roze); color: var(--dh-rood); font-family: var(--dh-kop); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.dh-regel { flex: 1; display: flex; flex-direction: column; font-size: 20px; line-height: 1.3; }
.dh-regel-prijs { font-size: 17px; margin-top: 6px; }
.dh-regel-totaal { font-family: var(--dh-kop); font-weight: 800; font-size: 22px; color: var(--dh-rood); white-space: nowrap; }
.dh-lijn { border: 0 !important; border-top: 1px solid #cfc6c6 !important; margin: 26px 0 !important; height: 0 !important; background: none !important; }

/* Pickup days and hours */
.dh-dagen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 16px; }
.dh-dag { aspect-ratio: 1; border-radius: 50%; border: 0; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; color: #000; transition: background .2s, color .2s; }
.dh-dag-kort { font-family: var(--dh-kop); font-weight: 800; font-size: 14px; line-height: 1; }
.dh-dag-datum { font-family: var(--dh-kop); font-weight: 800; font-size: 20px; line-height: 1; }
.dh-dag:not(:disabled):hover { color: var(--dh-rood); }
.dh-dag.is-actief { background: #e9b6c6; color: var(--dh-rood); }
.dh-dag:disabled { opacity: .35; }
.dh-uren { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.dh-bk .dh-uur { background: #fff; border: 1px solid var(--dh-lijn); border-radius: 0 !important; box-shadow: none !important; padding: 12px 0; font-size: 15px; color: #000; transition: background .2s, color .2s; }
.dh-bk .dh-dag, .dh-bk .dh-tab, .dh-bk .dh-teller button { box-shadow: none; }
.dh-uur:not(:disabled):hover { border-color: var(--dh-rood); color: var(--dh-rood); }
.dh-uur.is-actief { background: #e9b6c6; border-color: #e9b6c6; color: var(--dh-rood); }
.dh-uur.is-vol { color: #b9b1b1; text-decoration: line-through; background: #fff; }
.dh-moment-info { font-size: 14px; color: var(--dh-rood); margin: 12px 0 0; }
.dh-moment-info:empty { display: none; }

/* Total */
.dh-totaal { display: flex; justify-content: space-between; align-items: baseline; font-size: 19px; }
.dh-totaal-bedrag { font-family: var(--dh-kop); font-weight: 800; font-size: 26px; color: var(--dh-rood); }
.dh-samenvatting { font-size: 15px; line-height: 1.4; margin: 12px 0 0; }

/* The Gravity Form inside the panel */
.dh-bk-form { margin-top: 26px; }
.dh-bk-form .gform_wrapper.gravity-theme .gform_fields { row-gap: 14px; }
.dh-bk-form .gform_wrapper .gfield_label { font-family: var(--dh-kop) !important; text-transform: uppercase; font-weight: 800 !important; font-size: 16px !important; margin-bottom: 6px !important; }
.dh-bk-form .gform_wrapper .gfield--type-hidden { display: none !important; }
.dh-bk-form .gform_wrapper .gfield textarea { min-height: 70px !important; height: 70px; }
.dh-bk-form .gform_wrapper .gform_footer { margin: 18px 0 0 !important; padding: 0 !important; }
.dh-bk-form .gform_wrapper .gform_button,
.dh-bk .dh-knop {
	font-family: 'Cervo Neue Black', var(--dh-kop) !important;
	font-weight: 900 !important;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: 20px !important;
	line-height: 1.2 !important;
	background: var(--dh-rood) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 16px 32px !important;
	box-shadow: 0 6px 14px rgba(200, 32, 47, .25) !important;
	transition: background .2s, transform .2s;
	display: inline-block;
}
.dh-bk-form .gform_wrapper .gform_button:hover, .dh-bk .dh-knop:hover { background: var(--dh-rood-donker) !important; transform: translateY(-1px); }
.dh-validatie, .dh-fout { background: #fff; border-left: 3px solid var(--dh-rood); color: var(--dh-rood); padding: 10px 14px; font-size: 15px; margin: 14px 0 0; }
.dh-validatie p { margin: 0; }
.dh-bk-form .gform_validation_errors h2 { font-size: 15px !important; }

/* Confirmation */
.dh-bk--bevestigd { display: flex; justify-content: center; }
.dh-bevestiging { background: var(--dh-roze-licht); padding: 48px; max-width: 720px; width: 100%; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
body .dh-bevestiging .dh-bevestiging-titel { color: var(--dh-rood); margin-bottom: 16px; }
.dh-bevestiging .gform_confirmation_message { font-size: 18px; }

/* Mobile bar */
.dh-mobiel-balk { display: none; }

@media (max-width: 1199px) {
	.dh-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
	.dh-bk-raster { grid-template-columns: minmax(0, 1fr); }
	.dh-bk-mandje { position: static; }
	.dh-mobiel-balk:not([hidden]) {
		display: flex; align-items: center; gap: 14px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9990;
		background: var(--dh-rood); color: #fff !important; border-radius: 999px; padding: 14px 22px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
		font-family: 'Cervo Neue Black', var(--dh-kop); text-transform: uppercase; font-size: 16px;
	}
	.dh-mobiel-balk span:last-child { margin-left: auto; }
	.dh-tab { font-size: 16px; padding: 11px 18px; }
	.dh-tabs { gap: 10px; }
}
@media (max-width: 690px) {
	.dh-kaarten { grid-template-columns: minmax(0, 1fr); }
	body .dh-bk .dh-cat-titel { font-size: 38px; }
	.dh-bk-mandje { padding: 28px 18px 32px; }
	.dh-bevestiging { padding: 28px 20px; }
}