@charset "UTF-8";
/* WC Plus — single-product (summary/gallery/header). Lean, tokens-gedreven, Bootstrap-vrij.
Structuur + defaults; het (starter)theme heeft volledige vrijheid via template-overrides. */
/* Layout: gallery + summary naast elkaar staat bij "2-koloms productlayout" verderop (floats 48/48; met
wcp_single_product_sticky_gallery een raster). Hier stond een tweede, grid-opzet die altijd verloor van die
latere regel met dezelfde specificiteit — weggehaald (#121). */
/* Heading. */
.wcp-product-heading__title {
margin: 0 0 1rem;
}
/* Gallery. */
.woocommerce-gallery-wrapper {
position: relative;
}
.gallery-inner {
position: relative;
}
/* WooCommerce kleurt prijzen binnen div.product olijfgroen (#958e09) en zet ze op
1.25em — ook de kaarten van gerelateerde producten en de accessoires op de
productpagina. Zelfde selector, wij laden later. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(--wcp-color-dark);
font-size: inherit;
}
/* Summary. */
.wcp-product-summary__inner > * + * {
margin-top: 1rem;
}
/* Merklogo rechts naast de prijs (wcp_add_brand_logo_at_price, zoals v1). Stond tot 2.2.0
rechtsboven in de kop; de titel moest daar 9rem voor vrijhouden en brak over twee regels. */
.wcp-product-price {
position: relative;
}
.wcp-product-price:has(.wcp-product-brand) {
padding-right: 9rem;
}
/* Vaste doos: een absoluut geplaatste inline-flex zonder breedte krimpt tot 0 zodra
de afbeelding max-width: 100% heeft (kringverwijzing), en merklogo's zijn SVG's
met width="1" height="1". */
.wcp-product-brand {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: flex-end;
width: 8rem;
height: 2.5rem;
}
.wcp-product-brand img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* De titel in de samenvatting is een h1, maar geen pagina-hero: thema's zetten h1 vaak
op 3-4rem en dan neemt de titel de halve kolom in. Hier de maat van een productkop. */
.wcp-product-summary__title {
margin: 0;
font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem);
line-height: 1.2;
}
/* Kopmeta in de samenvatting (titel in de summary): dezelfde flex-rij als .wcp-product-heading__meta,
zodat artikelnummer, kopattributen en merk naast elkaar staan en pas wrappen als het niet past. */
.wcp-product-summary__details,
.product-details {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.75rem;
font-size: var(--wcp-font-size-sm);
}
.wcp-product-summary__details .wcp-product-header__row,
.product-details .wcp-product-header__row {
color: var(--wcp-color-muted);
font-size: var(--wcp-font-size-sm);
}
/* Streepje tussen de kopregels (rating | artikelnummer | attribuut | merk): absoluut in de 0.75rem-gap
vóór elke kopregel die op een ander item volgt. Wrapt de rij (mobiel), dan valt het streepje van het
eerste item op de nieuwe regel buiten de container en knipt overflow:hidden het weg. */
.wcp-product-heading__meta,
.wcp-product-summary__details,
.product-details { overflow: hidden; }
.wcp-product-header__row { position: relative; }
.wcp-product-heading__meta > * + .wcp-product-header__row::before,
.wcp-product-summary__details > * + .wcp-product-header__row::before,
.product-details > * + .wcp-product-header__row::before {
content: "|";
position: absolute;
inset: 0 100% 0 auto;
width: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--wcp-color-border);
}
.wcp-product-price .price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.6rem;
font-size: 1.5rem;
font-weight: var(--wcp-font-weight-bold);
line-height: 1.2;
}
/* Oude en nieuwe prijs op één regel; de oude kleiner en gedempt. */
.wcp-product-price .price del {
order: 1;
color: var(--wcp-color-muted);
font-size: 1rem;
font-weight: var(--wcp-font-weight-normal);
opacity: 1;
}
.wcp-product-price .price ins {
order: 0;
background: none;
text-decoration: none;
}
/* wcp_add_break_to_price() zet een
achter ; hier is dat een leeg flex-item vóór de nieuwe prijs, waardoor de
gap als witruimte vóór het bedrag kwam (#215). Oud en nieuw staan hier toch al via order op één regel. */
.wcp-product-price .price br {
display: none;
}
/* Prijs per eenheid (wcp-unit-price, .piece-price) op een eigen, gedempte regel ónder bedrag + oude prijs — stond
ertussen ("24,95 incl. Btw · 6,24 per stuk · ~~34,95~~") en las de adviesprijs als prijs per stuk. */
.wcp-product-price .price .piece-price {
order: 2;
flex: 0 0 100%;
font-size: var(--wcp-font-size-sm);
font-weight: var(--wcp-font-weight-normal);
color: var(--wcp-color-muted);
}
/* "Vanaf" is een aanduiding, geen tweede prijs. Zonder eigen opmaak erft hij de 28px vet van
het prijsblok en staat hij náást het bedrag; de flexrij breekt hem dan af en het leest als
twee losse dingen. Klein en gedempt op een eigen regel erboven, zoals v1. */
.wcp-product-price .price .from-price {
flex: 0 0 100%;
font-size: var(--wcp-font-size-sm);
font-weight: var(--wcp-font-weight-normal);
color: var(--wcp-color-muted);
line-height: 1.2;
}
/* ── Variatiekeuzes als blok in plaats van WooCommerce' tabel ──
WC zet elke keuze in een tabelrij met het label in een eigen kolom (gecentreerd, 16px vet).
Een attribuutswitch (wcp-product-attribute-switch) zet het label gewoon links boven de
knoppen. Naast elkaar op één productpagina leest dat als twee verschillende
besturingselementen, terwijl de knoppen zelf identiek zijn. Zelfde opbouw dus.
flex: 0 0 100% omdat het formulier een flexrij is met gap: de tabel moet een volle regel
pakken, anders krimpt hij en schuift hij 12px op.
Gescoped op form.variations_form en niet op form.cart: add-ons die zelf een form.cart in de
productpagina zetten (wcp-combi-deal rendert er een per deal, met dezelfde .variations-tabel
per kaart) kregen die 100% anders ook, en dan loopt hun kaartfooter uit de kaart. */
.woocommerce div.product form.variations_form .variations {
display: block;
flex: 0 0 100%;
width: 100%;
margin: 0 0 1rem;
}
.woocommerce div.product form.variations_form .variations tbody,
.woocommerce div.product form.variations_form .variations tr,
.woocommerce div.product form.variations_form .variations th,
.woocommerce div.product form.variations_form .variations td {
display: block;
width: auto;
text-align: left;
padding: 0;
}
.woocommerce div.product form.variations_form .variations th.label {
font-size: var(--wcp-font-size-sm);
font-weight: var(--wcp-font-weight-semibold);
line-height: 1.3;
color: var(--wcp-color-dark);
margin-bottom: 0.5rem;
}
.woocommerce div.product form.variations_form .variations th.label label { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
/* Uitleg-icoon naast het label: gedempt en kleiner, niet zwaarder dan het label zelf. */
.woocommerce div.product form.variations_form .variations th.label [data-wcp-dialog] { color: var(--wcp-color-muted); font-size: 0.875em; cursor: pointer; }
.woocommerce div.product form.variations_form .variations th.label [data-wcp-dialog]:hover { color: var(--wcp-color-primary); }
.woocommerce div.product form.variations_form .variations tr + tr { margin-top: 1.1rem; }
.wcp-product-price .price .screen-reader-text { position: absolute; }
.woocommerce-product-details__short-description {
font-size: 0.9375rem;
line-height: 1.6;
}
/* Koppen in de korte omschrijving zijn tussenkopjes, geen sectiekoppen: thema's zetten
h2 vaak op 2rem of meer en dan domineert de kop de samenvatting. */
.woocommerce-product-details__short-description h2,
.woocommerce-product-details__short-description h3,
.woocommerce-product-details__short-description h4 {
margin: 0 0 0.35rem;
font-size: 1.125rem;
line-height: 1.3;
}
.woocommerce-product-details__short-description > :last-child { margin-bottom: 0; }
/* Reviews (lean default; was Bootstrap row/col/card). Sterren via icon-font (theme-asset). */
.wcp-reviews { display: flex; flex-direction: column; gap: 2rem; }
.wcp-reviews__summary {
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: center;
}
.wcp-reviews__score { display: flex; flex-direction: column; gap: 0.25rem; }
.wcp-reviews__average { font-size: 2.5rem; font-weight: var(--wcp-font-weight-bold); line-height: 1; }
.wcp-reviews__total { color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm); }
.wcp-reviews__bars { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 0.25rem; }
.wcp-reviews__bar-row { display: flex; align-items: center; gap: 0.5rem; }
.wcp-reviews__bar-label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.15rem; font-size: var(--wcp-font-size-sm); }
.wcp-reviews__bar-label .svg-icon__star { color: var(--wcp-color-rating, #f5a623); }
.wcp-reviews__bar { flex: 1 1 auto; height: 0.5rem; background: var(--wcp-color-border); border-radius: 999px; overflow: hidden; }
.wcp-reviews__bar-fill { display: block; height: 100%; background: var(--wcp-color-rating, #f5a623); }
.wcp-reviews__bar-count { flex: 0 0 2ch; text-align: right; font-size: var(--wcp-font-size-sm); color: var(--wcp-color-muted); }
.wcp-reviews__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media ( min-width: 48rem ) { .wcp-reviews__list { grid-template-columns: 1fr 1fr; } }
/* Reviews als slider (filter wcp_reviews_layout = 'slider', wcp-slider.js): één rij, native scroll met snap,
drie kaarten op desktop en ruim één op mobiel; ronde pijlen rechtsonder (op touch alleen vegen). */
.wcp-reviews__slider { position: relative; }
.wcp-reviews__list.wcp-reviews__list--slider {
grid-auto-flow: column;
grid-template-columns: none;
grid-auto-columns: 85%;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.wcp-reviews__list--slider::-webkit-scrollbar { display: none; }
.wcp-reviews__list--slider > li { scroll-snap-align: start; }
/* Tekst op drie regels: de kaarten in een rij zijn even hoog, en één lange review rekte anders de hele rij op.
De volledige tekst staat in de pop-up. */
.wcp-reviews__list--slider .wcp-review__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.wcp-reviews__list--slider .wcp-review { display: flex; flex-direction: column; }
.wcp-reviews__list--slider .wcp-review__meta { margin-top: auto; } /* naam + datum onderaan, gelijk in elke kaart */
@media ( min-width: 48rem ) { .wcp-reviews__list.wcp-reviews__list--slider { grid-auto-columns: calc( ( 100% - 1rem ) / 2 ); } }
@media ( min-width: 62rem ) { .wcp-reviews__list.wcp-reviews__list--slider { grid-auto-columns: calc( ( 100% - 2rem ) / 3 ); } }
.wcp-reviews__slider > .wcp-slider-buttons { justify-content: flex-end; margin-top: 0.75rem; }
/* Desktop (#218): zoals de oude Lijmkam-site. Bovenaan één regel met sterren, gemiddelde en aantal; daaronder de balken
als smalle linkerkolom en de reviews (raster of slider, 2 kaarten) ernaast, bovenkant gelijk; review-knop rechts eronder.
De samenvatting zelf is display:contents, zodat score en balken elk een eigen plek in het raster krijgen. Gesloten