@charset "UTF-8";
/* WC Plus — offcanvas-familie (mini-cart, login, cart-trigger). Globaal, tokens-gedreven.
De offcanvas-mechaniek (.wcp-offcanvas/.is-open/.wcp-backdrop) zit in wcp-ui.css; dit is de
"smaak" + de mini-cart/login-inhoud. Structuur: templates/woocommerce/cart/mini-cart.php. */
/* ── Offcanvas-chrome (header/body/close), gedeeld door mini-cart + login ── */
.wcp-offcanvas__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--wcp-color-border);
}
.wcp-offcanvas__title {
margin: 0;
font-size: 1.125rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.wcp-offcanvas__body {
padding: 1rem 1.25rem;
overflow-y: auto;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.wcp-offcanvas__close {
position: relative;
width: 1.5rem;
height: 1.5rem;
border: 0;
background: transparent;
cursor: pointer;
flex-shrink: 0;
}
.wcp-offcanvas__close::before,
.wcp-offcanvas__close::after {
content: "";
position: absolute;
left: 0.1rem;
right: 0.1rem;
top: 50%;
height: 2px;
background: var(--wcp-color-dark);
}
.wcp-offcanvas__close::before { transform: rotate( 45deg ); }
.wcp-offcanvas__close::after { transform: rotate( -45deg ); }
/* ── Cart-trigger (header-knop) ── */
.wcp-btn-cart {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 0;
background: transparent;
cursor: pointer;
color: inherit;
font-size: 1rem;
}
.wcp-btn-cart:hover { color: var(--wcp-color-primary); }
.wcp-btn-cart .svg-icon__cart {
position: relative;
display: inline-flex;
font-size: 1.375rem;
}
.wcp-btn-cart .svg-icon__cart .total-amount {
position: absolute;
top: -0.5rem;
right: -0.6rem;
min-width: 1.1rem;
padding: 0 0.25rem;
background: var(--wcp-color-primary);
color: var(--wcp-color-surface);
border-radius: 999px;
font-size: 0.7rem;
line-height: 1.1rem;
text-align: center;
}
.wcp-btn-cart__text {
display: none;
flex-direction: column;
line-height: 1.25;
text-align: left;
}
.wcp-btn-cart__text strong { font-size: var(--wcp-font-size-sm); }
.wcp-btn-cart__text .total-amount {
color: var(--wcp-color-muted);
font-size: var(--wcp-font-size-sm);
text-transform: lowercase;
}
@media ( min-width: 48rem ) {
.wcp-btn-cart__text { display: flex; }
}
.wcp-is-hidden { display: none !important; }
/* ── Mini-cart: regels ── */
.wcp-mini-cart-canvas .mini-cart {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.wcp-mini-cart-canvas .mini-cart .woocommerce-mini-cart {
list-style: none;
margin: 0;
padding: 0;
}
/* WC-clearfix (li::before/::after display:table) wordt in een grid een anoniem
grid-item en verschuift alle kolommen — uitschakelen. */
.wcp-mini-cart-canvas .woocommerce-mini-cart-item::before,
.wcp-mini-cart-canvas .woocommerce-mini-cart-item::after { content: none !important; }
/* Regel: kleine thumb links, titel en prijs ernaast over de volle breedte, de aantalknoppen op een
eigen regel eronder. Zo blijft een titel leesbaar en blijft een mand met veel regels compact. */
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
position: relative;
display: grid;
grid-template-columns: 3.6rem minmax(0, 1fr); /* zelfde maten als de winkelwagen op mobiel */
grid-template-rows: auto auto;
column-gap: 0.6rem;
row-gap: 0.35rem;
align-items: start;
padding: 0.7rem 0;
border-bottom: 1px solid var(--wcp-color-border);
}
.wcp-mc__thumb {
position: relative;
grid-row: 1 / span 2;
width: 3.6rem;
align-self: start;
}
.wcp-mc__controls { grid-column: 2; }
.wcp-mc__thumb img {
/* !important: WooCommerce's eigen woocommerce.css (.woocommerce ul.product_list_widget
li img) heeft een hogere specificiteit (2 classes + 3 elementen) dan deze regel en zet
anders width:32px/height:auto neer, waardoor de afbeelding op haar intrinsieke
verhouding uitrekt buiten het vierkantje i.p.v. erbinnen te blijven passen. */
width: 100% !important;
height: 3.6rem !important;
object-fit: contain !important;
float: none !important;
margin: 0 !important;
padding: 0.5rem; /* lucht rondom, zoals de fototegels in de winkelwagen */
box-sizing: border-box;
border: 1px solid var(--wcp-color-border);
border-radius: calc(var(--wcp-radius) * 3.6 / 2.75); /* zelfde verhouding als de winkelwagen */
background: var(--wcp-color-surface);
display: block;
}
/* Aantal-badge op de foto alleen als er geen stepper is (bv. vast aantal) — anders stond het aantal dubbel. */
.wcp-mini-cart-canvas li:has(.wcp-mc__controls :is(.quantity, .wcp-combi-qty)) .wcp-mc__qty-badge { display: none; }
.wcp-mc__info {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
}
.wcp-mc__title,
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li a.wcp-mc__title { /* WooCommerce maakt lijstlinks vet (product_list_widget li a) */
color: var(--wcp-color-dark);
text-decoration: none;
font-weight: var(--wcp-font-weight-normal, 400);
font-size: 0.95rem;
line-height: 1.35;
}
.wcp-mc__title:hover { color: var(--wcp-color-primary); }
/* Variatie-attributen (Kleur/Maat/…) en add-on-regels (bv. Staffelkorting) —
wc_get_formatted_cart_item_data() rendert los-staande /-paren; als 2-koloms grid
staat elk paar compact op één regel. Selector via .wcp-mini-cart-canvas + ul/li: WooCommerce's
eigen `.woocommerce ul.product_list_widget li dl dd` (block, float, marge 14px) is anders
specifieker en blaast elke regel op. De dubbele punt zit al in de dt-tekst zelf. */
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li .wcp-mc__info dl.variation {
display: block; /* eigenschappen op één doorlopende regel met een punt ertussen, zoals in de winkelwagen */
margin: 0.125rem 0 0;
padding: 0;
border: 0;
font-size: 0.8125rem;
line-height: 1.35;
color: var(--wcp-color-muted);
}
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li .wcp-mc__info dl.variation dt,
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li .wcp-mc__info dl.variation dd,
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li .wcp-mc__info dl.variation dd p {
float: none;
display: inline;
margin: 0;
padding: 0;
font-weight: 400;
}
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li .wcp-mc__info dl.variation dt::after { content: ' '; }
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li .wcp-mc__info dl.variation dd { color: var(--wcp-color-text); }
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li .wcp-mc__info dl.variation dd:not(:last-of-type)::after {
content: '·';
margin: 0 0.35rem;
color: var(--wcp-color-muted);
}
/* WooCommerce' clearfix (::before/::after display:table) op winkelpagina's (body.woocommerce) wordt in
een grid een eigen cel: alles schoof één plek op (labels rechts, waarden links). */
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li .wcp-mc__info dl.variation::before,
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li .wcp-mc__info dl.variation::after {
content: none;
display: none;
}
.wcp-mc__price {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem 0.4rem;
font-size: 0.95rem;
font-weight: var(--wcp-font-weight-bold);
}
.wcp-mc__unit { color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm); font-weight: 400; }
.wcp-mc__controls {
display: flex;
align-items: center;
}
/* Stepper en prullenbak even groot als in de winkelwagen (mobiel). */
.wcp-mc__controls .quantity .qty { width: 2.6rem; height: 2.25rem; padding-block: 0; }
.wcp-mc__controls .quantity button.minus,
.wcp-mc__controls .quantity button.plus { width: 2.1rem; min-height: 2.25rem; }
.wcp-mini-cart-canvas .wcp-combi-qty { min-width: 0; height: 2.25rem; padding: 0 0.85rem; } /* vast aantal (combideal) compact */
.wcp-mc__controls { gap: 0.5rem; }
/* Verwijderen: prullenbak rechts naast de stepper, zoals in de winkelwagen (was een kruisje van 10px
rechtsboven in het item, dat in beeld wegviel). */
.wcp-mc__remove,
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li .wcp-mc__controls a.wcp-mc__remove { /* WooCommerce zet links in product_list_widget op display:block — dan kreeg het icoon geen maat */
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
margin-left: auto;
border-radius: var(--wcp-radius);
color: var(--wcp-color-muted);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.wcp-mc__remove::before {
content: '';
display: block;
flex: none;
width: 1rem;
height: 1rem;
background-color: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wcp-mc__remove:hover,
.wcp-mc__remove:focus-visible { background: var(--wcp-color-light); color: var(--wcp-color-danger); }
.wcp-mini-cart-canvas .mini-cart ul.loading {
opacity: 0.5;
pointer-events: none;
}
.wcp-mini-cart-canvas .woocommerce-mini-cart__empty-message {
color: var(--wcp-color-muted);
text-align: center;
padding: 2rem 0;
}
/* ── Mini-cart: footer onderaan gepind (zoals de demo) ── */
.wcp-mc__footer { margin-top: auto; padding-top: 1rem; }
.wcp-mini-cart-canvas .woocommerce-mini-cart__total { margin: 0; }
.wcp-mini-cart-canvas .totals {
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 0 0 0.25rem;
font-size: 1.05rem;
}
.wcp-mini-cart-canvas .tax {
display: block;
color: var(--wcp-color-muted);
font-size: var(--wcp-font-size-sm);
margin-bottom: 1rem;
}
/* Compacte footer (templates/cart/mini-cart-sticky.php): anker van 0 hoog dat onderin de scrollende
body blijft plakken; de balk hangt er vanaf omhoog. Zichtbaar zolang de echte footer uit beeld is
(wcp-minicart.js zet .is-visible) — wegschuiven via clip-path/opacity, dus zonder layout-sprong. */
.wcp-mc__sticky {
position: sticky;
bottom: -1rem; /* = padding-bottom van .wcp-offcanvas__body: tegen de onderrand */
z-index: 2;
height: 0;
margin-inline: -1.25rem; /* tot de randen van de canvas */
}
.wcp-mc__sticky-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.65rem 1.25rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
background: var(--wcp-color-surface);
border-top: 1px solid var(--wcp-color-border);
box-shadow: 0 -0.5rem 1.5rem rgb(0 0 0 / 0.06);
opacity: 0;
visibility: hidden;
clip-path: inset(100% 0 0 0);
transition: opacity 0.2s ease, clip-path 0.2s ease-in-out, visibility 0s linear 0.2s;
}
.wcp-mc__sticky.is-visible .wcp-mc__sticky-bar {
opacity: 1;
visibility: visible;
clip-path: inset(-2rem 0 0 0); /* schaduw erboven niet afknippen */
transition: opacity 0.2s ease, clip-path 0.2s ease-in-out, visibility 0s;
}
.wcp-mc__sticky-total { display: flex; flex-direction: column; line-height: 1.25; }
.wcp-mc__sticky-label { color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm); }
.wcp-mc__sticky-amount { color: var(--wcp-color-dark); font-size: 1.1rem; font-weight: var(--wcp-font-weight-bold); }
.wcp-mini-cart-canvas .wcp-mc__sticky-button {
flex: none;
padding: 0.6rem 1.5rem;
background: var(--wcp-color-primary);
color: var(--wcp-color-surface);
border-radius: var(--wcp-radius);
text-decoration: none;
font-weight: var(--wcp-font-weight-bold);
}
.wcp-mini-cart-canvas .wcp-mc__sticky-button:hover { background: var(--wcp-color-primary-hover); }
/* voortgangslijn naar gratis verzending over de bovenrand, zoals de sticky balk in de winkelwagen */
.wcp-mc__sticky-progress {
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 3px;
background: var(--wcp-color-border);
}
.wcp-mc__sticky-progress span { display: block; height: 100%; background: var(--wcp-color-primary); }
.wcp-mc__sticky-progress.is-reached span { background: var(--wcp-color-success); }
/* minimum-bestelbedrag-balk (core minimum-order-amount): mini-cart én winkelwagen (vervangt daar de
afrekenknop). mini-cart.css laadt ook op de winkelwagenpagina. */
.wcp-min-order {
background: color-mix(in srgb, var(--wcp-color-primary) 10%, var(--wcp-color-surface));
border-radius: var(--wcp-radius);
padding: 0.75rem 1rem;
margin-bottom: 1rem;
font-size: var(--wcp-font-size-sm);
}
.wcp-min-order__text { margin: 0 0 0.5rem; }
.wcp-cart-sticky__shipping strong,
.wcp-mc__sticky-min strong { color: var(--wcp-color-text); }
/* Compacte mini-cart-balk onder het minimum: tekst i.p.v. de afrekenknop. */
.wcp-mc__sticky-min { color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm); text-align: right; }
.wcp-progress {
height: 0.375rem;
background: color-mix(in srgb, var(--wcp-color-surface) 85%, transparent);
border-radius: 999px;
overflow: hidden;
}
.wcp-progress__bar {
height: 100%;
background: var(--wcp-color-primary);
border-radius: 999px;
transition: width 0.3s ease;
}
/* knoppen */
.wcp-mini-cart-canvas .woocommerce-mini-cart__buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0 0 0.75rem;
}
.wcp-mini-cart-canvas .woocommerce-mini-cart__buttons .button {
display: block;
width: 100%;
text-align: center;
padding: 0.75rem 1rem;
background: var(--wcp-color-primary);
color: var(--wcp-color-surface);
border-radius: var(--wcp-radius);
text-decoration: none;
font-weight: var(--wcp-font-weight-bold);
}
.wcp-mini-cart-canvas .woocommerce-mini-cart__buttons .button:hover {
background: var(--wcp-color-primary-hover);
}
/* "Opslaan als offerte" (quotes-add-on) als gecentreerde tekst-link, zoals de demo */
.wcp-mini-cart-canvas .savecart {
display: block;
width: 100%;
text-align: center;
background: none;
border: 0;
padding: 0.25rem;
color: var(--wcp-color-dark);
font-weight: var(--wcp-font-weight-bold);
text-decoration: none;
cursor: pointer;
}
.wcp-mini-cart-canvas .savecart:hover { color: var(--wcp-color-primary); }
/* betaaliconen gecentreerd onderaan */
.wcp-mini-cart-canvas .wcp-payment-icons { justify-content: center; margin-top: 0.5rem; }
.wcp-mini-cart__edit {
font-size: var(--wcp-font-size-sm);
line-height: 0;
}
.wcp-mini-cart__edit::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
background-color: var(--wcp-color-muted);
}
/* ── Betaalmethode-iconen (gedeeld: mini-cart/cart/footer) ── */
.wcp-payment-icons {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.wcp-payment-icons img {
height: 1.5rem;
width: auto;
}
/* ── Login-offcanvas ── */
.wcp-login__row {
margin: 0 0 1rem;
}
.wcp-login__row label {
display: block;
margin-bottom: 0.25rem;
}
.wcp-login__input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--wcp-color-border);
border-radius: var(--wcp-radius);
}
.wcp-login__remember {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.wcp-login__submit {
width: 100%;
}
.wcp-login__message:empty {
display: none;
}
.wcp-login__message {
padding: 0.5rem 0.75rem;
border-radius: var(--wcp-radius);
margin-bottom: 1rem;
font-size: var(--wcp-font-size-sm);
}
.wcp-login__message.is-error {
background: color-mix(in srgb, var(--wcp-color-danger) 10%, var(--wcp-color-surface));
color: var(--wcp-color-danger);
}
.wcp-login__message.is-success {
background: var(--wcp-color-success-soft);
color: var(--wcp-color-success);
}
/* ── Add-to-cart-canvas (na toevoegen; deelt de offcanvas-chrome) ── */
/* Bevestigingsbalk in de secondary-themakleur (was hardcoded #22a06b/#fff). */
.wcp-atc-canvas__header {
background: var(--wcp-color-secondary);
color: var(--wcp-color-surface, #fff);
border-bottom: 0;
}
.wcp-atc-canvas__header .wcp-offcanvas__title { color: inherit; font-size: 1rem; }
.wcp-atc-canvas__header .wcp-offcanvas__close::before,
.wcp-atc-canvas__header .wcp-offcanvas__close::after { background: currentColor; }
.wcp-atc-canvas__heading {
padding: 1rem 1.25rem 1.25rem;
border-bottom: 1px solid var(--wcp-color-border);
}
/* Toegevoegde producten (wcp_atc_canvas_item): foto, naam, aantal/details; add-on-regels
(combideal, extra accessoires) als .is-sub ingesprongen onder het hoofdproduct. */
.wcp-atc-canvas .products-list {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.wcp-atc-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr) auto;
align-items: center;
column-gap: 0.75rem;
}
.wcp-atc-item.is-sub {
grid-template-columns: 2.25rem minmax(0, 1fr) auto;
padding-left: 1.5rem;
}
.wcp-atc-item__thumb img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
border: 1px solid var(--wcp-color-border);
border-radius: var(--wcp-radius-sm);
background: var(--wcp-color-surface, #fff);
}
.wcp-atc-item__body { display: flex; flex-direction: column; min-width: 0; }
.wcp-atc-item__name { font-weight: var(--wcp-font-weight-semibold, 600); font-size: var(--wcp-font-size-sm); line-height: 1.3; }
.wcp-atc-item.is-sub .wcp-atc-item__name { font-weight: var(--wcp-font-weight-normal, 400); }
.wcp-atc-item__meta { color: var(--wcp-color-muted); font-size: 0.8125rem; }
.wcp-atc-item__chip {
padding: 0.05rem 0.45rem;
border-radius: 999px;
background: var(--wcp-color-light);
color: var(--wcp-color-primary);
font-size: 0.6875rem;
font-weight: var(--wcp-font-weight-semibold, 600);
white-space: nowrap;
}
.wcp-atc-canvas__ctas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.wcp-atc-canvas__ctas .wcp-btn { justify-content: center; text-align: center; }
.wcp-atc-canvas .btn-continue {
display: block;
margin-top: 0.75rem;
text-align: center;
color: var(--wcp-color-muted);
font-size: var(--wcp-font-size-sm);
}
.wcp-atc-canvas .btn-continue:hover { color: var(--wcp-color-primary); }
.wcp-atc-canvas__body { display: flex; flex-direction: column; background: var(--wcp-color-light); }
.wcp-atc-canvas__subtitle { margin: 0 0 0.75rem; font-size: 1rem; }
.wcp-atc-canvas .inner.wcp-is-hidden { display: none; }
/* Eén kolom: het loop-grid (.wcp-loop) maakte er in het smalle canvas 2 kolommen van 162px van. */
.wcp-atc-canvas .cross-sells .wcp-products ul.products.wcp-loop,
.wcp-atc-canvas .cross-sells ul.products { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; grid-template-columns: none; }
.wcp-atc-canvas .cross-sells ul.products li.product { width: 100% !important; float: none !important; margin: 0 !important; }
/* Compacte kaart in het smalle canvas (en de cross-sells van een korte winkelwagen, twee naast elkaar)
als één rij: [foto] [naam + prijs] [kleine koopknop].
De compacte loopvariant zet de knoppen in een eigen kolom met aantalveld — bedacht voor
brede lijsten; hier bleef er voor de titel 24px over. Aantal 1, geen hart/badges/voorraad. */
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product {
grid-template-columns: 3.5rem minmax(0, 1fr);
column-gap: 0.75rem;
padding: 0.6rem 0.75rem;
}
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .wcp-loop-thumb img { height: 3.5rem; }
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .product-info {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 0.6rem;
}
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .buttons { grid-row: 1 / -1; grid-column: 2; }
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .buttons .quantity,
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .wishlist-sel,
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .wcp-loop-badges,
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .stock,
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .wcp-loop-brand,
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .wcp-compare-btn,
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .variations { display: none !important; }
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .buttons form.cart { margin: 0; }
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .single_add_to_cart_button {
width: 2.5rem;
min-width: 0;
height: 2.5rem;
padding: 0;
border-radius: var(--wcp-radius-sm);
}
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .woocommerce-loop-product__title {
font-size: var(--wcp-font-size-sm);
line-height: 1.3;
margin: 0;
}
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .price { font-size: var(--wcp-font-size-sm); }
:is(.wcp-atc-canvas .cross-sells, .wcp-cart-cross-sells) ul.products.wcp-loop--compact > li.product .price br { display: none; }
/* toast (fallback zonder canvas) */
.wcp-toast-container {
position: fixed;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
z-index: 1090;
display: flex;
flex-direction: column;
gap: 0.5rem;
width: min(26rem, calc(100vw - 2rem));
}
.wcp-toast {
background: var(--wcp-color-dark);
color: var(--wcp-color-surface);
padding: 0.75rem 1rem;
border-radius: var(--wcp-radius);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
font-size: var(--wcp-font-size-sm);
}
/* gebruikersmenu-offcanvas */
.wcp-user-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wcp-user-menu__list a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 0;
border-bottom: 1px solid var(--wcp-color-border);
color: var(--wcp-color-dark);
text-decoration: none;
}
.wcp-user-menu__list a:hover,
.wcp-user-menu__list li.active a { color: var(--wcp-color-primary); text-decoration: none; }
.wcp-user-menu__list a [class*="svg-icon__"] {
color: var(--wcp-color-primary);
font-size: 1.125rem;
}
/* Kortingschip (cart.php → wcp_cart_item_chips): één pil naast de prijs in winkelwagen en
mini-cart, met de labels van alle add-ons gescheiden door een punt. Geladen waar een mini-cart
kan staan, dus ook op de winkelwagenpagina. */
.wcp-cart-chip {
display: inline-flex;
flex-wrap: wrap;
max-width: 100%; /* smalle cel (mobiel): de labels breken binnen de chip af i.p.v. over de rand */
min-width: 0;
align-items: center;
padding: 0.05rem 0.4rem;
border-radius: 0.6rem; /* op één regel gewoon een pil; afgebroken een nette tag i.p.v. een blob */
background: var(--wcp-color-light);
color: var(--wcp-color-primary);
font-size: 0.6875rem;
font-weight: var(--wcp-font-weight-semibold, 600);
line-height: 1.5;
vertical-align: middle;
}
.wcp-cart-chip__part { white-space: nowrap; }
/* Punt ná elk deel behalve het laatste: breekt de chip toch af, dan staat de punt aan het eind van de
regel i.p.v. aan het begin van de volgende. */
.wcp-cart-chip__part:not(:last-child)::after {
content: '·';
margin: 0 0.3rem;
opacity: 0.6;
}
/* In de prijsregel niet laten krimpen: past hij niet achter de prijs, dan als geheel naar de volgende regel
(en alleen intern afbreken als hij breder is dan de hele regel). */
:is(.wcp-mc__price, td.product-price) > .wcp-cart-chip { flex-shrink: 0; }
/* Bundel/samengesteld product (composite.php): de onderdelen staan als eigen rijen in de lijst (boompje
hieronder), dus de tekstlijst die Bundles/Composite bij de container zetten is overbodig. */
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.wcp-mc-group .wcp-mc__info dl.variation { display: none; }
.wcp-mc-group-toggle {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0;
border: 0;
background: none;
color: var(--wcp-color-muted); /* rustige, kleine link ("4 producten ⌄"), zoals in de winkelwagen */
font: inherit;
font-size: var(--wcp-font-size-sm);
font-weight: var(--wcp-font-weight-normal, 400);
white-space: nowrap;
cursor: pointer;
}
.wcp-mc-group-toggle::after {
content: '';
width: 0.6rem;
height: 0.6rem;
background-color: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform 0.15s ease;
}
.wcp-mc-group-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.wcp-mc-group-toggle:hover { color: var(--wcp-color-primary); }
/* Voortgang naar gratis verzending (cart/free-shipping-progress.php): bovenin het totaalblok en in de
mini-cart (daarom hier: mini-cart.css laadt overal). Behaald: groen vinkje en een volle balk in de succeskleur. */
.wcp-free-shipping { margin: 0 0 1rem; }
.wcp-free-shipping__text {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.5rem;
font-size: var(--wcp-font-size-sm);
line-height: 1.4;
}
.wcp-free-shipping__text i { flex: none; color: var(--wcp-color-primary); font-size: 1.1rem; }
.wcp-free-shipping__savings { color: var(--wcp-color-muted); }
.wcp-free-shipping__savings::before { content: '· '; }
.wcp-free-shipping .wcp-progress { height: 0.4rem; border-radius: 999px; }
.wcp-free-shipping .wcp-progress__bar { border-radius: inherit; }
.wcp-free-shipping.is-reached .wcp-free-shipping__text { color: var(--wcp-color-success); font-weight: var(--wcp-font-weight-semibold, 600); }
.wcp-free-shipping.is-reached .wcp-free-shipping__text i { color: var(--wcp-color-success); }
.wcp-free-shipping.is-reached .wcp-progress__bar { background: var(--wcp-color-success); }
/* Mini-cart: tussen subtotaal en knoppen. */
.wcp-free-shipping--mini-cart { margin: 0.75rem 0 1rem; }
/* Productgroepen (combideal, bundel, samengesteld product; klassen wcp-cart-group-parent/-child uit
cart.php/composite.php) als boompje, zoals in de winkelwagen: onderdelen ingesprongen tot onder de naam
van het hoofdproduct met een kleinere tegel, en een dunne lijn in de randkleur vanuit de foto van het
hoofdproduct. Bundel/samengesteld: onderdelen ingeklapt achter "Bekijk inhoud" (wcp-minicart.js), een
bundel ín een samengesteld product geeft een tweede niveau.
--mcg-x = midden van de fotokolom, --mcg-in = inspringing, --mcg-y = aftakpunt (0,35rem padding + halve
tegel van 2,75rem); --mcg-x2/--mcg-in2 voor het tweede niveau. */
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item:is(.wcp-cart-group-parent, .wcp-cart-group-child) {
--mcg-x: 1.8rem;
--mcg-in: 3.9rem;
--mcg-y: 1.725rem;
--mcg-x2: calc(var(--mcg-in) + 1.375rem);
--mcg-in2: calc(var(--mcg-in) + 2.6rem);
--mcg-tick: calc(var(--mcg-in) - var(--mcg-x) - 0.4rem) 1px;
--mcg-tick2: calc(var(--mcg-in2) - var(--mcg-x2) - 0.4rem) 1px;
--mcg-line: linear-gradient(var(--wcp-color-border), var(--wcp-color-border));
background-repeat: no-repeat;
}
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-collapsible:not(.is-open) { display: none; }
/* Hoofdproduct (open): geen scheidingslijn, lijn omlaag vanaf de onderkant van de tegel (0,7 + 3,6rem). */
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-parent:not(.is-collapsed) { border-bottom-color: transparent; padding-bottom: 0.35rem; }
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-parent:not(.is-collapsed):not(.wcp-cart-group-child) {
background-image: var(--mcg-line);
background-position: var(--mcg-x) 100%;
background-size: 1px calc(100% - 4.3rem);
}
/* Onderdeel: doorlopende lijn + aftakking; het laatste (server: wcp-cart-group-last, combideal: geen volgend
onderdeel) stopt bij de aftakking en sluit de groep af met een scheidingslijn. */
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child {
grid-template-columns: 2.75rem minmax(0, 1fr);
column-gap: 0.5rem;
padding-top: 0.35rem;
padding-left: var(--mcg-in);
border-bottom-color: transparent;
padding-bottom: 0.35rem;
background-image: var(--mcg-line), var(--mcg-line);
background-position: var(--mcg-x) 0, var(--mcg-x) var(--mcg-y);
background-size: 1px 100%, var(--mcg-tick);
}
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child:not(:has(+ li.wcp-cart-group-child)),
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child.wcp-cart-group-last:not(:has(+ li.wcp-cart-group-child.wcp-cart-group-depth-2.is-open)) {
background-size: 1px var(--mcg-y), var(--mcg-tick);
}
/* Scheidingslijn na het laatste zichtbare onderdeel van de groep: combideal (geen volgend accessoire),
bundel/samengesteld via de serverklassen — niet op de directe volgende rij afgaan, die kan een verborgen
onderdeel van een ingeklapte geneste bundel zijn. */
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-combi-child:not(:has(+ li.wcp-combi-child)),
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child.wcp-cart-group-last:not(.wcp-cart-group-depth-2):is(.is-collapsed, :not(.wcp-cart-group-parent)),
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child.wcp-cart-group-depth-2.wcp-cart-group-last:not(.wcp-cart-group-outer-line) { border-bottom-color: var(--wcp-color-border); padding-bottom: 0.7rem; }
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child .wcp-mc__thumb { width: 2.75rem; }
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child .wcp-mc__thumb img { height: 2.75rem !important; padding: 0.35rem; border-radius: var(--wcp-radius); }
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child .wcp-mc__title { font-size: 0.9rem; }
/* Onderdelen van een bundel/samengesteld product: aantal ligt vast en verwijderen kan alleen via het
hoofdproduct — geen stepper/prullenbak, het aantal staat als badge op de foto. Stukprijs weg: rustiger. */
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.child .wcp-mc__controls { display: none; }
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child .wcp-mc__unit { display: none; }
/* Bundel ín een samengesteld product (onderdeel én container), open: ook een lijn omlaag vanaf de eigen tegel. */
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child.wcp-cart-group-parent:not(.is-collapsed) {
background-image: var(--mcg-line), var(--mcg-line), var(--mcg-line);
background-position: var(--mcg-x) 0, var(--mcg-x) var(--mcg-y), var(--mcg-x2) 100%;
background-size: 1px 100%, var(--mcg-tick), 1px calc(100% - 3.1rem);
}
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child.wcp-cart-group-parent.wcp-cart-group-last:not(.is-collapsed) {
background-size: 1px var(--mcg-y), var(--mcg-tick), 1px calc(100% - 3.1rem);
}
/* Tweede niveau. */
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child.wcp-cart-group-depth-2 {
grid-template-columns: 2.4rem minmax(0, 1fr);
padding-left: var(--mcg-in2);
background-position: var(--mcg-x2) 0, var(--mcg-x2) var(--mcg-y);
background-size: 1px 100%, var(--mcg-tick2);
}
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child.wcp-cart-group-depth-2.wcp-cart-group-last { background-size: 1px var(--mcg-y), var(--mcg-tick2); }
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child.wcp-cart-group-depth-2.wcp-cart-group-outer-line {
background-image: var(--mcg-line), var(--mcg-line), var(--mcg-line);
background-position: var(--mcg-x2) 0, var(--mcg-x2) var(--mcg-y), var(--mcg-x) 0;
background-size: 1px 100%, var(--mcg-tick2), 1px 100%;
}
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child.wcp-cart-group-depth-2.wcp-cart-group-outer-line.wcp-cart-group-last { background-size: 1px var(--mcg-y), var(--mcg-tick2), 1px 100%; }
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child.wcp-cart-group-depth-2 .wcp-mc__thumb { width: 2.4rem; }
.wcp-mini-cart-canvas ul.woocommerce-mini-cart li.woocommerce-mini-cart-item.wcp-cart-group-child.wcp-cart-group-depth-2 .wcp-mc__thumb img { height: 2.4rem !important; padding: 0.3rem; }
/* Nabestelling en lage voorraad (mini-cart.php): waarschuwingsbadge onder de naam, zoals in de winkelwagen. */
.wcp-mini-cart-canvas .wcp-mc__info :is(.backorder_notification, .wcp-stock-note) {
display: inline-flex;
align-items: center;
gap: 0.3rem;
width: fit-content;
margin: 0.2rem 0 0.1rem;
padding: 0.05rem 0.5rem;
border-radius: 999px;
background: color-mix(in srgb, var(--wcp-color-warning) 12%, transparent);
color: var(--wcp-color-warning);
font-size: 0.6875rem;
font-weight: var(--wcp-font-weight-semibold, 600);
line-height: 1.5;
}