/* Bestellijst (page template bestellijstv3): one row per wine — photo, name, price per bottle and box
   size, then the amount field and add button. Built for a phone first: 16px fields (no iOS zoom),
   44px targets, names wrap instead of squeezing the controls. */

/* One centred column of 900px for the list and the Elementor title above it (page 206), with the
   header's side margin: 24px on tablets and up, 16px on phones. The bar at the bottom (centred on the
   screen) then lines up with the list. */
.iew-bl-wrap {
	max-width: 948px;
	margin: 0 auto;
	padding: 0 24px 40px;
}
body.page-template-bestellijstv3-template .elementor-206 .elementor-container { max-width: 948px !important; }
body.page-template-bestellijstv3-template .elementor-206 .elementor-widget-wrap.elementor-element-populated { padding-left: 24px; padding-right: 24px; }
@media (max-width: 767px) {
	.iew-bl-wrap,
	body.page-template-bestellijstv3-template .elementor-206 .elementor-widget-wrap.elementor-element-populated { padding-left: 16px; padding-right: 16px; }
}

.iew-bl__lever {
	margin: 0 0 8px;
	padding: 12px 14px;
	background: var(--iew-olive-100);
	border-radius: var(--iew-radius-sm);
	font-family: var(--iew-font-sans);
	font-size: 15px;
	line-height: 1.45;
	color: var(--iew-ink-900);
}

.iew-bl__cat {
	margin: 32px 0 4px;
	font-family: var(--iew-font-heading);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--iew-ink-900);
}

.iew-bl {
	margin: 0;
	padding: 0;
	list-style: none;
}

.iew-bl__row {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--iew-ink-100);
}
/* Just added: the row lights up for a moment (the side shadows widen the glow past the text column). */
.iew-bl__row.is-flash { animation: iew-bl-flash 1.8s ease-out; }
@keyframes iew-bl-flash {
	0%, 35% { background-color: var(--iew-gold-100); box-shadow: -8px 0 0 var(--iew-gold-100), 8px 0 0 var(--iew-gold-100); }
	100% { background-color: transparent; box-shadow: -8px 0 0 transparent, 8px 0 0 transparent; }
}

.iew-bl__img { display: block; line-height: 0; }
.iew-bl__img img {
	display: block;
	width: 40px;
	height: 64px;
	object-fit: contain;
}

.iew-bl__main { min-width: 0; }

body .iew-bl .iew-bl__name {
	display: block;
	font-family: var(--iew-font-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--iew-ink-900);
	text-decoration: none;
}
body .iew-bl .iew-bl__name:hover { text-decoration: underline; }

.iew-bl__meta {
	margin-top: 3px;
	font-family: var(--iew-font-sans);
	font-size: 13px;
	line-height: 1.4;
	color: var(--iew-ink-500);
}
.iew-bl__price { color: var(--iew-ink-900); font-weight: 600; }
.iew-bl__price { white-space: nowrap; }
.iew-bl__extra { display: block; }
.iew-bl__stock { color: var(--iew-olive-700); }

.iew-bl .iew-qty-note {
	margin: 4px 0 0;
	font-family: var(--iew-font-sans);
	font-size: 13px;
	line-height: 1.35;
	color: var(--iew-olive-700);
}
.iew-bl .iew-qty-note[hidden] { display: none; }

/* Already in the cart: a lasting label on the row. Two classes: the Elementor kit gives every p a
   bottom margin with .elementor-kit-N p. */
.iew-bl .iew-bl__incart {
	display: flex;
	width: max-content;
	max-width: 100%;
	align-items: center;
	gap: 5px;
	margin: 6px 0 0;
	padding: 3px 9px 3px 7px;
	border-radius: var(--iew-radius-pill);
	background: var(--iew-olive-100);
	font-family: var(--iew-font-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--iew-olive-900);
	white-space: nowrap;
}
.iew-bl .iew-bl__incart[hidden] { display: none; }
.iew-bl__incart svg,
.iew-bl-toast svg {
	width: 14px;
	height: 14px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.iew-bl__buy {
	display: flex;
	align-items: center;
	gap: 6px;
}

body .iew-bl__buy input.qty {
	width: 56px !important;
	height: 44px;
	margin: 0;
	padding: 0 4px;
	border: 1px solid var(--iew-ink-300);
	border-radius: var(--iew-radius-sm);
	background: var(--iew-surface);
	font-family: var(--iew-font-sans);
	font-size: 16px !important;
	text-align: center;
	color: var(--iew-ink-900);
	-moz-appearance: textfield;
}
.iew-bl__buy input.qty::-webkit-inner-spin-button,
.iew-bl__buy input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* The hint (one box) is clearly lighter than a typed amount. */
.iew-bl__buy input.qty::placeholder { color: #A3A69B; opacity: 1; }
.iew-bl__buy input.qty:focus-visible { outline: 2px solid var(--iew-olive-700); outline-offset: 1px; }

body .iew-bl__add.button {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--iew-radius-sm);
	background: var(--iew-olive-700);
	color: var(--iew-paper);
}
body .iew-bl__add.button:hover,
body .iew-bl__add.button:focus-visible { background: var(--iew-olive-900); color: var(--iew-paper); }
.iew-bl__add svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.iew-bl__add circle { fill: currentColor; stroke: none; }
/* While WooCommerce adds: a spinner instead of the cart; once added: a tick on gold for a moment
   (bestellijst.js). WooCommerce's own ::after icons are switched off. */
body .iew-bl__add.button { position: relative; }
body .iew-bl__add.button::after,
body .iew-bl__add.button.loading::after,
body .iew-bl__add.button.added::after { display: none !important; content: none !important; }
body .iew-bl__add.button.loading { opacity: 1; background: var(--iew-olive-900); }
body .iew-bl__add.button.loading svg { visibility: hidden; }
body .iew-bl__add.button.loading::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--iew-paper);
	border-radius: 50%;
	animation: iew-bl-spin 0.7s linear infinite;
}
@keyframes iew-bl-spin { to { transform: rotate(360deg); } }
/* The tick only while nothing is loading: a new add during the tick shows the spinner alone, never a
   spinning tick (both drew on ::before). */
body .iew-bl__add.button.is-added:not(.loading) { background: var(--iew-gold-500); color: var(--iew-olive-900); }
body .iew-bl__add.button.is-added svg { visibility: hidden; }
body .iew-bl__add.button.is-added:not(.loading)::before {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bar at the bottom of the screen after adding: what went in, and the way to the cart. */
.iew-bl-toast {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: max(12px, env(safe-area-inset-bottom));
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto;
	padding: 12px 12px 12px 16px;
	border-radius: var(--iew-radius-md);
	background: var(--iew-olive-900);
	box-shadow: 0 8px 24px rgba(27, 29, 24, 0.28);
	color: var(--iew-paper);
	font-family: var(--iew-font-sans);
	transform: translateY(calc(100% + 24px));
	transition: transform 0.25s ease;
}
.iew-bl-toast[hidden] { display: none; }
.iew-bl-toast.is-shown { transform: none; }
.iew-bl-toast > svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--iew-gold-500); color: var(--iew-olive-900); }
.iew-bl-toast__text { flex: 1; min-width: 0; line-height: 1.3; }
.iew-bl-toast__text strong { display: block; font-size: 15px; }
.iew-bl-toast__text span { display: block; overflow: hidden; font-size: 13px; color: var(--iew-olive-200); white-space: nowrap; text-overflow: ellipsis; }
body .iew-bl-toast__link {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border-radius: var(--iew-radius-sm);
	background: var(--iew-gold-500);
	color: var(--iew-olive-900);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
body .iew-bl-toast__link:hover { background: var(--iew-gold-400); color: var(--iew-olive-900); }

/* Header cart icon: a short hop when something went in. */
.iew-bump .wc-block-mini-cart__button { animation: iew-bl-bump 0.45s ease-out; }
@keyframes iew-bl-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.iew-bl__row.is-flash,
	.iew-bump .wc-block-mini-cart__button { animation: none; }
	.iew-bl-toast { transition: none; }
	body .iew-bl__add.button.loading::before { animation-duration: 1.5s; }
}
.iew-bl .added_to_cart { display: none !important; }

.iew-bl__foot { margin: 28px 0 8px; text-align: right; }
body .iew-bl__tocart,
body .iew-bl-wrap .iew-bl__done {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--iew-radius-sm);
	background: var(--iew-gold-500);
	color: var(--iew-olive-900) !important;
	font-family: var(--iew-font-sans);
	font-weight: 700;
	text-decoration: none;
}
.iew-bl__tocart:hover,
body .iew-bl-wrap .iew-bl__done:hover,
body .iew-bl-wrap .iew-bl__done:focus-visible { background: var(--iew-gold-400); }

/* Aanpassen (edit mode, bestellijst.js). The button shares a row with the page title (the template
   wraps both in .iew-bl-head); without a title it stands alone above the list. While editing, each
   row's amount field gives way to Verwijderen; wines that are off are dimmed while editing and gone
   otherwise, as are categories with nothing left to show. */
.iew-bl-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.iew-bl-head > :first-child { min-width: 0; margin: 0; }
.iew-bl-head--solo { justify-content: flex-end; margin: 16px 0 0; }
/* A quiet text button, like "Wijzig" above an iOS list: it should not compete with the title or the
   order buttons. The tap area stays 44px. While editing it turns into a small filled Klaar. */
body .iew-bl-head .iew-bl-edit {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0 -10px 0 0;
	padding: 0 10px;
	border: 0;
	border-radius: var(--iew-radius-sm);
	background: transparent;
	color: var(--iew-olive-700);
	font-family: var(--iew-font-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}
body .iew-bl-head .iew-bl-edit:hover,
body .iew-bl-head .iew-bl-edit:focus-visible { background: var(--iew-olive-100); color: var(--iew-olive-900); }
body .iew-bl-head .iew-bl-edit.is-active { min-height: 36px; margin: 0; padding: 0 16px; background: var(--iew-olive-700); color: var(--iew-paper); }
body .iew-bl-head .iew-bl-edit.is-active:hover,
body .iew-bl-head .iew-bl-edit.is-active:focus-visible { background: var(--iew-olive-900); color: var(--iew-paper); }
.iew-bl-edit svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.iew-bl-edit.is-active svg { display: none; }

.iew-bl-wrap .iew-bl__allhidden {
	margin: 24px 0 0;
	font-family: var(--iew-font-sans);
	font-size: 15px;
	color: var(--iew-ink-900);
}

body .iew-bl-wrap .iew-bl__toggle {
	min-width: 112px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--iew-ink-300);
	border-radius: var(--iew-radius-sm);
	background: var(--iew-surface);
	color: var(--iew-ink-900);
	font-family: var(--iew-font-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}
body .iew-bl-wrap .iew-bl__toggle:hover,
body .iew-bl-wrap .iew-bl__toggle:focus-visible { border-color: var(--iew-ink-900); background: var(--iew-surface); color: var(--iew-ink-900); }
body .iew-bl-wrap .iew-bl__row.is-off .iew-bl__toggle { border-color: var(--iew-olive-700); background: var(--iew-olive-700); color: var(--iew-paper); }
body .iew-bl-wrap .iew-bl__row.is-off .iew-bl__toggle:hover,
body .iew-bl-wrap .iew-bl__row.is-off .iew-bl__toggle:focus-visible { background: var(--iew-olive-900); color: var(--iew-paper); }
.iew-bl__toggle[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.iew-bl__toggle svg {
	display: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Phones: a bin of 44 x 44 leaves the wine name room; its aria-label still says Verwijderen. */
@media (max-width: 767px) {
	body .iew-bl-wrap .iew-bl__row:not(.is-off) .iew-bl__toggle { display: inline-grid; place-items: center; width: 44px; min-width: 0; padding: 0; }
	.iew-bl__row:not(.is-off) .iew-bl__toggle svg { display: block; }
	.iew-bl__row:not(.is-off) .iew-bl__toggle span { display: none; }
}
.iew-bl__row.is-off .iew-bl__img,
.iew-bl__row.is-off .iew-bl__main { opacity: 0.45; }

.iew-bl__edit { display: none; }
.iew-bl-wrap.is-editing .iew-bl__edit { display: block; }
/* While editing: a bar docked to the bottom of the screen, full width, its content lined up with the
   list. Left what is going on, right Klaar. */
.iew-bl-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	padding-bottom: env(safe-area-inset-bottom);
	border-top: 1px solid var(--iew-ink-100);
	background: var(--iew-surface);
	box-shadow: 0 -6px 20px rgba(27, 29, 24, 0.12);
	font-family: var(--iew-font-sans);
}
.iew-bl-wrap.is-editing .iew-bl-bar { display: block; }
.iew-bl-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 948px;
	margin: 0 auto;
	padding: 12px 24px;
}
.iew-bl-wrap .iew-bl-bar__text { min-width: 0; margin: 0; line-height: 1.3; }
.iew-bl-bar__text strong { display: block; font-size: 15px; color: var(--iew-ink-900); }
.iew-bl-bar__count { display: block; font-size: 13px; color: var(--iew-ink-500); }
.iew-bl-bar__count[hidden] { display: none; }
body .iew-bl-wrap .iew-bl__done { flex: none; display: inline-flex; padding: 0 28px; }
.iew-bl-wrap.is-editing { padding-bottom: 104px; }
@media (max-width: 767px) {
	.iew-bl-bar__inner { padding: 10px 16px; }
}
.iew-bl-wrap.is-editing .iew-bl__buy,
body .iew-bl-wrap.is-editing .iew-bl__tocart,
.iew-bl-wrap.is-editing .iew-bl__allhidden,
.iew-bl-wrap:not(.is-editing) .iew-bl__row.is-off,
.iew-bl-wrap:not(.is-editing) .iew-bl-group.is-empty { display: none; }

/* Narrowest phones: a smaller photo and field, so the name keeps room. */
@media (max-width: 359px) {
	.iew-bl__row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 0 8px; }
	.iew-bl__img img { width: 30px; height: 48px; }
	body .iew-bl__buy input.qty { width: 48px !important; }
	body .iew-bl-wrap .iew-bl__row.is-off .iew-bl__toggle { min-width: 0; padding: 0 10px; }
}

@media (min-width: 768px) {
	.iew-bl__row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 0 16px; }
	.iew-bl__img img { width: 48px; height: 72px; }
	body .iew-bl .iew-bl__name { font-size: 16px; }
	.iew-bl__price + .iew-bl__extra { display: inline; }
	.iew-bl__price + .iew-bl__extra::before { content: " · "; }
	.iew-bl__meta { font-size: 14px; }
	body .iew-bl__buy input.qty { width: 72px !important; }
	.iew-bl__cat { font-size: 28px; }
}

/* ---------- Without a list: not logged in, or no wines yet (iew_bestellijst_state in the template) ----------
   Same column as the list. The doors for visitors follow the homepage's two doors. */
.iew-bl-empty { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin: 16px 0 56px; font-family: var(--iew-font-sans); }
.iew-bl-empty__main { padding: 36px 36px 40px; background: #fff; border: 1px solid var(--iew-line, #E2DED3); border-radius: var(--iew-radius-sm); }
.iew-bl-empty__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: var(--iew-olive-100); color: var(--iew-olive-700); }
.iew-bl-empty__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body .iew-bl-empty .iew-bl-empty__title { margin: 0 0 10px; font-family: var(--iew-font-heading); font-size: 30px; font-weight: 500; line-height: 1.15; color: var(--iew-olive-900); }
body .iew-bl-empty p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--iew-ink-700); }
.iew-bl-empty__main > p { max-width: 520px; }
.iew-bl-empty__steps { counter-reset: iew-step; list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 12px; }
.iew-bl-empty__steps li { counter-increment: iew-step; display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.45; color: var(--iew-ink-900); }
.iew-bl-empty__steps li::before {
	content: counter(iew-step); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: var(--iew-gold-100); color: var(--iew-gold-600); font-weight: 700; font-size: 14px;
}
.iew-bl-empty__acts { display: flex; flex-wrap: wrap; gap: 10px; }
body .iew-bl-empty .iew-bl-empty__btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--iew-radius-sm);
	font-family: var(--iew-font-sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}
body .iew-bl-empty .iew-bl-empty__btn--primary { background: var(--iew-gold-500); color: var(--iew-olive-900); }
body .iew-bl-empty .iew-bl-empty__btn--primary:hover { background: var(--iew-gold-400); color: var(--iew-olive-900); }
body .iew-bl-empty .iew-bl-empty__btn--dark { background: var(--iew-olive-800); color: var(--iew-paper); }
body .iew-bl-empty .iew-bl-empty__btn--dark:hover { background: var(--iew-olive-900); color: var(--iew-paper); }
body .iew-bl-empty .iew-bl-empty__btn--line { border: 1px solid var(--iew-olive-700); color: var(--iew-olive-700); }
body .iew-bl-empty .iew-bl-empty__btn--line:hover { background: var(--iew-olive-100); color: var(--iew-olive-900); }
.iew-bl-empty a:focus-visible { outline: 2px solid var(--iew-olive-700); outline-offset: 2px; }

.iew-bl-empty__note { align-self: start; padding: 26px 26px 22px; background: var(--iew-paper-2); border-radius: var(--iew-radius-sm); }
body .iew-bl-empty__note h3 { margin: 0 0 10px; font-family: var(--iew-font-heading); font-size: 21px; font-weight: 500; line-height: 1.2; color: var(--iew-olive-900); }
body .iew-bl-empty__note p { font-size: 15px; }
body .iew-bl-empty__note a { color: var(--iew-olive-900); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Visitors: intro, then the two doors. */
.iew-bl-empty--gast { grid-template-columns: 1fr; gap: 28px; }
.iew-bl-empty__intro { max-width: 600px; }
.iew-bl-empty__doors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.iew-bl-empty__doors > div { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 30px 34px; background: var(--iew-paper-2); border-radius: var(--iew-radius-sm); }
.iew-bl-empty__doors > div + div { background: var(--iew-gold-100); }
.iew-bl-empty__lbl { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--iew-gold-600); }
body .iew-bl-empty__doors h3 { margin: 0 0 10px; font-family: var(--iew-font-heading); font-size: 26px; font-weight: 500; line-height: 1.15; color: var(--iew-olive-900); }
.iew-bl-empty__doors p { flex: 1; }

@media (max-width: 860px) {
	.iew-bl-empty, .iew-bl-empty__doors { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.iew-bl-empty__main { padding: 26px 20px 28px; }
	body .iew-bl-empty .iew-bl-empty__title { font-size: 26px; }
	.iew-bl-empty__acts .iew-bl-empty__btn { width: 100%; }
	.iew-bl-empty__doors > div { padding: 26px 22px 28px; }
}