/* Opt-in maatwerkpresentatie. Alle kleuren komen uit de gedeelde themabasis. */
.hwa-maatwerk__intro{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:auto 1fr;gap:16px 48px;margin-block:24px 32px}
.hwa-maatwerk__titel{grid-column:2;grid-row:1;margin:0}
.hwa-maatwerk__beeld{grid-column:1;grid-row:1/3;margin:0;border:1px solid var(--wp--preset--color--border-subtle);border-radius:10px;background:var(--wp--preset--color--base);display:grid;place-items:center}

.hwa-maatwerk__actie{grid-column:2;grid-row:2}
.hwa-maatwerk__inhoud{margin-top:32px;scroll-margin-top:100px}
.hwa-maatwerkkaart{display:flex;flex-direction:column;height:100%;padding:18px;border:1px solid var(--wp--preset--color--border-subtle);border-radius:10px;background:var(--wp--preset--color--base)}
/* Vul alle subgridrijen van de producttegel; voorkom vier lege rijen onder maatwerkkaarten. */
.hwa-productgrid > * > .hwa-maatwerkkaart{grid-row:1 / -1;height:auto;box-sizing:border-box}
.hwa-maatwerkkaart__link{color:var(--wp--preset--color--contrast)}
.hwa-maatwerkkaart img{display:block;object-fit:contain;width:100%;height:150px;margin:10px 0 20px}
.hwa-maatwerkkaart h2{font-size:18px;line-height:1.35;margin:0 0 20px}
.hwa-maatwerkkaart__actie{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:auto;padding:8px 12px;border:1px solid var(--wp--preset--color--border-subtle);border-radius:6px;font-weight:600}
.hwa-maatwerkkaart__actie:hover{border-color:var(--wp--preset--color--primary)}

@media(max-width:767px){.hwa-maatwerk__intro{grid-template-columns:1fr;gap:12px;margin-top:16px}.hwa-maatwerk__titel{grid-column:1;grid-row:1}.hwa-maatwerk__beeld{grid-column:1;grid-row:2}.hwa-maatwerk__actie{grid-column:1;grid-row:3}.hwa-maatwerk__actie .wp-block-button,.hwa-maatwerk__actie .wp-block-button__link{width:100%}.hwa-maatwerkkaart{padding:12px}.hwa-maatwerkkaart img{height:105px}.hwa-maatwerkkaart h2{font-size:16px}}

.hwa-maatwerkkaart__prijs{font-size:14px;margin:0 0 12px}
/* 0.8.2: zelfde volgorde als .hwa-kaart: prijs, "incl. btw", dan de Woo-suffix "(€ x excl. btw)" op een eigen regel.
   Zonder deze regels stond er "€ 22,97 (€ 18,98 excl. btw)incl. btw" (get_price_html plus de toelichting uit Shop Core). */
.hwa-maatwerkkaart__prijs{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:2px}
.hwa-maatwerkkaart__prijs > .woocommerce-Price-amount{order:0;font-size:18px;font-weight:700;color:var(--wp--preset--color--contrast)}
.hwa-maatwerkkaart__prijs .hwa-prijs__toelichting{display:contents}
.hwa-maatwerkkaart__prijs .hwa-prijs__btw{order:1;font-size:12px;line-height:1.4;color:var(--wp--preset--color--muted)}
.hwa-maatwerkkaart__prijs .hwa-prijs__scheiding{display:none}
.hwa-maatwerkkaart__prijs .hwa-prijs__meter{order:3;flex-basis:100%;font-size:12px;color:var(--wp--preset--color--muted)}
.hwa-maatwerkkaart__prijs .woocommerce-price-suffix{order:2;flex-basis:100%;font-size:12px;line-height:1.4;color:var(--wp--preset--color--muted)}
/* 0.8.23 (Shop Core 0.8.10): maatwerkprijs als "Indicatie € x per meter incl. btw" met de excl-prijs eronder, op de kaart
   en op de maatwerkproductpagina. Woo's suffix komt bij maatwerk niet meer mee. */
.hwa-maatwerkkaart__prijs .hwa-prijs__indicatie{order:-1;font-size:12px;line-height:1.4;color:var(--wp--preset--color--muted)}
.hwa-maatwerkkaart__prijs .hwa-prijs__excl{order:2;flex-basis:100%;font-size:12px;line-height:1.4;color:var(--wp--preset--color--muted)}
/* 0.8.24: de flex hoort op de blokwrapper (daar staan Indicatie en de toelichting), het binnenste prijsvak is doorzichtig. */
.hwa-maatwerk__actie .wp-block-woocommerce-product-price.hwa-prijs--toelichting{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:2px}
.hwa-maatwerk__actie .hwa-prijs--toelichting .wc-block-components-product-price{display:contents}
.hwa-maatwerk__actie .hwa-prijs__toelichting{display:contents}
.hwa-maatwerk__actie .hwa-prijs__indicatie{order:-1;font-size:14px;font-weight:400;color:var(--wp--preset--color--muted)}
.hwa-maatwerk__actie .hwa-prijs__btw{order:1;font-size:14px;font-weight:400;color:var(--wp--preset--color--muted)}
.hwa-maatwerk__actie .hwa-prijs__excl{order:2;flex-basis:100%;font-size:13px;font-weight:400;color:var(--wp--preset--color--muted)}
.hwa-shop--dakrandshop .rps-site-kop .rps-kop:not(.rps-kop--afrekenen)>.rps-kop__balk{grid-template-columns:44px minmax(0,1fr) auto 44px;grid-template-areas:"nav merk account wagen";grid-template-rows:auto;padding-bottom:0}
@media(min-width:1025px){.hwa-shop--dakrandshop .rps-site-kop .rps-kop:not(.rps-kop--afrekenen)>.rps-kop__balk{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"merk account wagen" "nav nav nav"}}

.hwa-maatwerk .hwa-maatwerk__beeld{display:grid;align-self:start;grid-template-columns:minmax(0,1fr);min-width:0;gap:8px;border:0;background:var(--wp--preset--color--base)}
.hwa-maatwerk .hwa-maatwerk__beeld::before{height:300px;aspect-ratio:auto}
.hwa-maatwerk .hwa-maatwerk__beeld .wc-block-product-gallery-large-image{height:300px;aspect-ratio:auto;background:var(--wp--preset--color--base)}
@media(max-width:767px){.hwa-maatwerk .hwa-maatwerk__beeld::before,.hwa-maatwerk .hwa-maatwerk__beeld .wc-block-product-gallery-large-image{height:150px}}

.hwa-maatwerk__intro>.hwa-maatwerk__actie{margin-top:0}
.hwa-shop--dakrandshop .rps-woordmerk:not(:has(img)) .rps-woordmerk__tekst{display:inline}

/* 0.8.5: maatwerkkaart gelijk aan de productkaart (titel 15 px normaal gewicht, prijs 17 px, beeld 4:3). */
.hwa-maatwerkkaart{padding:12px}
.hwa-maatwerkkaart img{height:auto;aspect-ratio:4/3;margin:0 0 10px}
.hwa-maatwerkkaart h2{font-size:15px;font-weight:500;line-height:1.4;margin:0 0 8px}
.hwa-maatwerkkaart__prijs > .woocommerce-Price-amount{font-size:17px}
@media (max-width:767px){.hwa-maatwerkkaart{padding:10px}.hwa-maatwerkkaart h2{font-size:14px}.hwa-maatwerkkaart__prijs > .woocommerce-Price-amount{font-size:16px}}
/* 0.8.6: laatste tegel "Bekijk andere modellen" naar de configurator (inc/maatwerk.php). Stippelrand zoals de tegel
   "Eigen profiel" op de home; het beeld (maattekening) krijgt een licht vlak zodat de lijnen niet op de rand staan. */
.hwa-maatwerkkaart--andere{border:1.5px dashed var(--wp--preset--color--primary)}
.hwa-maatwerkkaart--andere img{background:#F7F9FA;border-radius:var(--wp--custom--radius--s);padding:8px;box-sizing:border-box}
.hwa-maatwerkkaart--andere h2{margin-bottom:4px}
.hwa-maatwerkkaart__tekst{margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--wp--preset--color--muted)}
.hwa-maatwerkkaart--andere .hwa-maatwerkkaart__actie{border-color:var(--wp--preset--color--primary);background:var(--wp--preset--color--primary);color:var(--wp--preset--color--base)}
.hwa-maatwerkkaart--andere .hwa-maatwerkkaart__actie:hover{background:var(--wp--preset--color--primary-hover);color:var(--wp--preset--color--base)}
/* 0.8.20 strak raster (skinvlag kaart-compact, alleen productarchieven, keuze Mitchel 05-10-2026, canvas optie D):
   vervangt de rijtegel van 0.8.19. Eén raster met haarlijnen in plaats van losse kaarten, beeld 4:3 over de volle
   tegelbreedte, korte naam, prijs en "Configureren" als tekstlink; de hele tegel is klikbaar via de naam.
   Productfoto's passen in het vlak (contain); profieltekeningen (klasse --tekening, zie inc/maatwerk.php) vullen het
   vlak (cover), zodat het witte vlak boven en onder de tekening wegvalt en de maten leesbaar blijven.
   Staat er in een raster ook een gewoon product, dan blijft het hele raster in de oude vorm (:not(:has(.hwa-kaart))). */
.hwa-kaart-compact .hwa-productgrid.hwa-productgrid.hwa-productgrid:has(.hwa-maatwerkkaart):not(:has(.hwa-kaart)){grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--wp--preset--color--border-subtle);border-left:1px solid var(--wp--preset--color--border-subtle)}
.hwa-kaart-compact .hwa-productgrid.hwa-productgrid:has(.hwa-maatwerkkaart):not(:has(.hwa-kaart)) > *:has(> .hwa-maatwerkkaart){display:block;grid-row:auto}
.hwa-kaart-compact .hwa-productgrid.hwa-productgrid:has(.hwa-maatwerkkaart):not(:has(.hwa-kaart)) > .hwa-laadmeer{grid-row:auto;grid-column:1 / -1}
.hwa-kaart-compact .hwa-productgrid:has(.hwa-maatwerkkaart):not(:has(.hwa-kaart)) .hwa-laadmeer__kader{min-height:60px}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) > * > .hwa-maatwerkkaart{position:relative;display:flex;flex-direction:column;gap:4px;grid-row:auto;height:100%;min-height:0;box-sizing:border-box;padding:20px;border:0;border-right:1px solid var(--wp--preset--color--border-subtle);border-bottom:1px solid var(--wp--preset--color--border-subtle);border-radius:0;background:var(--wp--preset--color--base);transition:background-color .15s}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart:hover{background:var(--wp--preset--color--surface)}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__link{display:contents;color:var(--wp--preset--color--contrast)}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart img{display:block;width:100%;height:auto;aspect-ratio:4/3;margin:0 0 12px;padding:0;border-radius:0;background:none;object-fit:contain;mix-blend-mode:multiply}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart--tekening img{object-fit:cover}
/* 0.8.22 beeldvlak met tweede beeld (eerste galerijbeeld) dat bij hover of focus over de productfoto vervaagt. */
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__beeld{position:relative;display:block;margin:0 0 12px}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__beeld img{margin:0}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__beeld2{display:none}
@media (hover:hover){
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__beeld .hwa-maatwerkkaart__beeld2{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;background:none;mix-blend-mode:multiply;transition:opacity .16s ease}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__beeld .hwa-maatwerkkaart__beeld2--tekening{object-fit:cover}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart:is(:hover,:focus-within) .hwa-maatwerkkaart__beeld2{opacity:1}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart:is(:hover,:focus-within) .hwa-maatwerkkaart__beeld:has(.hwa-maatwerkkaart__beeld2) > img:not(.hwa-maatwerkkaart__beeld2){opacity:0}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__beeld > img{transition:opacity .16s ease}
}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart h2{margin:0;font-size:15px;font-weight:600;line-height:1.3}
/* De naam is de enige productlink; haar ::after dekt de tegel. De actielink ligt erboven (z-index). */
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__link h2::after{content:"";position:absolute;inset:0}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__link:focus-visible h2{outline:2px solid var(--wp--preset--color--primary);outline-offset:2px}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__prijs{margin:auto 0 0;padding-top:6px}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__prijs > .woocommerce-Price-amount{font-size:17px}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__prijs .woocommerce-price-suffix{flex-basis:auto}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__actie{position:relative;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;min-height:24px;margin:6px 0 0;padding:0;border:0;border-radius:0;background:none;color:var(--wp--preset--color--primary);font-size:13px;font-weight:600}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__actie::after{content:" →";white-space:pre}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart:hover .hwa-maatwerkkaart__actie,.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__actie:hover{background:none;color:var(--wp--preset--color--primary-hover);text-decoration:underline}
/* 0.8.21 tegel "Configureer je eigen model": gewone cel in het raster (laatste plek), beeld =
   eigen SVG (inc/maatwerk.php), stippelkader binnen de haarlijnen, titel in de primaire kleur.
   De actielink blijft ook op mobiel staan. (0.8.20 had hier een regel over de volle breedte zonder beeld.) */
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) > * > .hwa-maatwerkkaart--andere{outline:1.5px dashed var(--wp--preset--color--primary);outline-offset:-10px}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__eigen{display:block;width:100%;height:auto;aspect-ratio:4/3;margin:0 0 12px;color:var(--wp--preset--color--contrast)}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__eigen-maat{stroke:var(--wp--preset--color--primary)}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__eigen-label{font-family:inherit;fill:var(--wp--preset--color--base)}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__eigen-label rect,.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__eigen-vraag{fill:var(--wp--preset--color--primary)}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart--andere h2{color:var(--wp--preset--color--primary)}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart--andere .hwa-maatwerkkaart__tekst{margin:2px 0 0;font-size:13px}
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart--andere .hwa-maatwerkkaart__actie{margin-top:auto;padding-top:6px;background:none;color:var(--wp--preset--color--primary)}
/* Naamdeel na het streepje (materiaal) alleen voor schermlezers, en alleen in het pure maatwerkraster: in een gemengd raster blijft de hele naam zichtbaar. */
.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart .hwa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (min-width:900px){.hwa-kaart-compact .hwa-productgrid.hwa-productgrid.hwa-productgrid:has(.hwa-maatwerkkaart):not(:has(.hwa-kaart)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.hwa-kaart-compact .hwa-productgrid.hwa-productgrid.hwa-productgrid:has(.hwa-maatwerkkaart):not(:has(.hwa-kaart)){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:599px){.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) > * > .hwa-maatwerkkaart{padding:12px}.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__beeld{margin-bottom:8px}.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart h2{font-size:14px}.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart__prijs > .woocommerce-Price-amount{font-size:16px}.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) .hwa-maatwerkkaart:not(.hwa-maatwerkkaart--andere) .hwa-maatwerkkaart__actie{display:none}.hwa-kaart-compact .hwa-productgrid:not(:has(.hwa-kaart)) > * > .hwa-maatwerkkaart--andere{padding:12px;outline-offset:-6px}}