/* ==========================================================================
   De Smet Sanitair — plugin components (front-end)
   Slider · grid · lightbox · reviews · contact links · form · business info
   ========================================================================== */

:root {
	--dsc-navy: var(--wp--preset--color--primary, #0D4C80);
	--dsc-navy-dark: var(--wp--preset--color--primary-dark, #093A63);
	--dsc-text: var(--wp--preset--color--contrast, #1C2430);
	--dsc-muted: var(--wp--preset--color--muted, #4B5563);
	--dsc-link: var(--wp--preset--color--link, #0B66A6);
	--dsc-sand: var(--wp--preset--color--sand, #F7F5F2);
	--dsc-sky: var(--wp--preset--color--sky, #EEF4FA);
	--dsc-line: var(--wp--preset--color--line, #DDD8D0);
	--dsc-field: #7B828C;
	--dsc-error: #B42318;
	--dsc-success: #2F6B25;
	--dsc-star: #C98200;
	--dsc-radius: 14px;
	--dsc-radius-l: 22px;
	--dsc-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .07);
	--dsc-shadow-lift: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 40px rgba(9, 58, 99, .14);
	--dsc-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Icons: filled variants (theme sets fill:none on .ds-icon). */
.ds-icon[fill="currentColor"],
.ds-icon--solid { fill: currentColor; }
.ds-icon--solid { stroke: none; }

.ds-nowrap { white-space: nowrap; }

/* ---------- Buttons (plugin output) ---------- */
.ds-button.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 48px;
	box-sizing: border-box;
	text-decoration: none;
	overflow-wrap: normal;
}
.ds-button--light.wp-element-button {
	background: #FFFFFF;
	color: var(--dsc-navy-dark);
	border: 2px solid #FFFFFF;
}
.ds-button--light.wp-element-button:hover,
.ds-button--light.wp-element-button:focus-visible { background: #E6F0F9; border-color: #E6F0F9; color: var(--dsc-navy-dark); }
.ds-button--outline.wp-element-button {
	background: transparent;
	color: var(--dsc-navy);
	border: 2px solid currentColor;
}
.ds-button--outline.wp-element-button:hover,
.ds-button--outline.wp-element-button:focus-visible { background: var(--dsc-navy); border-color: var(--dsc-navy); color: #FFFFFF; }
:is(.has-primary-background-color, .has-primary-dark-background-color, .wp-block-cover) .ds-button--outline.wp-element-button {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, .85);
}
:is(.has-primary-background-color, .has-primary-dark-background-color, .wp-block-cover) .ds-button--outline.wp-element-button:hover,
:is(.has-primary-background-color, .has-primary-dark-background-color, .wp-block-cover) .ds-button--outline.wp-element-button:focus-visible {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--dsc-navy-dark);
}

/* ---------- Protected contact links ---------- */
.ds-contact {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-weight: 700;
	overflow-wrap: anywhere;
}
.ds-contact--link { color: var(--dsc-link); text-underline-offset: .2em; }
.ds-contact--link:hover { color: var(--dsc-navy-dark); }
.ds-contact--plain { color: inherit; font-weight: inherit; text-decoration: none; }
.ds-contact--plain:hover { text-decoration: underline; }
.has-primary-background-color .ds-contact--link,
.has-primary-dark-background-color .ds-contact--link,
.ds-topbar .ds-contact--link,
.ds-footer .ds-contact--link,
.wp-block-cover .ds-contact--link { color: #FFFFFF; }
.ds-contact .ds-icon { width: 1.1em; height: 1.1em; }

/* ---------- Business info ---------- */
.ds-business address,
.ds-address { font-style: normal; line-height: 1.6; }
.ds-town { display: flex; align-items: center; gap: .6rem; margin: 0; }
.ds-hours { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: start; margin: 0; }
.ds-hours .ds-icon { margin-top: .3em; color: var(--dsc-navy); }
.ds-town .ds-icon { flex: 0 0 auto; color: var(--dsc-navy); }
.ds-hours br { display: none; }
.ds-hours .ds-muted { grid-column: 2; }
.ds-hours-short { display: inline-flex; align-items: center; gap: .45em; }
.has-primary-background-color .ds-town .ds-icon,
.has-primary-dark-background-color .ds-town .ds-icon,
.has-primary-background-color .ds-hours .ds-icon,
.has-primary-dark-background-color .ds-hours .ds-icon,
.ds-footer .ds-hours .ds-icon { color: inherit; }
.ds-muted { color: var(--dsc-muted); }
.has-primary-background-color .ds-muted,
.has-primary-dark-background-color .ds-muted,
.ds-footer .ds-muted { color: #BFD9EE; }
.ds-legal { margin: 0; }

/* ---------- Empty state ---------- */
.ds-gallery-empty {
	padding: 2rem;
	text-align: center;
	background: var(--dsc-sky);
	border-radius: var(--dsc-radius);
	color: var(--dsc-muted);
}

/* ---------- Zoom affordance (slider + grid) ---------- */
.ds-zoom {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--dsc-radius);
	background: #E7E3DD;
	color: inherit;
}
.ds-zoom img { display: block; transition: transform .6s var(--dsc-ease); }
.ds-zoom__hint {
	position: absolute;
	right: 12px;
	top: 12px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--dsc-navy-dark);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
	opacity: 0;
	transform: scale(.9);
	transition: opacity .25s var(--dsc-ease), transform .25s var(--dsc-ease);
}
.ds-zoom:hover .ds-zoom__hint,
.ds-zoom:focus-visible .ds-zoom__hint { opacity: 1; transform: scale(1); }
@media (hover: none) {
	.ds-zoom__hint { opacity: 1; transform: none; width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: no-preference) {
	.ds-zoom:hover img { transform: scale(1.035); }
}
.ds-zoom:focus-visible { outline: 3px solid #168CD6; outline-offset: 3px; }

.ds-tag {
	display: inline-block;
	padding: .2rem .65rem;
	border-radius: 999px;
	background: var(--dsc-sky);
	color: var(--dsc-navy-dark);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.5;
}
.ds-caption-text { color: var(--dsc-muted); }

/* ---------- Slider (filmstrip) ---------- */
.ds-slider {
	--slide-h: 300px;
	position: relative;
	margin-block: 0;
}
@media (min-width: 641px) { .ds-slider { --slide-h: 380px; } }
@media (min-width: 1024px) { .ds-slider { --slide-h: 460px; } }

.ds-slider__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--dsc-radius);
}
.ds-slider__viewport::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.ds-slider__viewport { scroll-behavior: smooth; }
}
.ds-slider__track {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ds-slider__slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
	margin: 0;
	max-width: min(86vw, 900px);
}
.ds-slider__figure { margin: 0; }
.ds-slider__img {
	height: var(--slide-h);
	width: auto;
	max-width: min(86vw, 900px);
	object-fit: cover;
}
.ds-slider__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .6rem;
	margin-top: .75rem;
	font-size: .9375rem;
	line-height: 1.45;
	max-width: 52ch;
}

.ds-slider__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 1.25rem;
}
.ds-slider__counter {
	margin: 0;
	min-width: 4.5ch;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--dsc-navy-dark);
}
.ds-slider__progress {
	flex: 1;
	height: 4px;
	border-radius: 4px;
	background: var(--dsc-line);
	overflow: hidden;
}
.ds-slider__progress span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #168CD6, var(--dsc-navy));
	border-radius: inherit;
	transition: width .35s var(--dsc-ease);
}
.ds-slider__btn {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--dsc-navy);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--dsc-navy);
	cursor: pointer;
	transition: background-color .2s var(--dsc-ease), color .2s var(--dsc-ease);
}
.ds-slider__btn:hover:not(:disabled) { background: var(--dsc-navy); color: #FFFFFF; }
.ds-slider__btn:disabled { opacity: .4; cursor: default; }
.ds-slider__btn .ds-icon { width: 22px; height: 22px; }
.ds-slider__toggle { border-color: var(--dsc-line); color: var(--dsc-navy-dark); }
.ds-slider__toggle .ds-when-paused { display: none; }
.ds-slider__toggle[data-state="paused"] .ds-when-paused { display: contents; }
.ds-slider__toggle[data-state="paused"] .ds-when-playing { display: none; }
.ds-slider__toggle .ds-when-playing,
.ds-slider__toggle .ds-when-paused { line-height: 0; }

.has-primary-background-color .ds-slider__counter,
.has-primary-dark-background-color .ds-slider__counter { color: #FFFFFF; }
.has-primary-background-color .ds-caption-text,
.has-primary-dark-background-color .ds-caption-text { color: #E6F0F9; }
.has-primary-background-color .ds-slider__progress,
.has-primary-dark-background-color .ds-slider__progress { background: rgba(255, 255, 255, .25); }
.has-primary-background-color .ds-slider__progress span,
.has-primary-dark-background-color .ds-slider__progress span { background: #FFFFFF; }

/* ---------- Grid + filters ---------- */
.ds-grid__filters {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: 1.75rem;
}
.ds-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	padding: .45rem 1.1rem;
	border: 2px solid var(--dsc-line);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--dsc-text);
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: border-color .2s var(--dsc-ease), background-color .2s var(--dsc-ease), color .2s var(--dsc-ease);
}
.ds-chip:hover { border-color: var(--dsc-navy); }
.ds-chip[aria-pressed="true"] { background: var(--dsc-navy); border-color: var(--dsc-navy); color: #FFFFFF; }
.ds-chip__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.6em;
	height: 1.6em;
	padding: 0 .35em;
	border-radius: 999px;
	background: var(--dsc-sky);
	color: var(--dsc-navy-dark);
	font-size: .8125rem;
}
.ds-chip[aria-pressed="true"] .ds-chip__count { background: rgba(255, 255, 255, .2); color: #FFFFFF; }

.ds-grid__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ds-grid__item { margin: 0; }
.ds-grid__item[hidden] { display: none; }
.ds-grid__item figure { margin: 0; }
.ds-grid__item .ds-zoom img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.ds-grid__item figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .6rem;
	margin-top: .7rem;
	font-size: .9375rem;
	line-height: 1.45;
}
@media (prefers-reduced-motion: no-preference) {
	.ds-js .ds-grid__item.is-entering { animation: ds-fade-up .45s var(--dsc-ease) both; }
}
@keyframes ds-fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Lightbox ---------- */
.ds-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #FFFFFF;
	overflow: hidden;
}
.ds-lightbox::backdrop { background: rgba(8, 17, 30, .94); }
.ds-lightbox[open] { display: block; }
@media (prefers-reduced-motion: no-preference) {
	.ds-lightbox[open] .ds-lightbox__figure { animation: ds-zoom-in .3s var(--dsc-ease) both; }
}
@keyframes ds-zoom-in {
	from { opacity: 0; transform: scale(.97); }
	to { opacity: 1; transform: none; }
}
.ds-lightbox__inner {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	place-items: center;
	height: 100%;
	padding: 72px 16px 20px;
	box-sizing: border-box;
}
@media (min-width: 800px) { .ds-lightbox__inner { padding: 64px 96px 24px; } }
.ds-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 0;
	max-height: 100%;
	margin: 0;
}
.ds-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - 190px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	background: #1B2633;
}
.ds-lightbox__caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: .35rem .7rem;
	max-width: 70ch;
	text-align: center;
	font-size: 1rem;
	line-height: 1.5;
}
.ds-lightbox__caption .ds-tag { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.ds-lightbox__caption .ds-caption-text { color: #DCE6F0; }
.ds-lightbox__counter {
	margin: 10px 0 0;
	font-variant-numeric: tabular-nums;
	color: #DCE6F0;
	font-size: .9375rem;
}
.ds-lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color .2s var(--dsc-ease);
}
.ds-lightbox__btn:hover { background: rgba(255, 255, 255, .24); }
.ds-lightbox__btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.ds-lightbox__btn .ds-icon { width: 26px; height: 26px; }
.ds-lightbox__close { top: 12px; right: 12px; }
.ds-lightbox__prev,
.ds-lightbox__next { top: 50%; transform: translateY(-50%); }
.ds-lightbox__prev { left: 16px; }
.ds-lightbox__next { right: 16px; }
@media (max-width: 799px) {
	.ds-lightbox__prev,
	.ds-lightbox__next { top: auto; bottom: 14px; transform: none; }
}
.ds-lightbox__btn[hidden] { display: none; }
html.ds-lightbox-open { overflow: hidden; }

/* ---------- Reviews ---------- */
.ds-reviews { display: grid; gap: 2rem; }
.ds-reviews__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	padding: 1.1rem 1.5rem;
	background: #FFFFFF;
	border: 1px solid var(--dsc-line);
	border-radius: var(--dsc-radius);
	box-shadow: var(--dsc-shadow);
}
.ds-reviews__brand { width: 32px; height: 32px; color: var(--dsc-navy); }
.ds-reviews__score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .75rem;
	margin: 0;
	flex: 1 1 auto;
}
.ds-reviews__number {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--dsc-navy-dark);
	letter-spacing: -.02em;
}
.ds-reviews__all {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-weight: 700;
	color: var(--dsc-link);
}

.ds-stars { display: inline-flex; gap: 2px; color: var(--dsc-star); line-height: 0; }
.ds-stars .ds-icon { width: 1.15rem; height: 1.15rem; stroke-width: 1.5; }
.ds-stars .ds-icon.is-off { fill: none; color: #B9B2A7; }

.ds-reviews__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ds-review { margin: 0; display: flex; }
.ds-review__figure {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	width: 100%;
	margin: 0;
	padding: 1.6rem 1.6rem 1.4rem;
	background: #FFFFFF;
	border: 1px solid var(--dsc-line);
	border-radius: var(--dsc-radius-l);
	box-shadow: var(--dsc-shadow);
}
.ds-review__quote {
	position: absolute;
	top: 1.25rem;
	right: 1.4rem;
	width: 34px;
	height: 34px;
	color: #D6E6F4;
	fill: #EEF4FA;
}
.ds-review__recommends {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	font-weight: 700;
	font-size: .9375rem;
	color: var(--dsc-success);
}
.ds-review__text { margin: 0; padding: 0; border: 0; font-style: normal; flex: 1; }
.ds-review__text p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--dsc-text); }
.ds-review__more { font-weight: 700; font-size: .9375rem; color: var(--dsc-link); }
.ds-review__meta {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding-top: 1rem;
	border-top: 1px solid #ECE8E2;
}
.ds-review__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--dsc-navy);
	color: #FFFFFF;
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: .02em;
}
.ds-review--facebook .ds-review__avatar { background: #3F8A31; }
.ds-review__who { display: grid; line-height: 1.35; }
.ds-review__author { color: var(--dsc-navy-dark); }
.ds-review__source {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .875rem;
	color: var(--dsc-muted);
}
.ds-review__source .ds-icon { width: .95rem; height: .95rem; }

.ds-reviews__empty {
	padding: 1.75rem;
	background: #FFFFFF;
	border: 1px solid var(--dsc-line);
	border-radius: var(--dsc-radius);
}
.ds-reviews__empty > p { margin-top: 0; }
.ds-reviews__platforms {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ds-platform {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 48px;
	padding: .6rem 1.1rem;
	border: 2px solid var(--dsc-line);
	border-radius: 12px;
	color: var(--dsc-navy-dark);
	font-weight: 700;
	text-decoration: none;
	transition: border-color .2s var(--dsc-ease);
}
.ds-platform:hover { border-color: var(--dsc-navy); }

.ds-reviews__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	padding: 1.75rem 2rem;
	background: var(--dsc-sky);
	border-radius: var(--dsc-radius-l);
	position: relative;
	overflow: hidden;
}
.ds-reviews__cta::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 6px;
	background: linear-gradient(180deg, #168CD6 0 33%, #C8221A 33% 66%, #3F8A31 66%);
}
.ds-reviews__cta-text { flex: 1 1 320px; }
.ds-reviews__cta-title { margin: 0 0 .35rem; font-size: 1.375rem; color: var(--dsc-navy-dark); }
.ds-reviews__cta-text p { margin: 0; color: var(--dsc-text); }
.ds-reviews__cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* Reviews row (layout "marquee"): one non-wrapping row; reviews.js auto-scrolls it when it overflows. */
.ds-reviews__marquee { display: grid; gap: 1rem; min-width: 0; }
.ds-reviews__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 6px;
	scrollbar-width: thin;
	padding: 6px 6px 20px;
	margin: -6px -6px -14px;
	border-radius: var(--dsc-radius-l);
}
.ds-reviews__list--row {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	margin-inline: auto;
}
.ds-reviews__list--row > .ds-review { flex: 0 0 min(340px, 80vw); scroll-snap-align: start; }
.ds-reviews__marquee.is-running .ds-reviews__viewport { scroll-snap-type: none; scrollbar-width: none; }
.ds-reviews__marquee.is-running .ds-reviews__viewport::-webkit-scrollbar { display: none; }
.ds-reviews__marquee.is-overflow .ds-reviews__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.ds-reviews__controls { display: flex; justify-content: center; align-items: center; gap: 12px; }
.ds-reviews__controls[hidden],
.ds-reviews__ctrl[hidden] { display: none; }
.ds-reviews__ctrl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--dsc-navy);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--dsc-navy);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s var(--dsc-ease), color .2s var(--dsc-ease);
}
.ds-reviews__ctrl:hover:not(:disabled) { background: var(--dsc-navy); color: #FFFFFF; }
.ds-reviews__ctrl:disabled { opacity: .4; cursor: default; }
.ds-reviews__ctrl .ds-icon { width: 22px; height: 22px; }

/* ---------- Contact form ---------- */
.ds-form-wrap { scroll-margin-top: 120px; }
.ds-form { display: grid; gap: 1.25rem; }
.ds-form__intro { margin: 0; font-size: .9375rem; color: var(--dsc-muted); }
.ds-form__grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) {
	.ds-form__grid { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
	/* Paired fields share label / hint / error / input rows, so the inputs line up even if only one has a hint. */
	@supports (grid-template-rows: subgrid) {
		/* Parent gutters would also appear between the (often empty) sub-rows, so space the field rows with margins instead. */
		.ds-form__grid { row-gap: 0; }
		.ds-form__grid > .ds-field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
		.ds-form__grid > .ds-field:nth-child(n+3) { margin-top: 1.25rem; }
		.ds-form__grid > .ds-field > label { grid-row: 1; margin-bottom: .4rem; }
		.ds-form__grid > .ds-field > .ds-field__hint { grid-row: 2; margin-bottom: .4rem; }
		.ds-form__grid > .ds-field > .ds-field__error { grid-row: 3; margin-bottom: .4rem; }
		.ds-form__grid > .ds-field > :is(input, select, textarea) { grid-row: 4; }
	}
}
.ds-field { display: grid; gap: .4rem; margin: 0; }
.ds-field > label { font-weight: 700; color: var(--dsc-text); }
.ds-req { color: var(--dsc-error); }
.ds-field__hint { margin: 0; font-size: .9375rem; color: var(--dsc-muted); line-height: 1.45; }
.ds-field__error {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--dsc-error);
}
.ds-field__error .ds-icon { width: 1rem; height: 1rem; }

.ds-form input[type="text"],
.ds-form input[type="email"],
.ds-form input[type="tel"],
.ds-form select,
.ds-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: .75rem 1rem;
	border: 2px solid var(--dsc-field);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--dsc-text);
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1.4;
	transition: border-color .2s var(--dsc-ease), box-shadow .2s var(--dsc-ease);
}
.ds-form textarea { min-height: 160px; resize: vertical; }
.ds-form select {
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D4C80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 20px;
}
.ds-form :is(input, select, textarea):hover { border-color: #545B66; }
.ds-form :is(input, select, textarea):focus-visible {
	outline: none;
	border-color: var(--dsc-navy);
	box-shadow: 0 0 0 4px rgba(22, 140, 214, .35);
}
.ds-field.has-error :is(input, select, textarea),
.ds-form [aria-invalid="true"] { border-color: var(--dsc-error); }

.ds-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.ds-form__privacy { margin: 0; font-size: .9375rem; color: var(--dsc-muted); }
.ds-form__privacy a { color: var(--dsc-link); }
.ds-form__submit.wp-element-button {
	justify-self: start;
	min-height: 54px;
	padding-inline: 2rem;
	font-size: 1.0625rem;
	cursor: pointer;
}
.ds-form__submit[aria-busy="true"] { opacity: .75; cursor: progress; }
@media (max-width: 520px) {
	.ds-form__submit.wp-element-button { justify-self: stretch; }
}

.ds-form-errors,
.ds-form-success {
	margin-bottom: 1.5rem;
	padding: 1.1rem 1.4rem;
	border-radius: var(--dsc-radius);
	border: 2px solid;
}
.ds-form-errors { background: #FDF2F1; border-color: #E8B4AE; }
.ds-form-errors__title { margin: 0 0 .5rem; font-size: 1.125rem; color: var(--dsc-error); }
.ds-form-errors ul { margin: 0; padding-left: 1.2rem; }
.ds-form-errors a { color: var(--dsc-error); font-weight: 700; }
.ds-form-success {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: #EFF7EC;
	border-color: #A9D29E;
}
.ds-form-success__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: 999px;
	background: var(--dsc-success);
	color: #FFFFFF;
	box-sizing: border-box;
}
.ds-form-success__title { margin: 0 0 .35rem; font-size: 1.25rem; color: var(--dsc-success); }
.ds-form-success p { margin: .25rem 0; }
.ds-form-errors:focus,
.ds-form-success:focus { outline: 3px solid #168CD6; outline-offset: 3px; }

/* ---------- Profile photo ---------- */
.ds-profile-photo {
	display: block;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	background: #ECE8E2;
	box-shadow: 0 10px 26px rgba(9, 58, 99, .16);
}
.ds-profile-photo--large {
	width: min(200px, 100%);
	height: auto;
	margin: 0 auto 1rem;
}
.ds-profile-photo--small {
	width: 50px;
	height: 50px;
	flex: 0 0 50px;
	margin: 0;
}
.ds-profile-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}
.ds-profile-heading > :is(h1, h2, h3, h4, h5, h6, p) { margin-block: 0; }
.ds-profile-column .ds-profile-photo--large { margin-inline: auto; }
@media (min-width: 782px) {
	.ds-profile-column--float .ds-profile-photo--large {
		float: right;
		margin: .15rem 0 1rem 1.25rem;
	}
}

/* ---------- 404 ---------- */
.ds-not-found { max-width: 720px; }
.ds-not-found__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
.ds-not-found__links a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: .55rem 1.2rem;
	border: 2px solid var(--dsc-navy);
	border-radius: 10px;
	color: var(--dsc-navy);
	font-weight: 700;
	text-decoration: none;
}
.ds-not-found__links a:hover { background: var(--dsc-navy); color: #FFFFFF; }

/* ---------- Beheer placeholder in the editor ---------- */
.ds-app-placeholder {
	padding: 1.5rem;
	border: 2px dashed var(--dsc-line);
	border-radius: var(--dsc-radius);
	background: var(--dsc-sand);
}

/* ---------- Windows high contrast ---------- */
@media (forced-colors: active) {
	.ds-chip[aria-pressed="true"] { border-color: Highlight; outline: 2px solid Highlight; }
	.ds-slider__progress span { background: Highlight; }
	.ds-stars .ds-icon.is-on { fill: CanvasText; }
}

/* Address autocomplete (combobox) */
.ds-field--address { position: relative; }

.ds-address-listbox {
	position: absolute;
	z-index: 30;
	inset: calc(100% + .35rem) 0 auto;
	box-sizing: border-box;
	max-height: min(18rem, 52vh);
	margin: 0;
	padding: .35rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	background: #FFFFFF;
	border: 2px solid var(--dsc-navy);
	border-radius: 12px;
	box-shadow: var(--dsc-shadow-lift);
	color: var(--dsc-text);
}

.ds-address-listbox[hidden] { display: none; }

.ds-address-option {
	display: flex;
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: .7rem .9rem .7rem 1rem;
	border-radius: 9px;
	cursor: pointer;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.ds-address-option + .ds-address-option { margin-top: .15rem; }

.ds-address-option:hover,
.ds-address-option.is-active,
.ds-address-option[aria-selected="true"] {
	background: var(--dsc-navy);
	color: #FFFFFF;
	box-shadow: inset 4px 0 0 #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
	.ds-address-listbox { scroll-behavior: auto; }
}

@media (forced-colors: active) {
	.ds-address-listbox {
		border-color: CanvasText;
		box-shadow: none;
	}
	.ds-address-option.is-active,
	.ds-address-option[aria-selected="true"] {
		background: Highlight;
		color: HighlightText;
		box-shadow: none;
		outline: 2px solid Highlight;
	}
}