/* HoutskoolXXL Inhoud: servicepagina's, gidsen, calculator, Zakkie en collega's. Bouwt voort op hxl-winkelwagen.css (Huisstijl). */

.hxli-pagina,.hxli-cat-onder{max-width:1200px;margin:0 auto;padding:0 0 24px}
.hxli-cat-onder{padding:0 30px 24px}
.hxli-pagina h2,.hxli-team h2,.hxli-meer h2,.hxli-home-advies h2{font:700 32px/1.05 'Barlow Condensed','Arial Narrow',sans-serif;text-transform:uppercase;color:#1C1B19;margin:0}

/* Kop met figuur */
.hxl-kop-fig{display:flex;align-items:center;justify-content:space-between;gap:28px}
.hxl-kop-fig .hxl-kop-tekst{flex:1 1 auto;min-width:0}
.hxl-kop-fig .hxl-kop-tekst p{max-width:640px}
.hxli-fig{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;max-width:260px}
.hxli-fig img,.hxli-svg{display:block;width:120px;height:120px}
.hxli-svg svg{display:block;width:100%;height:100%}
.hxli-ballon{position:relative;order:-1;background:#fff;border:1px solid #DEDBD5;border-radius:14px;padding:12px 14px;font:400 14px/1.45 'Work Sans',system-ui,sans-serif;color:#3A3834;box-shadow:0 6px 18px rgba(28,27,25,.08)}
.hxli-ballon b{display:block;font:700 13px 'Work Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#C2410C;margin:0 0 3px}
.hxli-ballon:after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;background:#fff;border-right:1px solid #DEDBD5;border-bottom:1px solid #DEDBD5;transform:translateX(-50%) rotate(45deg)}

/* Servicenavigatie */
.hxli-snav{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 24px}
.hxli-snav a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid #DEDBD5;border-radius:999px;background:#fff;color:#1C1B19;font:600 14px 'Work Sans',system-ui,sans-serif;text-decoration:none}
.hxli-snav a:hover{border-color:#C2410C;color:#C2410C}
.hxli-snav a.actief{background:#1C1B19;border-color:#1C1B19;color:#fff}
.hxli-kruimel{margin:24px 0 0;font:400 14px 'Work Sans',system-ui,sans-serif;color:#5B5851}
.hxli-kruimel a{color:#C2410C}

/* Kaarten en tekst */
.hxli-kaart{gap:12px}
.hxli-tekst{font:400 16px/1.6 'Work Sans',system-ui,sans-serif;color:#3A3834}
.hxli-tekst p{margin:0 0 12px}
.hxli-tekst p:last-child{margin-bottom:0}
.hxli-tekst a:not(.hxl-zak-knop){color:#C2410C}
.hxli-lijst{margin:0;padding:0 0 0 20px}
.hxli-lijst li{margin:0 0 8px}
.hxli-stappen{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:14px}
.hxli-stappen li{counter-increment:s;position:relative;padding:0 0 0 46px;min-height:32px}
.hxli-stappen li:before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:#C2410C;color:#fff;font:700 15px/32px 'Work Sans',system-ui,sans-serif;text-align:center}
.hxli-stappen li b{display:block;color:#1C1B19}
.hxli-adres{font-weight:600;color:#1C1B19}
.hxli-chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hxli-chips li{padding:8px 14px;border-radius:999px;background:#F3F2EF;border:1px solid #E7E4DE;font:600 14px 'Work Sans',system-ui,sans-serif;color:#1C1B19}
.hxli-tabel table{width:100%;border-collapse:collapse}
.hxli-tabel th,.hxli-tabel td{padding:10px 12px;border-bottom:1px solid #E7E4DE;text-align:left;vertical-align:top}
.hxli-tabel th{font:600 13px 'Work Sans',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#5B5851}
.hxli-tabel .r{text-align:right;white-space:nowrap}

/* Tip van de dag */
.hxli-tip{display:flex;align-items:center;gap:20px;background:#FFF7ED;border:1px solid #FED7AA;border-radius:10px;padding:20px 24px;margin:28px 0}
.hxli-tip img,.hxli-tip .hxli-svg{width:88px;height:88px;flex:0 0 auto}
.hxli-tip p{margin:4px 0 6px;font:600 18px/1.45 'Work Sans',system-ui,sans-serif;color:#1C1B19}
.hxli-tip small{font:400 14px 'Work Sans',system-ui,sans-serif;color:#5B5851}
.hxli-tip small a{color:#C2410C}

/* Team */
.hxli-team{margin:28px 0}
.hxli-sub{margin:6px 0 18px;color:#5B5851}
.hxli-team-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hxli-lid{background:#fff;border:1px solid #DEDBD5;border-radius:10px;padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.hxli-lid img,.hxli-lid .hxli-svg{width:96px;height:96px;margin:0 0 8px}
.hxli-lid b{font:700 22px/1.1 'Barlow Condensed','Arial Narrow',sans-serif;text-transform:uppercase;color:#1C1B19}
.hxli-lid span{font:600 13px 'Work Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#C2410C}
.hxli-lid p{margin:6px 0 0;font:400 14px/1.5 'Work Sans',system-ui,sans-serif;color:#3A3834}

/* Gidsen */
.hxli-sectiekop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.hxli-sectiekop a{color:#C2410C;font:600 15px 'Work Sans',system-ui,sans-serif}
.hxli-meer{margin:28px 0}
.hxli-meer h2{margin:0 0 14px}
.hxli-gidsen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 24px}
.hxli-gkaart{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #DEDBD5;border-radius:10px;padding:18px;text-decoration:none!important;color:#1C1B19;transition:border-color .15s,transform .15s}
.hxli-gkaart:hover{border-color:#C2410C;transform:translateY(-2px)}
.hxli-gkaart img,.hxli-gkaart .hxli-svg{width:64px;height:64px;flex:0 0 auto}
.hxli-gkaart b{display:block;font:700 20px/1.1 'Barlow Condensed','Arial Narrow',sans-serif;text-transform:uppercase;color:#1C1B19;margin:2px 0 6px}
.hxli-gkaart small{display:block;font:400 14px/1.45 'Work Sans',system-ui,sans-serif;color:#5B5851}

/* Snelle links op contact */
.hxli-snel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hxli-snel a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid #DEDBD5;border-radius:10px;text-decoration:none!important;background:#FAFAF8}
.hxli-snel a:hover{border-color:#C2410C}
.hxli-snel b{color:#1C1B19;font:600 16px 'Work Sans',system-ui,sans-serif}
.hxli-snel span{color:#5B5851;font:400 14px 'Work Sans',system-ui,sans-serif}

/* Calculator */
.hxli-calc{border:2px solid #C2410C}
.hxli-calc-velden{display:grid;grid-template-columns:2fr repeat(3,1fr) 1.4fr;gap:12px}
.hxli-calc .hxl-zak-veld select,.hxli-calc .hxl-zak-veld input{width:100%;min-height:48px}
.hxli-calc-uit{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:stretch}
.hxli-calc-kg{background:#1C1B19;color:#fff;border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;justify-content:center}
.hxli-calc-kg span{font:600 13px 'Work Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FDBA74}
.hxli-calc-kg b{font:700 52px/1 'Barlow Condensed','Arial Narrow',sans-serif;color:#fff;margin-top:6px}
.hxli-calc-opties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hxli-calc-optie{position:relative;display:flex;flex-direction:column;gap:4px;border:1px solid #DEDBD5;border-radius:10px;padding:16px;background:#fff;font:400 14px 'Work Sans',system-ui,sans-serif;color:#5B5851}
.hxli-calc-optie.beste{border:2px solid #C2410C;background:#FFF7ED}
.hxli-calc-optie .n{font:600 15px/1.3 'Work Sans',system-ui,sans-serif;color:#1C1B19!important;text-decoration:none}
.hxli-calc-optie b{font:700 24px 'Barlow Condensed','Arial Narrow',sans-serif;color:#1C1B19;margin:4px 0 8px}
.hxli-calc-optie .hxl-zak-knop{margin-top:auto;min-height:44px;font-size:15px}
.hxli-badge{position:absolute;top:-11px;left:14px;background:#C2410C;color:#fff;border-radius:999px;padding:3px 10px;font:600 12px 'Work Sans',system-ui,sans-serif}

/* Tablet en telefoon */
@media (max-width:979px){
	.hxli-team-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
	.hxli-gidsen{grid-template-columns:repeat(2,minmax(0,1fr))}
	.hxli-snel{grid-template-columns:repeat(2,minmax(0,1fr))}
	.hxli-calc-velden{grid-template-columns:repeat(2,minmax(0,1fr))}
	.hxli-calc-velden .hxl-zak-veld:first-child{grid-column:1/-1}
	.hxli-calc-uit{grid-template-columns:1fr}
	.hxli-calc-opties{grid-template-columns:1fr}
}
@media (max-width:700px){
	.hxli-cat-onder{padding:0 16px 24px}
	.hxl-kop-fig{flex-direction:column;align-items:stretch;gap:16px}
	.hxli-fig{flex-direction:row;align-items:center;max-width:none;gap:12px}
	.hxli-fig img,.hxli-fig .hxli-svg{width:84px;height:84px;flex:0 0 auto}
	.hxli-ballon{order:1}
	.hxli-ballon:after{left:-8px;top:50%;bottom:auto;transform:translateY(-50%) rotate(135deg)}
	.hxli-pagina h2,.hxli-team h2,.hxli-meer h2,.hxli-home-advies h2{font-size:28px}
	.hxli-gidsen,.hxli-snel{grid-template-columns:1fr}
	.hxli-team-raster{grid-template-columns:1fr 1fr;gap:10px}
	.hxli-lid{padding:14px}
	.hxli-lid img,.hxli-lid .hxli-svg{width:72px;height:72px}
	.hxli-tip{flex-direction:row;align-items:flex-start;padding:16px;gap:14px}
	.hxli-tip img,.hxli-tip .hxli-svg{width:64px;height:64px}
	.hxli-tip p{font-size:16px}
	.hxli-tabel{overflow-x:auto}
	.hxli-tabel th,.hxli-tabel td{padding:8px}
	.hxli-snav{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px 4px}
	.hxli-snav a{flex:0 0 auto}
}

/* Kleine aanvullingen */
.hxli-calc .hxl-zak-veld input,.hxli-calc .hxl-zak-veld select{box-sizing:border-box;max-width:100%}
.hxli-pagina .hxl-h-band a:not(.hxl-zak-knop),.hxli-cat-onder .hxl-h-band a:not(.hxl-zak-knop){color:#FDBA74}
@media (max-width:700px){
	.hxli-pagina .hxl-zak-kop h1{font-size:44px;overflow-wrap:anywhere;hyphens:auto}
	.hxli-pagina h2{overflow-wrap:anywhere;hyphens:auto}
	.hxli-calc h2{font-size:26px}
	.hxl-zak-kaart.hxli-kaart,.hxli-calc{padding:20px}
}

/* Koppen boven Avada-stijlen houden */
.hxl-zak .hxli-meer h2,.hxl-zak .hxli-team h2,.hxl-home .hxli-home-advies h2,.hxl-home .hxli-team h2,.hxli-cat-onder h2{font:700 32px/1.05 'Barlow Condensed','Arial Narrow',sans-serif!important;text-transform:uppercase!important;color:#1C1B19!important;letter-spacing:0!important}
@media (max-width:700px){.hxl-zak .hxli-meer h2,.hxl-zak .hxli-team h2,.hxl-home .hxli-home-advies h2,.hxl-home .hxli-team h2,.hxli-cat-onder h2{font-size:28px!important}}

/* Teamkaarten passend op smalle schermen */
.hxli-team-raster>*{min-width:0}
.hxli-lid p,.hxli-lid b{overflow-wrap:anywhere;hyphens:auto}

/* Team op telefoon: één kolom, beeld links */
@media (max-width:700px){.hxli-team-raster{grid-template-columns:1fr!important}.hxli-lid{display:grid;grid-template-columns:72px 1fr;column-gap:14px;row-gap:2px;align-items:start}.hxli-lid img,.hxli-lid .hxli-svg{grid-row:1/span 3;margin:0}.hxli-lid p{margin:4px 0 0}}

/* Telefoon: kop calculator en tip */
@media (max-width:700px){.hxl-zak .hxli-calc h2{font-size:26px!important;overflow-wrap:normal!important;hyphens:none!important;word-break:normal!important}.hxli-tip p{font-size:16px!important;line-height:1.4!important}.hxli-tip .hxl-zak-label{font-size:12px}}