/* =====================================================================
   Grotenhuis Makelaardij — design-laag (Realworks inbouw, module Wonen)
   ===================================================================== */

:root {
	/* Merkkleuren */
	--gh-blue:        #2e7dc6;  /* koppen, links, woningtitels */
	--gh-blue-dark:   #1f5fa0;  /* hover/donkerder blauw */
	--gh-orange:      #eb6b14;  /* CTA-knoppen, open-huis, iconen */
	--gh-orange-dark: #cf5d0e;  /* CTA hover */
	--gh-band:        #d6ebf7;  /* licht-blauwe (chevron)band, hero */
	--gh-navy:        #16324b;  /* "Verkocht"-badge */
	--gh-openhuis-bg: #fbdcc4;  /* open-huis banner op detail */

	/* Neutralen */
	--gh-text:        #333333;
	--gh-muted:       #6b7280;
	--gh-line:        #e2e8f0;
	--gh-white:       #ffffff;

	/* Filterbalk */
	--gh-filter-band: #D9EDFB;  /* balk-achtergrond; lichter dan --gh-band */
	--gh-filter-line: #c5cad1;  /* rand om selects en chips */
	--gh-filter-text: #101d32;  /* donkerblauw label-/chiptekst */

	/* Vorm */
	--gh-radius:      4px;
	--gh-radius-pill: 999px;   /* knoppen zijn pil-vormig */
	--gh-control-h:   44px;    /* alle filter-controls delen deze hoogte */

	/* Ritme */
	--gh-gap:         24px;
	--gh-space:       16px;
}

/* Het hidden-attribuut moet ook winnen van componenten die display:flex/grid
   zetten (tab-panels, gepagineerde foto-tegels). */
[hidden] { display: none !important; }

/* CTA-knop */
.gh-button {
	display: inline-block;
	padding: 8px 24px;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-orange);
	color: var(--gh-white);
	font-weight: 700;
	text-decoration: none;
	border: 2px solid var(--gh-orange);
	transition: background-color .15s ease, border-color .15s ease;
}
/* Hover = omkeren: witte vulling, oranje tekst + rand. */
.gh-button:hover,
.gh-button:focus-visible {
	background: var(--gh-white);
	color: var(--gh-orange);
	border-color: var(--gh-orange);
}
/* Empty-state: leeg archief (geen woningen ingelezen / geen resultaten) */
.gh-empty {
	max-width: 640px;
	margin: 48px auto;
	padding: 40px 24px;
	text-align: center;
	background: var(--gh-band);
	border-radius: var(--gh-radius);
}
.gh-empty__title {
	margin: 0 0 8px;
	color: var(--gh-blue);
	font-size: 1.4rem;
	font-weight: 700;
}
.gh-empty__text {
	margin: 0;
	color: var(--gh-text);
}

/* =====================================================================
   Archief-componenten (woningkaart + grid + filterbalk)
   ===================================================================== */

/* Hello Elementor constraint't archief-content niet zelf. */
.gh-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.gh-section { padding: 40px 0; }

/* Filterbalk. Alle controls delen --gh-control-h; dat houdt ze op één lijn.
   #entity-search wordt door de LiveForm vervangen, dus deze styling mag niet afhangen
   van JS-toegevoegde classes binnen de balk — behalve .is-expanded, die archive.js
   na elke refresh opnieuw zet. */
.gh-filters { margin: 28px 0; }

/* LET OP — de theme-reset (assets/css/reset.css) geeft élke kale <button> een roze (#c36)
   rand en vulling op :hover en :focus. Die regels staan op `button:hover` (0,1,1) en winnen
   van een losse class (0,1,0). Elke knop hieronder zet daarom expliciet z'n eigen
   hover-/focus-uiterlijk (0,2,0), plus border/background/font. */

.gh-filters__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.gh-chip { display: inline-flex; align-items: center; gap: 4px;
	height: 38px; padding: 0 10px;
	border: 1px solid var(--gh-filter-line); border-radius:0;
	background: var(--gh-white); color: var(--gh-filter-text);
	font: inherit; cursor: pointer;
	transition: border-color .15s ease, color .15s ease; }
/* background moet mee, anders wint de roze button:hover uit de theme-reset. */
.gh-chip:hover,
.gh-chip:focus {
	background: var(--gh-white); border-color: var(--gh-orange); color: var(--gh-orange); }
.gh-chip:focus-visible { outline: 2px solid var(--gh-blue); outline-offset: 2px; }
.gh-chip__remove { display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px;
	color: var(--gh-muted); font-size: 1.3rem; line-height: 1; }
.gh-chip:hover .gh-chip__remove,
.gh-chip:focus .gh-chip__remove { color: var(--gh-orange); }

.gh-filters__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	padding: 12px 14px; background: var(--gh-filter-band); border-radius: var(--gh-radius); }
.gh-filters.is-expanded .gh-filters__bar { border-radius: var(--gh-radius) var(--gh-radius) 0 0; }

.gh-filters__toggle { display: inline-flex; align-items: center; gap: 10px;
	height: var(--gh-control-h); padding: 0 12px;
	border: 0; border-radius: var(--gh-radius); background: none; cursor: pointer;
	font: inherit; font-weight: 700;
	color: var(--gh-filter-text); white-space: nowrap;
	transition: background-color .15s ease, color .15s ease; }
/* Het icoon is inline SVG op currentColor en kleurt mee. Zonder deze regel: roze. */
.gh-filters__toggle:hover,
.gh-filters__toggle:focus { background: var(--gh-band); color: var(--gh-blue); }
.gh-filters__toggle:focus-visible { outline: 2px solid var(--gh-blue); outline-offset: 2px; }
.gh-filters__toggle-icon { flex: none; }
.gh-filters.is-expanded .gh-filters__toggle-icon { color: var(--gh-blue); }

/* Een native <select> is zo breed als z'n breedste optie, niet als de gekozen — zonder
   expliciete basis breekt de balk naar een tweede rij. Afkappen kost geen informatie:
   het volle label staat in de chip erboven. nowrap omdat flex anders eerst afbreekt
   en pas daarna krimpt. */
.gh-filters__bar { flex-wrap: nowrap; }
.gh-filters__bar .gh-select { flex: 1 1 auto; min-width: 0; }
.gh-filters__bar .gh-select__input,
.gh-filters__more .gh-select__input { width: 100%; min-width: 0; }
.gh-filters__more .gh-select { flex: 0 1 auto; min-width: 92px; }
.gh-filters__toggle { flex: none; }

/* Even specifiek als `.gh-filters__bar .gh-select` hierboven, anders verliezen deze regels.
   Sorteren krijgt de meeste ruimte: die toont altijd een waarde en heeft geen chip. */
.gh-filters__bar .gh-select--type       { flex-basis: 110px; }
.gh-filters__bar .gh-select--plaats     { flex-basis: 200px; }
.gh-filters__bar .gh-select--woningtype { flex-basis: 130px; }
.gh-filters__bar .gh-select--prijs      { flex-basis: 115px; }
.gh-filters__bar .gh-select--status     { flex-basis: 110px; }
.gh-filters__bar .gh-select--sort       { flex-basis: 160px; }

.gh-filters__bar .gh-select--plaats #radius {width:165px;}

.gh-select { position: relative; display: inline-flex; }
.gh-select__input { appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer;
	height: var(--gh-control-h); max-width: 100%; padding: 0 30px 0 12px;
	border: 1px solid var(--gh-filter-line); border-radius: var(--gh-radius);
	background: var(--gh-white); color: var(--gh-filter-text);
	text-overflow: ellipsis; }
.gh-select__input:hover { border-color: var(--gh-blue); }
.gh-select__input:focus-visible { outline: 2px solid var(--gh-blue); outline-offset: 1px; }
/* Driehoekje i.p.v. een glyph: schaalt niet mee met het lettertype. */
.gh-select::after { content: ""; position: absolute; right: 11px; top: 50%; margin-top: -2px;
	width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
	border-top: 6px solid var(--gh-filter-text); pointer-events: none; }

/* Tweede rij, achter "Toon alle filters". Sluit naadloos aan op de balk. */
.gh-filters__more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	padding: 0 14px 14px; background: var(--gh-filter-band);
	border-radius: 0 0 var(--gh-radius) var(--gh-radius); }

/* Zonder JS ververst de balk niet op change; dan is deze knop de enige uitweg. */
.gh-filters__submit { height: var(--gh-control-h); padding: 0 22px; }
body.has-js .gh-filters__submit { display: none; }

/* Ruimte tot de CTA-band eronder: klant-template 1946 brengt zelf geen marge mee. */
#entity-search-form { margin-bottom: 56px; }

/* LiveForm zet .search-loading op het formulier zolang de fetch loopt. */
#entity-search-form.search-loading #entity-results { opacity: .45; pointer-events: none; }
#entity-results { transition: opacity .15s ease; }

/* Onder ~1100px past de rij niet meer; dan weer afbreken i.p.v. platdrukken. */
@media (max-width: 1100px) {
	.gh-filters__bar { flex-wrap: wrap; }
	.gh-filters__bar .gh-select { flex: 1 1 140px; }
}

/* Grid */
.gh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 80px 24px; }
@media (max-width: 1100px) { .gh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .gh-grid { grid-template-columns: 1fr; } }

/* Woningkaart */
.gh-card { display: flex; flex-direction: column; background: var(--gh-white); }
.elementor-shortcode .gh-card {
	background:none;
    background-color:transparent;
}
.elementor-shortcode .gh-gallery__viewport {
	background:none;
	background-color:transparent;
}
.gh-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden;
	background: linear-gradient(135deg, #c9d6e3, #aebfce); }
.gh-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gh-card__badge { position: absolute; top: 0; left: 0; padding: 6px 16px; border-radius: 0 0 12px 0;
	font-weight: 700; font-size: .85rem; color: var(--gh-white); }
.gh-card__badge--openhuis { background: var(--gh-orange); }
.gh-card__badge--verkocht,
.gh-card__badge--voorbehoud { background: var(--gh-navy); }
.gh-card__title { margin: 14px 0 0; color: var(--gh-blue); font-size: 1.25rem;
	font-weight: 700; line-height: 1.2; }
.gh-card__title a { color: inherit; text-decoration: none; transition: color .15s ease; }
.gh-card__title a:hover, .gh-card__title a:focus-visible { color: var(--gh-orange); }
.gh-card__place { margin: 0; color: var(--gh-text); }
.gh-card__price { margin: 0 0 12px; font-weight: 700; color: var(--gh-text); }
.gh-card__openhuis { margin: 0 0 12px; color: var(--gh-orange); font-weight: 700; }
.gh-card__openhuis span { display: block; font-weight: 400; }
.gh-card__features { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
/* De tekst moet in een span: los in een flexbox wordt de <sup> van "m²" een eigen flex-item
   en verliest hij zijn baseline — dan leest er "0 m  2". Geldt ook voor .gh-strip. */
.gh-card__features li { display: flex; align-items: center; gap: 10px; color: var(--gh-text); }
.gh-card__features li span { min-width: 0; }
.gh-card__features img { width: 20px; height: 20px; flex: none; }
.gh-card__cta { margin-top: auto; }

/* =====================================================================
   Detailpagina-componenten
   ===================================================================== */

/* Breadcrumb */
.gh-breadcrumb { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	padding: 16px 0; color: var(--gh-muted); }
.gh-breadcrumb a { color: var(--gh-muted); text-decoration: none; }
.gh-breadcrumb a:hover { color: var(--gh-blue); }
.gh-breadcrumb__back { color: var(--gh-blue); font-weight: 600; }

/* Kop: titelblok + interesseblok (klant-template 1950) */
.gh-detail__head { display: grid; grid-template-columns: 1fr 480px; gap: var(--gh-gap); align-items: start; }
@media (max-width: 900px) { .gh-detail__head { grid-template-columns: 1fr; } }
.gh-detail__title { color: var(--gh-blue); font-size: 40px; font-weight: 600; line-height:1; margin: 0; font-family:"Anek Malayalam"; }
.gh-detail__place { margin: 0; }
.gh-detail__price { margin: 0; font-weight: 700; font-size: 1.15rem; }
.gh-openhuis-banner { display: inline-flex; flex-wrap: wrap; gap: 6px 20px; align-items: center;
	background: var(--gh-openhuis-bg); color: var(--gh-orange-dark); font-weight: 700;
	padding: 8px 16px; border-radius: var(--gh-radius); }
.gh-status-banner { display: inline-flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; margin-top:20px;
 background-color: var( --e-global-color-bb1bf9b ); color:var(--gh-blue); font-weight: 700;
	padding-right:16px; border-radius:0 0 0 10px;
	width:100%;
}

.gh-status-banner b {
	background:var(--gh-blue);
	color: var( --e-global-color-bb1bf9b );;
	padding:8px 16px;
	border-radius:0 0 10px 0;
}

/* Galerij-carrousel: de track schuift, het aantal zichtbare tegels volgt de breedte */
.gh-gallery { position: relative; margin-top: 20px; }
.gh-gallery__viewport { overflow: hidden; border-radius: var(--gh-radius); background-color:#fff; }
.gh-gallery__track { display: flex; gap: 8px; transition: transform .35s ease; will-change: transform; }
.gh-gallery__track .gh-gallery__img { flex: 0 0 calc((100% - 16px) / 3); }
@media (max-width: 760px) { .gh-gallery__track .gh-gallery__img { flex-basis: calc((100% - 8px) / 2); } }
@media (max-width: 520px) { .gh-gallery__track .gh-gallery__img { flex-basis: 100%; } }
.gh-gallery__img {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: var(--gh-radius);
	overflow: hidden;
	background: linear-gradient(135deg, #c9d6e3, #aebfce);
	display: flex; align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.9);
	font-weight: 700;
}
.gh-gallery__floorplan {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: var(--gh-radius);
	overflow: hidden;
	display: flex; align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.9);
	font-weight: 700;
	background-color:#fff;
}
.gh-gallery__floorplan img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: contain; display: block;
}
/* Wint van de theme-reset img{max-width:100%;height:auto}, anders krimpt de foto. */
.gh-gallery__img img { position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block; }
.gh-gallery__nav { position: absolute; bottom:12px; z-index: 2; width: 44px; height: 28px; padding:0;
	border: 0; background: rgba(255,255,255,.92); color: var(--gh-text);
	cursor: pointer; font: inherit; font-size: 1.2rem;
	box-shadow: 0 1px 5px rgba(0,0,0,.2); transition: opacity .15s ease, background-color .15s ease, color .15s ease; }
.gh-gallery__nav--prev { left: 12px; }
.gh-gallery__nav--next { right: 12px; }
/* Zonder eigen hover/focus kleurt de theme-reset ook deze knop roze — zie .gh-chip. */
.gh-gallery__nav:hover,
.gh-gallery__nav:focus { background: var(--gh-white); color: var(--gh-blue); }
.gh-gallery__nav:focus-visible { outline: 2px solid var(--gh-blue); outline-offset: 2px; }
.gh-gallery__nav:disabled { opacity: .35; cursor: default; }

/* Volle-breedte band met galerij + kenmerken-strip; clip-path maakt de chevron-punt.
   Staat buiten .gh-container zodat de band edge-to-edge loopt. */
.gh-band { background: var(--gh-band); }
.gh-band--media { padding-top: 0;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 50% 100%, 0 calc(100% - 46px)); }
.gh-band--media > .gh-container { padding-bottom: 78px; }
.gh-band--media .gh-gallery { margin-top: 0; }
/* In de band levert de band zelf het blauw; de strip wordt transparant. */
.gh-band--media .gh-strip { background: transparent; border-radius: 0; padding: 22px 0 0; margin: 22px 0 0; }

/* Kenmerken-strip op de band */
.gh-strip { background: var(--gh-band); border-radius: var(--gh-radius); padding: 22px 28px; margin: 8px 0 40px; }
.gh-strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 32px; }
@media (max-width: 760px) { .gh-strip ul { grid-template-columns: 1fr; } }
.gh-strip li { display: flex; align-items: center; gap: 10px; }
.gh-strip li span { min-width: 0; }
.gh-strip img { width: 22px; height: 22px; flex: none; }

/* margin-top speelt de chevron-punt van .gh-band--media vrij (46px diep). */
.gh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 72px; }
@media (max-width: 900px) { .gh-cols { grid-template-columns: 1fr; gap: 32px; margin-top: 56px; } }
.gh-h2 { color: var(--gh-blue); font-size: 1.6rem; font-weight: 700; margin: 0 0 16px; }
.gh-readmore { display: inline-block; margin-top: 12px; color: var(--gh-orange); font-weight: 700; text-decoration: none; }
.gh-readmore:hover { color: var(--gh-orange-dark); }

/* Kenmerken-groepen */
.gh-kgroup { margin-bottom: 22px; }
.gh-kgroup__title { color: var(--gh-blue); font-weight: 700; margin: 0 0 6px; }
.gh-kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 5px 0;
	border-bottom: 1px solid var(--gh-line); }
.gh-kv span { min-width: 0; overflow-wrap: anywhere; }

/* Media: tabs + grid + paginering */
.gh-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--gh-line); margin-bottom: 18px;
	overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gh-tab { flex: 0 0 auto; white-space: nowrap; font: inherit; line-height: 1.2; padding: 10px 16px;
	border: 1px solid var(--gh-line); border-bottom: 0; cursor: pointer; background: #f4f7fa; color: var(--gh-text);
	border-radius: var(--gh-radius) var(--gh-radius) 0 0;
	transition: background-color .15s ease, color .15s ease; }
.gh-tab.is-active { background: var(--gh-white); color: var(--gh-blue); font-weight: 700; }
/* Moet expliciet, anders wordt ook deze knop roze — zie .gh-chip. */
.gh-tab:hover,
.gh-tab:focus { background: var(--gh-white); color: var(--gh-blue); }
.gh-tab:focus-visible { outline: 2px solid var(--gh-blue); outline-offset: 2px; }
.gh-media__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width:768px) {
	.gh-tab {
		font-size: 0.8rem;
		padding: 8px 8px;
	}
}


.gh-media__grid .gh-gallery__img { aspect-ratio: 3 / 2; }

/* Placeholder voor tab-panelen zonder media */
.gh-placeholder { min-height: 240px; border-radius: var(--gh-radius); display: flex; align-items: center;
	justify-content: center; color: var(--gh-muted);
	background: repeating-linear-gradient(45deg, #e7edf2, #e7edf2 12px, #dde5ec 12px, #dde5ec 24px); }

/* Video-tegel */
.gh-video { position: relative; aspect-ratio: 3 / 2; border-radius: var(--gh-radius); overflow: hidden; grid-column: span 2;
	background: #000; }
.gh-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* Brochure-knop onderaan de kenmerken-kolom */
.gh-brochure { margin-top: 8px; }

/* Lightbox — de overlay hangt aan <body>, buiten de clip-path van .gh-band--media;
   die zou 'm anders wegknippen. */
.gh-gallery__img.is-zoomable { cursor: zoom-in; }
.gh-gallery__img.is-zoomable::after { content: '⛶'; position: absolute; right: 8px; bottom: 6px; z-index: 1;
	width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
	border-radius: 6px; background: rgba(0,0,0,.45); color: var(--gh-white); font-size: 1rem; line-height: 1;
	opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.gh-gallery__img.is-zoomable:hover::after,
.gh-gallery__img.is-zoomable:focus::after { opacity: 1; }
.gh-gallery__img.is-zoomable:focus-visible { outline: 2px solid var(--gh-blue); outline-offset: 2px; }

.gh-noscroll { overflow: hidden; }
.gh-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
	gap: 12px; padding: 24px; background: rgba(12, 22, 32, .92); }
.gh-lightbox[hidden] { display: none; }
.gh-lightbox__stage { flex: 1 1 auto; margin: 0; display: flex; align-items: center; justify-content: center;
	max-width: 1100px; height: 100%; }
.gh-lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto;
	object-fit: contain; border-radius: var(--gh-radius); display: block; }
.gh-lightbox__counter { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
	color: rgba(255,255,255,.85); font-weight: 700; }

/* Expliciete hover/focus, anders kleuren ook deze knoppen roze — zie .gh-chip. */
.gh-lightbox__nav,
.gh-lightbox__close { flex: none; border: 0; cursor: pointer; font: inherit; color: var(--gh-text);
	background: rgba(255,255,255,.92); border-radius: 50%;
	transition: background-color .15s ease, color .15s ease; }
.gh-lightbox__nav { width: 48px; height: 48px; font-size: 1.3rem; }
.gh-lightbox__close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
/* De admin-bar (z-index 99999) ligt over de overlay; anders valt de sluitknop erachter. */
.admin-bar .gh-lightbox__close { top: 48px; }
.gh-lightbox__nav:hover, .gh-lightbox__nav:focus,
.gh-lightbox__close:hover, .gh-lightbox__close:focus { background: var(--gh-white); color: var(--gh-blue); }
.gh-lightbox__nav:focus-visible,
.gh-lightbox__close:focus-visible { outline: 2px solid var(--gh-white); outline-offset: 2px; }
.gh-lightbox__nav[hidden] { display: none; }
@media (max-width: 520px) {
	.gh-lightbox { padding: 12px; gap: 6px; }
	.gh-lightbox__nav { width: 40px; height: 40px; }
}
/* Paginering — stijlt twee bronnen: het archief via paginate_links()
   (.page-numbers/.current/.dots) en de media-pager uit JS (kale <a> + .is-active).
   Beide selector-sets meenemen bij wijzigingen. */
.gh-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 8px; margin-top: 32px; }
.gh-pagination a,
.gh-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 14px; line-height: 1; white-space: nowrap;
	border: 2px solid var(--gh-line); border-radius: var(--gh-radius-pill);
	background: var(--gh-white); color: var(--gh-text);
	font-weight: 700; text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Beide zijkanten delen de restruimte gelijk, dus de nummerreeks blijft gecentreerd
   ook als 'vorige' of 'volgende' ontbreekt. */
.gh-pagination__side { flex: 1 1 0; min-width: 0; display: flex; }
.gh-pagination__side--prev { justify-content: flex-start; }
.gh-pagination__side--next { justify-content: flex-end; }
.gh-pagination__pages { display: flex; flex-wrap: wrap; align-items: center;
	justify-content: center; gap: 8px; }
.gh-pagination a:not(.is-active):not(.current):hover,
.gh-pagination a:not(.is-active):not(.current):focus-visible {
	border-color: var(--gh-orange); color: var(--gh-orange);
}
.gh-pagination .is-active,
.gh-pagination .page-numbers.current {
	background: var(--gh-blue); border-color: var(--gh-blue); color: var(--gh-white);
}
.gh-pagination .page-numbers.dots {
	border-color: transparent; background: transparent; min-width: 0; padding: 0 2px;
	color: var(--gh-muted);
}
.gh-pagination__status { text-align: center; margin: 12px 0 0; color: var(--gh-muted); }
/* Smal: zijkanten niet meer uitrekken, alles wikkelt in één gecentreerde rij. */
@media (max-width: 620px) {
	.gh-pagination__side { flex: 0 0 auto; }
	.gh-pagination a,
	.gh-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; }
}

/* Kaart */
.gh-map { height: 320px; border-radius: var(--gh-radius); display: flex; align-items: center; justify-content: center;
	margin-top:80px;
	color: var(--gh-muted);
	background: repeating-linear-gradient(45deg, #e7edf2, #e7edf2 12px, #dde5ec 12px, #dde5ec 24px); }

/* Delen */
.gh-share { display: flex; align-items: center; justify-content: center; gap: 25px; margin: 80px 0 0; }
.gh-share img { width: 30px; height: 30px; }
.gh-share strong {margin-right:20px; font-size:18px; color:var( --e-global-color-secondary )}

/* Carrousel-shortcode [grotenhuis_woningen] — hergebruikt .gh-gallery__viewport/__track. */
.gh-carousel { position: relative; }
.gh-carousel__nav { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 18px; }
/* De hero-pijlen hangen absoluut op halve hoogte; hier staan ze boven de rij. */
.gh-carousel .gh-gallery__nav { position: static; transform: none; width: 44px; height: 28px; color:var( --e-global-color-primary );
	border: 1px solid var(--gh-line); border-radius: 6px; background: var(--gh-white);
	box-shadow: none; }
.gh-carousel .gh-gallery__viewport { overflow: hidden; }
/* In een gewone pagina wint .page-content a (0,1,1) van .gh-button (0,1,0) en krijgt de
   knop een onderstreping; deze regel is specifiek genoeg. */
.gh-carousel .gh-button { text-decoration: none; }
.gh-carousel__item { flex: 0 0 calc((100% - 2 * var(--gh-gap)) / 3); display: flex; }
.gh-carousel__item > .gh-card { width: 100%; }
.gh-carousel .gh-gallery__track { gap: var(--gh-gap); align-items: stretch; }
@media (max-width: 1000px) { .gh-carousel__item { flex-basis: calc((100% - var(--gh-gap)) / 2); } }
@media (max-width: 620px)  { .gh-carousel__item { flex-basis: 100%; } }

/* Soortgelijke woningen */
.gh-similar {padding:0 24px 40px; max-width:1440px; }
.gh-similar__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
	gap: 10px; margin: 80px 0 20px; border-top:3px solid var(--gh-blue); padding-top:80px }
.gh-similar__head h2 { color: var(--gh-blue); font-size: 40px; font-weight: 600; margin: 0; font-family:"Anek Malayalam"; }
.gh-similar__all { color: var(--gh-orange); font-weight: 600; text-decoration: none; white-space: nowrap; }
.gh-similar__all:hover, .gh-similar__all:focus { text-decoration: underline; }

/* =====================================================================
   Responsive-finetuning
   ===================================================================== */
@media (max-width: 900px) {
	.gh-detail__title { font-size: 1.6rem; }
	.gh-h2 { font-size: 1.35rem; }
}
@media (max-width: 620px) {
	.gh-filters__bar,
	.gh-filters__more { gap: 8px; }
	.gh-filters__toggle { width: 100%; }
	.gh-filters__bar .gh-select,
	.gh-filters__more .gh-select { flex: 1 1 140px; }
	.gh-filters__bar .gh-select__input,
	.gh-filters__more .gh-select__input { width: 100%; }
	.gh-similar__head h2 { font-size: 1.4rem; }
	.gh-detail__price { font-size: 1.05rem; }
	/* Kenmerken stapelen label boven waarde op smal scherm */
	.gh-kv { grid-template-columns: 1fr; gap: 2px; }
	.gh-kv span:first-child { color: var(--gh-muted); font-size: .9rem; }
}

.gh-section .elementor .e-con-inner,
.gh-section .elementor .elementor-element {
	max-width:unset;
	width:unset;
	margin:unset;
}

.gh-section .elementor > .elementor-element {
	padding:0;
}

.post-type-archive-realworks_wonen .elementor-1942 > .elementor-element,
.post-type-archive-realworks_wonen .elementor-1942 {
	margin-bottom:0;
}

.single-realworks_wonen .gh-container,
.post-type-archive-realworks_wonen .gh-container {
	max-width:1440px;
	padding-left:10px;
	padding-right:10px;
}

@media (min-width: 768px) {
.single-realworks_wonen .gh-container,
.post-type-archive-realworks_wonen .gh-container {
		padding-left:24px;
		padding-right:24px;
	}
}
.post-type-archive-realworks_wonen .gh-section {
	padding-top:0;
}

.post-type-archive-realworks_wonen .elementor-1942 .elementor-element.elementor-element-e793e4b:not(.elementor-motion-effects-element-type-background) {
	background-color:var(--e-global-color-bb1bf9b);
}

.gh-strip li span span {
	text-transform:lowercase
}
.panorama__slide {
  height: 410px;
  width: 100%;
}
.panorama__slider .flickity-button {
  background-color: var(--white-color);
  height: 50px;
  width: 50px;
}

.gh-media__grid .flickity-viewport {
	grid-column: span 2;
}