/* WooCommerce in de huisstijl, basislaag */
.shop .woocommerce-breadcrumb { color: var(--kleur-tekst); font-size: .875rem; font-weight: 600; margin-bottom: 1.5rem; }
.shop .woocommerce-breadcrumb a { color: var(--kleur-tekst); }
.shop .woocommerce-breadcrumb a:hover { color: var(--kleur-goud); }
ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1100px) { ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { ul.products { grid-template-columns: 1fr; } }
ul.products li.product {
background: var(--kleur-paneel); border: 1px solid var(--kleur-rand);
border-radius: var(--radius-kaart); overflow: hidden; margin: 0; text-align: left;
box-shadow: var(--schaduw-rust);
transition: transform .45s var(--soepel), box-shadow .45s ease;
}
@media (hover: hover) {
ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--schaduw-hover); }
ul.products li.product img { transition: transform .6s var(--soepel); }
ul.products li.product:hover img { transform: scale(1.06); }
}
ul.products li.product a img { aspect-ratio: 1 / 1; object-fit: cover; background: #fff; margin: 0; }
ul.products li.product .woocommerce-loop-product__title {
font-family: var(--font-kop); font-size: 1.125rem; color: var(--kleur-creme);
padding: 1.125rem 1.25rem .25rem; margin: 0;
}
ul.products li.product .price { display: block; color: var(--kleur-goud); font-weight: 700; padding: 0 1.25rem 1.125rem; }
ul.products li.product .button, ul.products li.product .added_to_cart {
display: inline-flex; margin: 0 1.25rem 1.25rem; padding: .625rem 1.25rem;
border-radius: var(--radius-pil); background: transparent; border: 1.5px solid var(--kleur-goud);
color: var(--kleur-goud); font-weight: 700; font-size: .875rem;
}
ul.products li.product .button:hover { background: var(--kleur-goud); color: var(--kleur-op-goud); }
.woocommerce-result-count, .woocommerce-ordering { color: var(--kleur-tekst); }
/* Formulieren en berichten */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
background: var(--kleur-diep); border: 1.5px solid var(--kleur-rand); color: var(--kleur-creme);
border-radius: var(--radius-klein); padding: .8125rem 1rem; min-height: 48px;
}
.woocommerce form .form-row label { color: var(--kleur-tekst); font-size: .8125rem; font-weight: 700; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {
background: var(--kleur-paneel); border-top-color: var(--kleur-goud); color: var(--kleur-creme);
border-radius: var(--radius-klein);
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
background: var(--kleur-goud); color: var(--kleur-op-goud); font-weight: 700;
border-radius: var(--radius-pil); padding: .9375rem 1.875rem;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--kleur-goud-licht); color: var(--kleur-op-goud); }
/* WooCommerce's eigen breedtes overschrijven, wij gebruiken grid */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.first, .woocommerce ul.products li.last {
width: auto !important; float: none !important; margin: 0 !important; clear: none !important;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 1.5rem; }
.woocommerce .woocommerce-ordering select {
background: var(--kleur-paneel); color: var(--kleur-creme);
border: 1.5px solid var(--kleur-rand); border-radius: var(--radius-klein); padding: .5rem .75rem;
}
.broodkruimels { color: var(--kleur-tekst); font-size: .875rem; font-weight: 600; margin-bottom: 1.5rem; }
.broodkruimels a { color: var(--kleur-tekst); }
.broodkruimels a:hover { color: var(--kleur-goud); }
/* De SEO-tekst boven en onder het overzicht (nu nog uit een mu-plugin) */
.shop .verhuur-intro, .shop .verhuur-uitleg { max-width: var(--breedte-max); margin-inline: auto; }
.shop > p, .shop > h2, .shop > h3, .shop > ol,
.shop > ul:not(.products) { max-width: 46rem; }
.shop > ul.products { max-width: none; width: 100%; }
/* ---------- Productpagina ---------- */
.productpagina__boven { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: start; margin-bottom: 4.5rem; }
@media (max-width: 900px) { .productpagina__boven { grid-template-columns: 1fr; gap: 2rem; } }
/* Galerij */
.pgalerij { display: flex; flex-direction: column; gap: .875rem; }
.pgalerij__hoofd { position: relative; border: 1px solid var(--kleur-rand); border-radius: var(--radius-kaart); overflow: hidden; background: #fff; }
.pgalerij__foto { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.pgalerij__vlag {
position: absolute; top: 1.125rem; left: 1.125rem; background: var(--kleur-goud); color: var(--kleur-op-goud);
font-size: .78125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
padding: .4375rem .875rem; border-radius: var(--radius-pil);
}
.pgalerij__strip { display: flex; gap: .625rem; }
.pgalerij__mini {
flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1; padding: 0; cursor: pointer;
background: #fff; border: 1px solid var(--kleur-rand); border-radius: var(--radius-klein);
overflow: hidden; transition: border-color .2s ease, transform .3s var(--soepel);
}
.pgalerij__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgalerij__mini.is-actief { border: 2px solid var(--kleur-goud); }
.pgalerij__mini:hover { transform: translateY(-2px); border-color: var(--kleur-goud); }
/* Productinformatie */
.pinfo { display: flex; flex-direction: column; gap: 0; }
.pinfo .kicker { margin-bottom: .75rem; }
.pinfo__titel { font-size: var(--tekst-blok); margin: 0 0 .5rem; }
.pinfo__kort { color: var(--kleur-tekst); font-size: 1rem; margin-bottom: 1.125rem; }
.pinfo__kort p { margin-bottom: .5rem; }
.pinfo__prijs { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.pinfo__bedrag { font-family: var(--font-kop); font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--kleur-goud); }
.pinfo__bedrag .woocommerce-Price-amount { color: var(--kleur-goud); }
.pinfo__eenheid { color: var(--kleur-tekst); font-size: .9375rem; font-weight: 600; }
.pinfo__borg { color: var(--kleur-tekst); font-size: .875rem; margin: .375rem 0 1.375rem; }
/* Reserveringsblok van de boekingsmodule */
.preserveren { background: var(--kleur-paneel); border: 1px solid var(--kleur-rand); border-radius: 16px; padding: 1.5rem 1.625rem; margin-bottom: 1.5rem; }
.preserveren .ph-calendar, .preserveren .ph-datepicker-wrapper { max-width: 100%; }
.preserveren .quantity { margin-bottom: 1rem; }
.preserveren .single_add_to_cart_button { width: 100%; justify-content: center; margin-top: .75rem; }
.preserveren label, .preserveren .ph-label { color: var(--kleur-tekst); font-weight: 700; font-size: .8125rem; }
.preserveren select, .preserveren input[type="text"], .preserveren input[type="number"], .preserveren textarea {
background: var(--kleur-diep); border: 1.5px solid var(--kleur-rand); color: var(--kleur-creme);
border-radius: var(--radius-klein); padding: .75rem .875rem; width: 100%; min-height: 46px;
}
/* USP-regels */
.pusp { list-style: none; margin: 0; padding: 1.375rem 0 0; border-top: 1px solid var(--kleur-rand); display: flex; flex-direction: column; gap: .75rem; }
.pusp li { display: flex; align-items: flex-start; gap: .75rem; color: var(--kleur-creme); font-size: .9375rem; }
.pusp svg { color: var(--kleur-goud); flex-shrink: 0; margin-top: .1875rem; }
/* Informatieblokken */
/* align-items: start, zodat een kort blok niet meerekt met een lang blok ernaast.
Zonder dit kreeg het blok 'Goed om te weten' een groot leeg vlak zodra het blok
ernaast langer werd, zoals bij de schminkset met de uitleg erin. */
.pblokken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 4rem; align-items: start; }
@media (max-width: 900px) { .pblokken { grid-template-columns: 1fr; } }
.pblok { background: var(--kleur-paneel); border: 1px solid var(--kleur-rand); border-radius: var(--radius-kaart); padding: 2.25rem; }
.pblok h2 { font-size: var(--tekst-kaart); margin-bottom: 1.25rem; }
.pblok__inhoud { color: var(--kleur-tekst); }
.pblok__inhoud ul { padding-left: 1.1em; }
.pblok__inhoud li { margin-bottom: .375rem; }
.pblok__inhoud p:last-child { margin-bottom: 0; }
.pweetjes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.pweetjes li { display: flex; align-items: flex-start; gap: .875rem; color: var(--kleur-tekst); font-size: .9375rem; line-height: 1.6; }
.pweetjes svg { color: var(--kleur-goud); flex-shrink: 0; margin-top: .1875rem; }
/* Gerelateerde producten */
.related > h2, .up-sells > h2 { font-family: var(--font-kop); font-size: var(--tekst-blok); color: var(--kleur-creme); margin-bottom: 2rem; }
/* De reserveringskalender in de huisstijl (de plugin levert standaard blauw) */
.preserveren .ph-calendar-wrapper, .preserveren .ph-calendar, .preserveren .date-picker-wraper,
.preserveren [class*="ph-calendar"] { background: transparent !important; }
.preserveren .ph-calendar-header, .preserveren .ph-month {
color: var(--kleur-creme) !important; font-family: var(--font-tekst); font-weight: 700; letter-spacing: .12em;
}
.preserveren .ph-calendar-weekdays, .preserveren .ph-calendar-weekdays * { color: var(--kleur-tekst) !important; font-weight: 600; }
.preserveren .ph-calendar-date {
color: var(--kleur-creme) !important; border-radius: 8px;
transition: background .2s ease, color .2s ease;
}
.preserveren .ph-calendar-date:not(.not-available):hover { background: var(--kleur-goud) !important; color: var(--kleur-op-goud) !important; }
.preserveren .ph-calendar-date.not-available, .preserveren .ph-calendar-date.de-active {
color: var(--kleur-gedempt) !important; text-decoration: line-through; opacity: .65;
}
.preserveren .ph-calendar-date.selected, .preserveren .ph-calendar-date.ph-selected,
.preserveren .ph-calendar-date.active { background: var(--kleur-goud) !important; color: var(--kleur-op-goud) !important; }
.preserveren .ph-prev, .preserveren .ph-next { color: var(--kleur-goud) !important; cursor: pointer; }
.preserveren .ph-datepicker, .preserveren .ph-date-from, .preserveren .ph-date-to {
background: var(--kleur-diep) !important; border: 1.5px solid var(--kleur-rand) !important;
color: var(--kleur-creme) !important; border-radius: var(--radius-klein);
}
.preserveren .ph-calendar-overlay { background: rgba(25,18,49,.75) !important; }
.preserveren .single_add_to_cart_button, .preserveren button.button {
background: var(--kleur-goud) !important; color: var(--kleur-op-goud) !important;
border-radius: var(--radius-pil) !important; font-weight: 700 !important; border: 0 !important;
}
.preserveren .single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; }
/* Datumveld en knop in het reserveringsblok */
.preserveren input, .preserveren .ph-selected-date, .preserveren [class*="selecteer"],
.preserveren .ph-booking-date-field, .preserveren .ph-date-display {
background: var(--kleur-diep) !important; color: var(--kleur-creme) !important;
border: 1.5px solid var(--kleur-rand) !important; border-radius: var(--radius-klein) !important;
}
.preserveren input::placeholder { color: var(--kleur-placeholder); }
.preserveren .single_add_to_cart_button.disabled,
.preserveren .single_add_to_cart_button[disabled],
.preserveren button[disabled] {
background: var(--kleur-paneel) !important; color: var(--kleur-placeholder) !important;
border: 1.5px solid var(--kleur-rand) !important; opacity: 1 !important;
}
/* Verhuuroverzicht: hero en filter */
/* Hoogte en uitlijning komen uit .hero--pagina in landing.css. */
.shoplijst { padding-top: clamp(2rem, 4vw, 3rem); }
/* De tegels en de uitleg eronder delen dezelfde achtergrond. Twee volle
sectiepaddings tegen elkaar leverde 232 pixels leegte waar niets gebeurt,
wat leest als een gat in de pagina. Een naad is genoeg. */
.shoplijst + .shopuitleg { padding-top: 0; }
.shopuitleg .rijketekst > :first-child { margin-top: 0; }
.shopfilter {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 1rem 1.5rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
padding-bottom: 1.25rem; border-bottom: 1px solid var(--kleur-rand);
}
.shopfilter__pillen { display: flex; flex-wrap: wrap; gap: .625rem; }
/* Filterknoppen. Ze moeten als knop lezen, dus met een eigen vlak en niet
alleen een dun randje. Hoogte gelijk aan de sorteerkeuze ernaast. */
.pil {
display: inline-flex; align-items: center; gap: .5rem;
min-height: 2.75rem; padding: .625rem 1.25rem; border-radius: var(--radius-pil);
background: var(--kleur-paneel); border: 1.5px solid var(--kleur-rand);
color: var(--kleur-creme);
font-size: .875rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s var(--soepel);
}
.pil:hover { color: var(--kleur-goud); border-color: var(--kleur-goud); background: var(--kleur-diep); transform: translateY(-1px); }
.pil:active { transform: translateY(0); }
.pil.is-actief { background: var(--kleur-goud); border-color: var(--kleur-goud); color: var(--kleur-op-goud); }
.pil.is-actief:hover { background: var(--kleur-goud); color: var(--kleur-op-goud); }
.pil__aantal {
display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem;
padding: 0 .375rem; border-radius: var(--radius-pil);
background: rgba(255,255,255,.07); color: var(--kleur-tekst);
font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pil.is-actief .pil__aantal { background: rgba(42,27,62,.18); color: var(--kleur-op-goud); }
.pil:hover .pil__aantal { color: var(--kleur-goud); }
.shopfilter .woocommerce-ordering { margin: 0; }
.shopfilter .woocommerce-ordering select {
min-height: 2.75rem; padding: .625rem 2.5rem .625rem 1.25rem;
background: var(--kleur-paneel); border: 1.5px solid var(--kleur-rand); color: var(--kleur-creme);
border-radius: var(--radius-pil); font-family: inherit; font-weight: 700; font-size: .875rem;
appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px;
transition: border-color .2s ease;
}
.shopfilter .woocommerce-ordering select:hover { border-color: var(--kleur-goud); }
.shoplijst .woocommerce-result-count { display: none; }
.shoplijst__leeg { color: var(--kleur-tekst); }
/*
* Tegels als etalage: de foto vult de hele tegel en titel en prijs liggen als
* label op een donker verloop onderin. Dat geeft rust in het raster en haalt de
* teksten weg bij de rand.
*/
.shoplijst ul.products { grid-auto-flow: dense; gap: 1.25rem; }
.shoplijst ul.products li.product {
position: relative; border: 1px solid var(--kleur-rand); border-radius: var(--radius-kaart);
overflow: hidden; background: var(--kleur-paneel);
}
/* De tegel is een flexbox met de link als enige kind, zodat een tegel die twee
rijen hoog is zijn foto netjes meerekt in plaats van ruimte leeg te laten. */
.shoplijst ul.products li.product { display: flex; }
.shoplijst ul.products li.product > a.woocommerce-LoopProduct-link {
flex: 1 1 auto; min-width: 0; display: block; position: relative;
}
.shoplijst ul.products li.product a img { aspect-ratio: 1 / 1; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Het label zelf */
.shoplijst ul.products li.product .woocommerce-loop-product__title,
.shoplijst ul.products li.product .price,
.shoplijst ul.products li.product .tegel__eenheid { position: relative; z-index: 2; margin: 0; padding: 0; }
.shoplijst ul.products li.product > a.woocommerce-LoopProduct-link::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 62%; z-index: 1;
background: linear-gradient(to top, rgba(12,8,26,.94) 0%, rgba(12,8,26,.78) 38%, rgba(12,8,26,0) 100%);
pointer-events: none;
}
.shoplijst ul.products li.product .woocommerce-loop-product__title {
position: absolute; left: 1.5rem; right: 1.5rem; bottom: 3.5rem;
font-family: var(--font-kop); font-size: 1.375rem; line-height: 1.2; color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.shoplijst ul.products li.product .price {
position: absolute; left: 1.5rem; bottom: 1.5rem;
color: var(--kleur-goud); font-weight: 700; font-size: 1.0625rem;
text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.shoplijst ul.products li.product .price del { opacity: .55; font-weight: 600; margin-right: .375rem; }
.shoplijst ul.products li.product .price ins { text-decoration: none; }
.shoplijst ul.products li.product .tegel__eenheid {
position: absolute; right: 1.5rem; bottom: 1.6rem;
color: rgba(255,255,255,.72); font-size: .75rem; font-weight: 600; letter-spacing: .04em;
text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
/* De reserveerknop verschijnt als ronde pijl rechtsboven, zodat het label rustig blijft */
.shoplijst ul.products li.product .button,
.shoplijst ul.products li.product .added_to_cart {
position: absolute; top: 1.125rem; right: 1.125rem; z-index: 3;
display: inline-flex; align-items: center; margin: 0;
padding: .5rem 1rem; border-radius: var(--radius-pil);
background: rgba(12,8,26,.66); border: 1.5px solid rgba(217,179,106,.75);
color: var(--kleur-goud); font-weight: 700; font-size: .75rem; letter-spacing: .04em;
backdrop-filter: blur(6px);
opacity: 0; transform: translateY(-6px);
transition: opacity .3s ease, transform .3s var(--soepel), background-color .25s ease, color .25s ease;
}
.shoplijst ul.products li.product:hover .button,
.shoplijst ul.products li.product:focus-within .button { opacity: 1; transform: translateY(0); }
.shoplijst ul.products li.product .button:hover { background: var(--kleur-goud); color: var(--kleur-op-goud); }
/* Wisselende maten: een grote tegel linksboven, een brede halverwege */
.shoplijst ul.products li.product.tegel--groot { grid-column: span 2; grid-row: span 2; }
.shoplijst ul.products li.product.tegel--breed { grid-column: span 2; }
.shoplijst ul.products li.product.tegel--groot a img { aspect-ratio: 1 / 1; }
.shoplijst ul.products li.product.tegel--breed a img { aspect-ratio: 2 / 1; object-position: center 30%; }
.shoplijst ul.products li.product.tegel--groot .woocommerce-loop-product__title { font-size: 2rem; bottom: 4rem; }
.shoplijst ul.products li.product.tegel--groot .price { font-size: 1.25rem; }
@media (max-width: 1100px) {
.shoplijst ul.products li.product.tegel--groot { grid-row: span 1; }
.shoplijst ul.products li.product.tegel--groot a img { aspect-ratio: 3 / 2; }
.shoplijst ul.products li.product.tegel--groot .woocommerce-loop-product__title { font-size: 1.625rem; }
}
@media (max-width: 520px) {
.shoplijst ul.products li.product.tegel--groot,
.shoplijst ul.products li.product.tegel--breed { grid-column: span 1; }
.shoplijst ul.products li.product.tegel--groot a img,
.shoplijst ul.products li.product.tegel--breed a img { aspect-ratio: 1 / 1; }
.shoplijst ul.products li.product .woocommerce-loop-product__title,
.shoplijst ul.products li.product.tegel--groot .woocommerce-loop-product__title { font-size: 1.25rem; left: 1.125rem; right: 1.125rem; bottom: 3.25rem; }
.shoplijst ul.products li.product .price { left: 1.125rem; bottom: 1.125rem; }
.shoplijst ul.products li.product .tegel__eenheid { right: 1.125rem; bottom: 1.2rem; }
.shoplijst ul.products li.product .button { opacity: 1; transform: none; }
.shopfilter { justify-content: flex-start; }
}
.shophulp .faqhulp__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: .5rem; }
/* Productpagina: onderdelen uit het ontwerp die nog ontbraken */
.pinfo__tekst { color: var(--kleur-tekst); font-size: .96875rem; line-height: 1.7; margin-bottom: 1.5rem; }
.pinfo__tekst p:last-child { margin-bottom: 0; }
.preserveren__kop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.preserveren__titel { font-weight: 700; font-size: 1rem; color: var(--kleur-creme); }
.preserveren__maat { color: var(--kleur-tekst); font-size: .8125rem; }
.pbetaling {
display: flex; align-items: center; justify-content: center; gap: .5rem;
color: var(--kleur-tekst); font-size: .84375rem; margin: .875rem 0 1.5rem;
}
.pbetaling svg { flex-shrink: 0; }
.pextras { display: flex; flex-direction: column; gap: .625rem; margin-bottom: 1.5rem; }
.pextras__kop { color: var(--kleur-tekst); font-size: .8125rem; font-weight: 700; margin: 0 0 .25rem; }
.pextra {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
border: 1px solid var(--kleur-rand); border-radius: 10px; padding: .625rem .875rem;
background: var(--kleur-paneel); color: var(--kleur-creme);
transition: border-color .25s ease, transform .25s var(--soepel);
}
.pextra:hover { border-color: var(--kleur-goud); transform: translateX(3px); color: var(--kleur-creme); }
.pextra__naam { display: flex; align-items: center; gap: .75rem; font-size: .90625rem; }
/* Echt aanvinkbaar: het vakje is een input, opgemaakt in de huisstijl. */
.pextra { cursor: pointer; }
.pextra__vak {
appearance: none; -webkit-appearance: none;
width: 20px; height: 20px; flex-shrink: 0; margin: 0;
border: 1.5px solid var(--kleur-goud); border-radius: 5px;
background: transparent; cursor: pointer;
display: grid; place-items: center;
transition: background-color .2s ease;
}
.pextra__vak::after {
content: ""; width: 11px; height: 11px; transform: scale(0);
background: var(--kleur-op-goud);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transition: transform .18s var(--soepel);
}
.pextra__vak:checked { background: var(--kleur-goud); }
.pextra__vak:checked::after { transform: scale(1); }
.pextra__vak:focus-visible { outline: 2px solid var(--kleur-goud); outline-offset: 2px; }
.pextra:has(.pextra__vak:checked) { border-color: var(--kleur-goud); background: var(--kleur-diep); }
.pextras__uitleg { margin: .625rem 0 0; color: var(--kleur-tekst); font-size: .78125rem; line-height: 1.5; }
.pextra__prijs { color: var(--kleur-goud); font-weight: 700; font-size: .90625rem; white-space: nowrap; }
.pextra__prijs .woocommerce-Price-amount { color: inherit; }
.pinclusief { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; }
.pinclusief li { display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; color: var(--kleur-creme); }
.pinclusief li svg { color: var(--kleur-goud); flex-shrink: 0; margin-top: .1875rem; }
.pblok__na { margin-top: 1.25rem; color: var(--kleur-tekst); font-size: .875rem; line-height: 1.6; }
.pblok__na p:last-child { margin-bottom: 0; }
@media (max-width: 620px) { .pinclusief { grid-template-columns: 1fr; } }
/* De boekingsmodule kleuren naar het thema: hij levert eigen witte blokken mee */
.preserveren .booking-info-wraper,
.preserveren .booking-info-wraper *,
.preserveren .ph-booking-form,
.preserveren .phive-booking-wrapper { background: transparent !important; }
.preserveren .booking-info-wraper,
.preserveren .booking-info-wraper p,
.preserveren .booking-info-wraper span,
.preserveren .booking-info-wraper div {
color: var(--kleur-tekst); font-size: .875rem; border: 0;
}
.preserveren .booking-info-wraper { padding: 0 0 .5rem; }
.preserveren .booking-info-wraper strong,
.preserveren .booking-info-wraper label { color: var(--kleur-creme); }
/* Uitleg wanneer de agenda opengaat, zodat een dichtgestreepte maand niet raar oogt */
.preserveren__hint {
display: flex; gap: .5rem; align-items: flex-start;
color: var(--kleur-tekst); font-size: .8125rem; line-height: 1.5;
margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--kleur-rand);
}
.preserveren__hint svg { color: var(--kleur-goud); flex-shrink: 0; margin-top: .125rem; }
/* Ruimte onder de reserveerknop die de plugin leeg laat staan */
.preserveren > *:last-child { margin-bottom: 0; }
.preserveren .clear, .preserveren br + br { display: none; }
/* Strip met de drie stappen van het huren, direct onder de hero */
.werkwijze { background: var(--kleur-paneel); border-block: 1px solid var(--kleur-rand); }
.werkwijze__rij {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.25rem, 3vw, 2.5rem); padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.werkstap { display: flex; gap: 1rem; align-items: flex-start; }
.werkstap__nr {
flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-pil);
display: grid; place-items: center;
border: 1.5px solid var(--kleur-goud); color: var(--kleur-goud);
font-family: var(--font-kop); font-size: 1.0625rem; line-height: 1;
}
.werkstap > div strong { display: block; color: var(--kleur-creme); font-size: 1rem; margin-bottom: .25rem; }
.werkstap > div span { display: block; color: var(--kleur-tekst); font-size: .875rem; line-height: 1.55; }
@media (max-width: 820px) { .werkwijze__rij { grid-template-columns: 1fr; gap: 1.25rem; } }
/* ---- Winkelwagen en afrekenen ---- */
.woocommerce-cart .shop, .woocommerce-checkout .shop, .woocommerce-account .shop { padding-block: clamp(2.5rem, 5vw, 4rem); }
.woocommerce-cart h1, .woocommerce-checkout h1 { margin-bottom: 1.5rem; }
/* Tabellen */
.woocommerce table.shop_table {
width: 100%; border-collapse: collapse; border: 1px solid var(--kleur-rand);
border-radius: var(--radius-kaart); overflow: hidden; background: var(--kleur-paneel); margin-bottom: 2rem;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
padding: 1rem 1.125rem; text-align: left; border-bottom: 1px solid var(--kleur-rand); color: var(--kleur-tekst);
}
.woocommerce table.shop_table thead th { color: var(--kleur-creme); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table td.product-name a { color: var(--kleur-creme); font-weight: 700; }
.woocommerce table.shop_table td.product-name a:hover { color: var(--kleur-goud); }
.woocommerce table.shop_table .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: #fff; }
.woocommerce table.shop_table .amount, .woocommerce .woocommerce-Price-amount { color: var(--kleur-goud); font-weight: 700; }
.woocommerce table.shop_table td.product-remove a.remove {
display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-pil);
background: transparent; border: 1.5px solid var(--kleur-rand); color: var(--kleur-tekst);
font-size: 1rem; line-height: 1; text-decoration: none;
}
.woocommerce table.shop_table td.product-remove a.remove:hover { border-color: var(--kleur-goud); color: var(--kleur-goud); background: transparent; }
.woocommerce .quantity input.qty {
width: 4.5rem; padding: .5rem .625rem; text-align: center;
background: var(--kleur-achtergrond); border: 1.5px solid var(--kleur-rand); border-radius: 10px; color: var(--kleur-creme);
}
/* Totalen en kassabon */
.cart_totals, .woocommerce-checkout-review-order {
background: var(--kleur-paneel); border: 1px solid var(--kleur-rand); border-radius: var(--radius-kaart); padding: clamp(1.5rem, 3vw, 2rem);
}
.cart_totals h2, .woocommerce-checkout h3 { font-size: 1.375rem; margin-bottom: 1rem; }
.cart_totals table.shop_table, .woocommerce-checkout-review-order table.shop_table { border: 0; background: transparent; margin-bottom: 1.25rem; }
.cart_totals table.shop_table th, .cart_totals table.shop_table td { padding: .75rem 0; }
.woocommerce-checkout-review-order table.shop_table th, .woocommerce-checkout-review-order table.shop_table td { padding: .75rem 0; }
.order-total .amount { font-size: 1.25rem; }
/* Knoppen: alles in de huisstijl, ook wat WooCommerce zelf uitspuugt */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button, .woocommerce #place_order, .woocommerce .checkout-button {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .875rem 1.75rem; border-radius: var(--radius-pil); border: 1.5px solid var(--kleur-goud);
background: transparent; color: var(--kleur-goud);
font-family: inherit; font-weight: 700; font-size: .9375rem; line-height: 1; cursor: pointer;
transition: background-color .25s ease, color .25s ease, transform .25s var(--soepel);
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button:hover { background: var(--kleur-goud); color: var(--kleur-op-goud); }
.woocommerce .checkout-button, .woocommerce #place_order,
.woocommerce button.button.alt, .woocommerce input.button.alt {
background: var(--kleur-goud); color: var(--kleur-op-goud); width: auto;
}
.woocommerce .checkout-button:hover, .woocommerce #place_order:hover,
.woocommerce button.button.alt:hover { transform: translateY(-2px); background: var(--kleur-goud-licht, var(--kleur-goud)); color: var(--kleur-op-goud); }
.woocommerce .checkout-button { display: flex; width: 100%; }
.woocommerce #place_order { width: 100%; margin-top: .5rem; }
.woocommerce .button:disabled, .woocommerce button.button:disabled { opacity: .5; cursor: not-allowed; }
/* Twee kolommen op de afrekenpagina */
@media (min-width: 900px) {
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0 clamp(2rem, 4vw, 3.5rem); align-items: start; }
.woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
/* Kop en overzicht zitten samen in .kassa__rechts, zie inc/woo.php */
.woocommerce-checkout form.checkout > .kassa__rechts { grid-column: 2; }
.kassa__rechts > h3#order_review_heading { margin-top: 0; }
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.woocommerce-cart .woocommerce > form.woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .woocommerce > .cart-collaterals { grid-column: 2; }
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
}
.cart-collaterals, .cart-collaterals .cross-sells { width: 100%; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
/* Meldingen */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
background: var(--kleur-paneel); border: 1px solid var(--kleur-rand); border-left: 3px solid var(--kleur-goud);
border-radius: 12px; padding: 1rem 1.25rem; color: var(--kleur-tekst); margin-bottom: 1.5rem;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.woocommerce-error { border-left-color: #E2707A; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-error li { list-style: none; }
.woocommerce-error, .woocommerce-message, .woocommerce-info { list-style: none; }
/* Lege winkelwagen */
.cart-empty { justify-content: center; text-align: center; }
.return-to-shop { text-align: center; }
/* Bon-onderdelen die WooCommerce apart opmaakt */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-block: 1rem; color: var(--kleur-tekst); font-size: .875rem; }
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
list-style: none; margin: 0 0 1rem; padding: 0; border: 0;
display: flex; flex-direction: column; gap: .625rem;
}
.woocommerce-checkout #payment ul.payment_methods li {
background: var(--kleur-achtergrond); border: 1.5px solid var(--kleur-rand); border-radius: 12px; padding: .875rem 1rem; color: var(--kleur-creme);
}
.woocommerce-checkout #payment div.payment_box { background: transparent; color: var(--kleur-tekst); font-size: .875rem; padding: .75rem 0 0; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout .woocommerce-privacy-policy-text { color: var(--kleur-tekst); font-size: .8125rem; }
/* Coupon */
.woocommerce .coupon { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; margin-bottom: 1rem; }
.woocommerce-form-coupon-toggle .woocommerce-info { justify-content: flex-start; }
@media (max-width: 640px) {
/* Winkelwagen als kaartje per regel: foto links, naam en datum rechts, de
verwijderknop rechtsboven en het bedrag eronder. Geen labels nodig, want
de kaart spreekt voor zich. */
.woocommerce-cart table.shop_table { border: 0; background: transparent; }
.woocommerce-cart table.shop_table thead { display: none; }
.woocommerce-cart table.shop_table tbody, .woocommerce-cart table.shop_table tr,
.woocommerce-cart table.shop_table td { display: block; width: auto; }
.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
position: relative;
display: grid; grid-template-columns: 72px 1fr; gap: .25rem 1rem; align-items: start;
background: var(--kleur-paneel); border: 1px solid var(--kleur-rand);
border-radius: var(--radius-kaart); padding: 1rem; margin-bottom: 1rem;
}
.woocommerce-cart table.shop_table td { border: 0; padding: 0; }
.woocommerce-cart table.shop_table td.product-thumbnail { grid-column: 1; grid-row: 1 / span 3; }
.woocommerce-cart table.shop_table td.product-thumbnail img { width: 72px; height: 72px; display: block; }
.woocommerce-cart table.shop_table td.product-name { grid-column: 2; grid-row: 1; padding-right: 2.25rem; }
.woocommerce-cart table.shop_table td.product-subtotal { grid-column: 2; grid-row: 2; font-size: 1.0625rem; }
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-quantity { display: none; }
.woocommerce-cart table.shop_table td.product-remove { position: absolute; top: .75rem; right: .75rem; }
.woocommerce-cart table.shop_table tr:last-child td.actions {
display: block; padding: 0; background: transparent; border: 0;
}
.woocommerce-cart td.actions .button { width: 100%; }
/* Besteloverzicht op de afrekenpagina: naam breed, bedrag rechts. */
.woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td { padding: .75rem .5rem; }
.woocommerce-checkout table.shop_table td.product-name,
.woocommerce-checkout table.shop_table th.product-name { width: 62%; text-align: left; }
.woocommerce-checkout table.shop_table td.product-total,
.woocommerce-checkout table.shop_table th.product-total,
.woocommerce-checkout table.shop_table tfoot td { text-align: right; }
.woocommerce .checkout-button, .woocommerce #place_order { width: 100%; }
}
/* Winkelwagen, afrekenen en mijn account krijgen de volle breedte; de smalle
leeskolom van een tekstpagina knijpt de tabel en het totalenblok dicht. */
.pagina__winkel { max-width: var(--breedte-max); }
.pagina__winkel .woocommerce { width: 100%; }
/* Woo laat een noscript-waarschuwing achter die in dit thema altijd zichtbaar
bleef; die hoort alleen te verschijnen zonder JavaScript. */
html.js .woocommerce-no-js-message,
html.js .woocommerce-notice--info.woocommerce-no-js { display: none; }
/* Focusring in de huisstijl in plaats van het blauwe standaardrandje */
.woocommerce :focus-visible,
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus {
outline: 2px solid var(--kleur-goud); outline-offset: 2px;
}
/* Tekstvakken die WooCommerce zelf plaatst, zoals de bestelnotitie */
.woocommerce form textarea, .woocommerce textarea.input-text,
.woocommerce-checkout textarea, .woocommerce-cart textarea,
form.checkout textarea, form.woocommerce-cart-form textarea,
#mcv_opmerking, .mcv-vragen textarea, #order_comments {
width: 100%; min-height: 6rem; font-family: inherit; font-size: .9375rem;
background: var(--kleur-achtergrond); border: 1.5px solid var(--kleur-rand);
border-radius: 12px; color: var(--kleur-creme); padding: .75rem 1rem;
}
.woocommerce form textarea:focus, form.checkout textarea:focus, #order_comments:focus { border-color: var(--kleur-goud); outline: none; }
/* Productfoto in de winkelwagentabel niet laten dichtknijpen */
.woocommerce table.shop_table td.product-thumbnail { width: 84px; }
.woocommerce table.shop_table td.product-thumbnail img { width: 64px; height: 64px; min-width: 64px; }
/* Knoppen mogen niet in drie regels breken binnen hun pil */
.woocommerce .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce .checkout-button {
white-space: normal; text-align: center; line-height: 1.25; min-height: 2.75rem;
}
@media (min-width: 900px) {
.woocommerce .checkout-button, .woocommerce #place_order { white-space: nowrap; }
}
/* Placeholder in de themakleur, niet het browserstandaard grijs op wit */
form.checkout textarea::placeholder, form.checkout input::placeholder,
.mcv-vragen textarea::placeholder { color: var(--kleur-tekst); opacity: .65; }
/* De kolom Aantal is bij een reservering altijd 1; een lege kolom oogt kapot */
/* Een reservering is altijd 1 kostuum voor 1 dag, dus de kolom Aantal blijft
leeg. Een lege kolom met kop oogt als een fout, dus die laten wij weg. */
.woocommerce-cart table.shop_table th.product-quantity,
.woocommerce-cart table.shop_table td.product-quantity { display: none; }
/* De eigen vragen erven de opmaak van de rest van het afrekenformulier */
.mcv-vragen .form-row input.input-text,
.mcv-vragen .form-row textarea,
.mcv-vragen .form-row select,
#mcv_gelegenheid, #mcv_lengte, #mcv_ophaaltijd, #mcv_opmerking {
background: var(--kleur-diep); border: 1.5px solid var(--kleur-rand); color: var(--kleur-creme);
border-radius: var(--radius-klein); padding: .8125rem 1rem; min-height: 48px; width: 100%;
font-family: inherit; font-size: .9375rem;
}
#mcv_opmerking { min-height: 6rem; }
.mcv-vragen h3 { font-size: 1.375rem; margin: 2rem 0 1rem; }
.mcv-vragen .form-row { margin-bottom: 1rem; }
.mcv-vragen .description { color: var(--kleur-tekst); font-size: .8125rem; margin-top: .375rem; }
@media (max-width: 640px) {
/* WooCommerce verbergt de fotokolom op kleine schermen; bij verhuur is juist
de foto het herkenningspunt, dus die zetten wij terug. */
/* De besteltabel kreeg een veel te smalle productkolom doordat het btw-bedrag
in de voettekst de andere kolom opblies. Vaste kolombreedtes lossen dat op. */
.woocommerce-checkout #order_review table.shop_table { table-layout: fixed; width: 100%; }
.woocommerce-checkout #order_review table.shop_table td.product-name,
.woocommerce-checkout #order_review table.shop_table th.product-name,
.woocommerce-checkout #order_review table.shop_table tfoot th { width: 58%; }
.woocommerce-checkout #order_review table.shop_table td.product-total,
.woocommerce-checkout #order_review table.shop_table th.product-total,
.woocommerce-checkout #order_review table.shop_table tfoot td { width: 42%; white-space: normal; }
.woocommerce-checkout #order_review .includes_tax { display: block; font-size: .8125rem; }
}
/* ---- Productpagina, aangescherpt naar het canvas-ontwerp ---- */
/* Broodkruimels bovenaan, zoals in het ontwerp */
.productpagina > .broodkruimels { display: block; margin-bottom: 1.75rem; }
/* Reserveerblok: de plugin levert een kale kalender, het ontwerp een rustig
paneel met een kop, de kalender en daaronder een gouden knop over de volle
breedte. */
.preserveren { background: var(--kleur-paneel); border: 1px solid var(--kleur-rand); border-radius: 16px; padding: 1.5rem 1.625rem; }
.preserveren__kop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.125rem; }
.preserveren__titel { font-weight: 700; font-size: 1rem; color: var(--kleur-creme); }
.preserveren__maat { color: var(--kleur-tekst); font-size: .8125rem; }
.preserveren .ph-calendar-days, .preserveren .ph-calendar-weekdays { margin: 0; padding: 0; }
.preserveren .ph-calendar-date { border-radius: 8px; }
.preserveren .ph_calendar_day { color: var(--kleur-creme); }
.preserveren .de-active .ph_calendar_day,
.preserveren .not-available .ph_calendar_day { color: var(--kleur-tekst); opacity: .45; }
/* De reserveerknop volgt het ontwerp: goud, volle breedte, onder de kalender */
/* WooCommerce zet zelf .woocommerce div.product form.cart .button op auto
breedte; die selector is specifieker, dus die van ons moet dat ook zijn. */
.woocommerce div.product .preserveren form.cart .single_add_to_cart_button,
.woocommerce div.product .preserveren form.cart button.button,
.preserveren .single_add_to_cart_button,
.preserveren button.button {
display: flex; width: 100%; justify-content: center; align-items: center;
margin: 1.25rem 0 0; padding: 1.0625rem 2rem;
background: var(--kleur-goud); color: var(--kleur-op-goud);
border: 0; border-radius: var(--radius-pil);
font-family: inherit; font-weight: 700; font-size: 1.0625rem; line-height: 1;
}
.woocommerce div.product .preserveren form.cart .single_add_to_cart_button:hover,
.preserveren .single_add_to_cart_button:hover { background: var(--kleur-goud); transform: translateY(-2px); }
/* De reserveerknop staat in het ontwerp los onder de kalender, niet zwevend */
.woocommerce div.product .preserveren form.cart { float: none; width: 100%; }
.woocommerce div.product .preserveren form.cart::after { content: ""; display: block; clear: both; }
.preserveren .single_add_to_cart_button.disabled,
.preserveren .single_add_to_cart_button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.preserveren__hint { margin: .875rem 0 0; padding-top: .875rem; }
/* Extra's direct onder het reserveerblok, zoals in het ontwerp */
.pextras { margin-top: 1.25rem; }
.pextra { padding: .75rem 1rem; }
.pextra__naam { gap: .75rem; font-size: .90625rem; }
/* De twee informatieblokken staan in het ontwerp op een eigen paneel met een
lijn erboven en eronder, over de volle breedte van de sectie. */
.pblokken--paneel {
background: var(--kleur-paneel);
border-top: 1px solid var(--kleur-rand); border-bottom: 1px solid var(--kleur-rand);
margin-inline: calc(var(--ruimte-rand) * -1);
padding: clamp(2.5rem, 5vw, 4.5rem) var(--ruimte-rand);
}
.pblokken--paneel .pblok { background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand); border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.25rem); }
/* Gerelateerde producten: vierkante foto, titel en prijs eronder, pijl rechts */
.related ul.products li.product, .up-sells ul.products li.product {
display: flex; flex-direction: column; background: var(--kleur-paneel);
border: 1px solid var(--kleur-rand); border-radius: 20px; overflow: hidden;
}
.related ul.products li.product a img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; display: block; }
.related ul.products li.product .woocommerce-loop-product__title {
font-family: var(--font-tekst); font-weight: 700; font-size: 1rem; color: var(--kleur-creme);
padding: 1.125rem 1.25rem .25rem; margin: 0;
}
.related ul.products li.product .price { padding: 0 1.25rem; color: var(--kleur-goud); font-weight: 700; font-size: .9375rem; }
.related ul.products li.product .tegel__eenheid { padding: .125rem 1.25rem 1.125rem; font-size: .8125rem; }
.related ul.products li.product .button, .related ul.products li.product .added_to_cart { display: none; }
.related ul.products li.product::after {
content: ""; position: absolute; right: 1.25rem; bottom: 1.5rem; width: 18px; height: 18px;
background: currentColor; color: var(--kleur-goud);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transition: transform .3s var(--soepel);
}
.related ul.products li.product { position: relative; }
.related ul.products li.product:hover::after { transform: translateX(4px); }
/* De kalender compacter, dichter bij het ontwerp, en de knop netjes over de
volle breedte van het paneel. */
.preserveren .ph-calendar-date { padding: .375rem 0; font-size: .875rem; }
.preserveren .ph-calendar-weekdays li { font-size: .75rem; letter-spacing: .04em; }
.woocommerce div.product .preserveren form.cart { padding: 0; margin: 0; }
.woocommerce div.product .preserveren form.cart > * { max-width: none; }
.preserveren .ph_book_now_button_wrapper,
.preserveren .ph-booking-button-wrap { width: 100%; display: block; }
/* Zolang de kalender nog naar de juiste maand zoekt, niet laten knipperen */
.preserveren .ph-calendar-days { transition: opacity .2s ease; }
html.js .preserveren:not(.is-geladen) .ph-calendar-days { opacity: .35; }
/* De boekingsplugin zet een procentuele padding op het formulier en een marge
op de knop, waardoor die niet over de volle breedte van het paneel loopt.
Dat zijn de enige twee eigenschappen die wij hier hard overschrijven. */
.woocommerce div.product .preserveren form.cart { padding-left: 0 !important; padding-right: 0 !important; }
.woocommerce div.product .preserveren form.cart .single_add_to_cart_button {
margin-left: 0 !important; margin-right: 0 !important;
}
/* De boekingsplugin zet de labels "Huur:" en "Verhuur kosten:" in zwart, wat op
het donkerpaarse paneel wegvalt. */
.preserveren b, .preserveren strong { color: var(--kleur-creme); }
.preserveren .booking-info-wraper b { color: var(--kleur-creme); }
/* De btw-toevoeging bij het totaal stond als losse staart rechts naast het
bedrag. Hij hoort er rustig onder, kleiner en in de tekstkleur. */
.woocommerce .order-total .amount,
.woocommerce-checkout #order_review .order-total .amount { display: block; }
.woocommerce .order-total .includes_tax,
.woocommerce-checkout #order_review .order-total .includes_tax,
.cart_totals .includes_tax {
display: block; margin-top: .1875rem;
color: var(--kleur-tekst); font-size: .78125rem; font-weight: 600;
white-space: normal; text-align: inherit;
}
.woocommerce .order-total .includes_tax .amount,
.cart_totals .includes_tax .amount {
display: inline; color: inherit; font-size: inherit; font-weight: 700;
}
/* WooCommerce kleurt de btw-toevoeging grijs; in dit donkere ontwerp hoort hij
in de gewone tekstkleur. En de laatste tabelrij hoeft geen streepje meer. */
.woocommerce .includes_tax, .cart_totals .includes_tax,
.woocommerce small.includes_tax { color: var(--kleur-tekst) !important; }
.cart_totals table.shop_table tr:last-child th,
.cart_totals table.shop_table tr:last-child td,
.cart_totals table.shop_table tr.order-total th,
.cart_totals table.shop_table tr.order-total td { border-bottom: 0; }
/* De reserveringsmodule brengt zijn eigen paneel mee, dus de oude
.preserveren-opmaak van de vervallen boekingsplugin is niet meer nodig.
Wat blijft is de plek in de kolom. */
.mr-reserveren { margin-top: .25rem; }
.pinfo .mr-reserveren { width: 100%; }