/* 2026-09-13 v1.0 - SVH boterletter ordering page. */
.zp-boterletters-page {
	--boterletters-card: rgba(255,255,255,.08);
	--boterletters-line: rgba(255,255,255,.22);
	min-height: 70vh;
}
.zp-boterletters-content {
	width: min(1040px, calc(100% - 40px));
	margin: 0 auto;
	padding: 70px 0 100px;
}
.zp-boterletters-hero {
	max-width: 780px;
	margin-bottom: 36px;
}
.zp-boterletters-hero > * + * { margin-top: 16px; }
.zp-boterletters-eyebrow {
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.zp-boterletters-card,
.zp-boterletters-errors {
	padding: clamp(22px, 4vw, 38px);
	border: 1px solid var(--boterletters-line);
	background: var(--boterletters-card);
	border-radius: 12px;
	backdrop-filter: blur(8px);
}
.zp-boterletters-form {
	display: grid;
	gap: 24px;
}
.zp-boterletters-errors {
	margin-bottom: 24px;
	border-color: #ff8c8c;
}
.zp-boterletters-errors h2 { color: #ffb0b0; }
.zp-boterletters-errors ul { margin-top: 12px; }
.zp-boterletters-success { border-color: var(--green, #4caf50); }
.zp-boterletters-success > * + *,
.zp-boterletters-status > * + * { margin-top: 18px; }
.zp-boterletters-section-heading {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 28px;
}
.zp-boterletters-section-heading > span {
	display: grid;
	place-items: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-weight: 700;
}
.zp-boterletters-section-heading p { margin-top: 6px; opacity: .82; }
.zp-boterletters-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
}
.zp-boterletters-fields label,
.zp-boterletters-select,
.zp-boterletters-textarea,
.zp-boterletters-product-comment,
.zp-boterletters-quantity {
	display: grid;
	gap: 8px;
}
.zp-boterletters-page label > span { font-weight: 650; }
.zp-boterletters-page label small { font-weight: 400; opacity: .75; }
.zp-boterletters-page :is(input:not([type="radio"],[type="checkbox"]),select,textarea) {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 10px 13px;
	border: 2px solid currentColor;
	border-radius: 6px;
	background: rgba(3,3,52,.44);
	color: inherit;
	font: inherit;
}
.zp-boterletters-page select { color-scheme: dark; }
.zp-boterletters-page select option { background: #0d0f54; color: #fff; }
.zp-boterletters-page textarea { resize: vertical; }
.zp-boterletters-company-panel {
	display: grid;
	gap: 18px;
	margin-top: 24px;
	padding: 18px;
	border: 1px solid var(--boterletters-line);
	border-radius: 9px;
	background: rgba(255,255,255,.05);
}
.zp-boterletters-company-panel[hidden] { display: none; }
.zp-boterletters-company-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.zp-boterletters-company-panel legend { margin-bottom: 12px; padding: 0; font-weight: 700; }
.zp-boterletters-company-note { padding: 13px 15px; border-left: 4px solid var(--green,#088008); background: rgba(8,128,8,.16); }
.zp-boterletters-company-note p { margin-top: 4px; }
.zp-boterletters-order-builder { display: grid; gap: 16px; }
.zp-boterletters-order-empty { padding: 14px 16px; border: 1px dashed var(--boterletters-line); border-radius: 9px; }
.zp-boterletters-order-empty p { margin-top: 5px; opacity: .78; }
.zp-boterletters-order-divider { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: .92em; }
.zp-boterletters-order-divider[hidden] { display: none; }
.zp-boterletters-order-divider::after { content: ''; flex: 1; border-top: 1px solid var(--boterletters-line); }
.zp-boterletters-order-lines { display: grid; gap: 10px; }
.zp-boterletters-order-line { display: grid; grid-template-columns: 72px minmax(0,1fr) auto auto; gap: 16px; align-items: center; padding: 10px 12px; border: 1px solid var(--boterletters-line); border-radius: 9px; }
.zp-boterletters-order-line > img { box-sizing: border-box; width: 72px; aspect-ratio: 1; padding: 4px; object-fit: contain; border-radius: 8px; background-color: #ead8b4; background-image: linear-gradient(rgba(7,8,45,.06),rgba(7,8,45,.06)),url('/themes/zwarte-plasje/images/boterletters/products/achtergrond-grenen.jpg?v=20260913a'); background-position: center; background-size: cover; }
.zp-boterletters-order-line-info { display: grid; gap: 3px; }
.zp-boterletters-order-line-info small { opacity: .72; }
.zp-boterletters-line-controls { display: grid; grid-template-columns: 38px 64px 38px; align-items: center; }
.zp-boterletters-line-controls input { min-height: 38px!important; height: 38px; padding: 4px!important; border-radius: 0!important; text-align: center; }
.zp-boterletters-line-controls input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.zp-boterletters-line-controls input[type="number"]::-webkit-inner-spin-button,
.zp-boterletters-line-controls input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.zp-boterletters-quantity-button { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0!important; border: 1px solid currentColor; background: rgba(255,255,255,.08); color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.zp-boterletters-quantity-button > span { display: block; margin: 0; line-height: 1; transform: translateY(-1px); }
.zp-boterletters-quantity-button:first-child { border-radius: 6px 0 0 6px; }
.zp-boterletters-quantity-button:last-child { border-radius: 0 6px 6px 0; }
.zp-boterletters-remove { border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; opacity: .78; }
.zp-boterletters-product-comment { margin-top: 18px; }
.zp-boterletters-dialog { position: fixed; inset: 0; box-sizing: border-box; width: min(760px, calc(100vw - 30px)); max-width: calc(100vw - 30px); max-height: calc(100dvh - 30px); margin: auto; padding: 0; overflow: auto; border: 1px solid rgba(255,255,255,.32); border-radius: 14px; background: #0d0f54; color: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.zp-boterletters-letter-dialog { width: min(920px, calc(100vw - 30px)); }
.zp-boterletters-dialog::backdrop { background: rgba(2,3,32,.78); backdrop-filter: blur(5px); }
.zp-boterletters-dialog-inner { padding: clamp(20px,4vw,36px); }
.zp-boterletters-dialog-inner > header { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.zp-boterletters-dialog-inner > header p:last-child { margin-top: 7px; opacity: .75; }
.zp-boterletters-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; padding: 0!important; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: transparent; color: #fff; font: 300 27px/1 sans-serif; cursor: pointer; }
.zp-boterletters-dialog-close > span { display: block; margin: 0; line-height: 1; transform: translateY(-1px); }
.zp-boterletters-product-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.zp-boterletters-product-option { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 10px 14px; align-items: center; box-sizing: border-box; min-width: 0; padding: 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; background: rgba(255,255,255,.06); }
.zp-boterletters-product-option:hover { background: rgba(255,255,255,.09); }
.zp-boterletters-product-thumbnail { display: block; box-sizing: border-box; width: 72px; height: 72px; padding: 4px; object-fit: contain; border-radius: 7px; background-color: #ead8b4; background-image: linear-gradient(rgba(7,8,45,.06),rgba(7,8,45,.06)),url('/themes/zwarte-plasje/images/boterletters/products/achtergrond-grenen.jpg?v=20260913a'); background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.zp-boterletters-product-thumbnail[data-product-id="11"],
.zp-boterletters-order-line > img[data-product-id="11"],
.zp-boterletters-order-line > img.zp-boterletters-product-11 { background-color: #a67b50; background-image: linear-gradient(rgba(7,8,45,.04),rgba(7,8,45,.04)),url('/themes/zwarte-plasje/images/boterletters/products/achtergrond-eiken-grof.jpg?v=20260913a'); }
.zp-boterletters-product-thumbnail[data-product-id="12"],
.zp-boterletters-order-line > img[data-product-id="12"],
.zp-boterletters-order-line > img.zp-boterletters-product-12 { background-color: #3c281f; background-image: linear-gradient(rgba(7,8,45,.04),rgba(7,8,45,.04)),url('/themes/zwarte-plasje/images/boterletters/products/achtergrond-walnoot.jpg?v=20260913a'); }
.zp-boterletters-product-copy { display: grid; min-width: 0; gap: 3px; }
.zp-boterletters-product-copy small { opacity: .72; }
.zp-boterletters-product-actions { display: flex; grid-column: 3; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px; }
.zp-boterletters-product-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.zp-boterletters-product-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; margin: 0!important; padding: 5px 10px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.zp-boterletters-product-actions button:hover { border-color: var(--green,#088008); background: var(--green,#088008); color: #fff; }
.zp-boterletters-product-actions button.is-added,
.zp-boterletters-product-actions button.is-added:hover { border-color: var(--green,#088008); background: var(--green,#088008); color: #fff; opacity: 1; cursor: default; }
.zp-boterletters-product-actions button > span[aria-hidden="true"] { font-size: 1.25em; line-height: .7; }
.zp-boterletters-letter-options { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
.zp-boterletters-letter-options button { display: grid; gap: 4px; justify-items: center; padding: 8px; border: 1px solid rgba(255,255,255,.24); border-radius: 9px; background: rgba(255,255,255,.05); color: inherit; cursor: pointer; }
.zp-boterletters-letter-options button:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.zp-boterletters-letter-options img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; }
.zp-boterletters-live-total {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 2px solid currentColor;
	font-size: 1.1em;
}
.zp-boterletters-choice {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}
.zp-boterletters-choice label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 18px;
	border: 2px solid var(--boterletters-line);
	border-radius: 8px;
	cursor: pointer;
}
.zp-boterletters-choice label:has(input:checked) { border-color: var(--green, #088008); background: rgba(255,255,255,.08); }
.zp-boterletters-choice label.is-disabled { opacity: .5; cursor: not-allowed; }
.zp-boterletters-choice input[type="radio"]:checked {
	accent-color: var(--green, #088008);
	border-color: var(--green, #088008)!important;
	background-color: var(--green, #088008)!important;
	box-shadow: none!important;
}
.zp-boterletters-choice input { margin-top: 4px; }
.zp-boterletters-choice span { display: grid; gap: 5px; }
.zp-boterletters-choice small { display: block; }
.zp-boterletters-delivery,
.zp-boterletters-textarea { margin-top: 22px; }
.zp-boterletters-delivery .zp-boterletters-fields { margin-top: 18px; }
.zp-boterletters-address-fields { grid-template-columns: minmax(0,2fr) minmax(150px,1fr) minmax(0,1fr); }
.zp-boterletters-note { margin-top: 10px; opacity: .8; }
.zp-boterletters-submit {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--boterletters-line);
}
.zp-boterletters-submit .button {
	margin: 0!important;
	border-color: var(--green, #2f9d55);
	background: var(--green, #2f9d55);
	color: #fff;
}
.zp-boterletters-honeypot {
	position: absolute!important;
	left: -10000px!important;
	width: 1px!important;
	height: 1px!important;
	overflow: hidden!important;
}
@media (max-width: 760px) {
	.zp-boterletters-content { width: min(1040px, calc(100% - 24px)); padding: 36px 0 70px; }
	.zp-boterletters-fields,
	.zp-boterletters-choice { grid-template-columns: 1fr; }
	.zp-boterletters-submit { align-items: stretch; flex-direction: column; }
	.zp-boterletters-submit .button { width: 100%; justify-content: center; }
	.zp-boterletters-order-line { grid-template-columns: 56px minmax(0,1fr) auto; }
	.zp-boterletters-order-line > img { width: 56px; }
	.zp-boterletters-line-controls { grid-column: 2; }
	.zp-boterletters-remove { grid-column: 3; grid-row: 2; }
	.zp-boterletters-letter-options { grid-template-columns: repeat(4,minmax(0,1fr)); }
	.zp-boterletters-product-options { grid-template-columns: 1fr; }
	.zp-boterletters-product-option { grid-template-columns: 64px minmax(0,1fr); }
	.zp-boterletters-product-thumbnail { width: 64px; height: 64px; }
	.zp-boterletters-product-actions { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (max-width: 420px) {
	.zp-boterletters-card,.zp-boterletters-errors { padding: 20px 16px; }
	.zp-boterletters-letter-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
	.zp-boterletters-order-line { grid-template-columns: 48px minmax(0,1fr); }
	.zp-boterletters-order-line > img { width: 48px; }
	.zp-boterletters-line-controls,.zp-boterletters-remove { grid-column: 2; }
	.zp-boterletters-remove { grid-row: auto; justify-self: start; padding: 5px 0; }
	.zp-boterletters-product-option { grid-template-columns: 56px minmax(0,1fr); gap: 8px 10px; padding: 8px; }
	.zp-boterletters-product-thumbnail { width: 56px; height: 56px; }
	.zp-boterletters-product-actions { flex-wrap: wrap; }
}