@charset "UTF-8";
.sticky-bar {
	--thumb: 4rem;
	--gap: 1rem;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #fff;
	border-top: 1px solid var(--wcp-color-border, #e5e7eb);
	z-index: 1030;
	transform: translateY(100%);
	transition: all 0.2s ease-in-out;
}
.sticky-bar.show { transform: translateY(0); }
/* Bootstrap-rest: het JS toggelt d-none (knopwissel simpel/variabel product) — scoped definiëren. */
.sticky-bar .d-none { display: none !important; }
/* Eigen containerstyling (add-on is zelfstandig; .container komt niet meer uit Bootstrap/theme). */
.sticky-bar .container {
	max-width: var(--wcp-container, 1140px);
	margin-inline: auto;
	padding-inline: 1rem;
}
.sticky-bar .wrap {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	padding: var(--gap) 0;
}
.sticky-bar .thumb-wrap .thumb { height: var(--thumb); width: var(--thumb); }
.sticky-bar .button-wrap { flex-shrink: 0; }
/* Witte tekst en icoon op de CTA-kleur, zoals de koopknop in form.cart. WooCommerce Plus zet hier
   alleen de achtergrond; buiten form.cart won WooCommerce's .woocommerce button.button (donkergrijs). */
.woocommerce .sticky-bar .button-wrap .button,
.woocommerce .sticky-bar .button-wrap .button:hover,
.sticky-bar .button-wrap .button,
.sticky-bar .button-wrap .button:hover { color: #fff; }
.sticky-bar .price-wrap { flex-shrink: 0; }
.sticky-bar .price-wrap .price { text-align: end; }
.sticky-bar .title-wrap { flex-grow: 1; font-size: 1.25rem; }
.sticky-bar .title-wrap .title { font-weight: var(--wcp-font-weight-bold, 700); margin-bottom: 0; }
.sticky-bar .title-wrap .stock-wrap { font-size: var(--wcp-font-size-sm, 0.875rem); }
/* Voorraadlabel per status (was .badge uit Bootstrap: in v2 witte tekst zonder achtergrond, dus
   onleesbaar op de witte balk). Kleuren uit de tokensheet, met fallback. */
.sticky-bar .title-wrap .stock.sticky-bar__stock {
	background-color: var(--wcp-color-success, #16a34a);
	color: #fff;
	margin-right: 0.35rem;
}
.sticky-bar .title-wrap .stock.sticky-bar__stock.out-of-stock { background-color: var(--wcp-color-danger, #dc2626); }
.sticky-bar .title-wrap .stock.sticky-bar__stock.available-on-backorder { background-color: var(--wcp-color-warning, #d97706); }
/* Samengesteld product: kleine thumbs van de keuzes + status i.p.v. de voorraadregel. */
.sticky-bar.is-composite .title-wrap .stock-wrap { display: none; }
.sticky-bar__parts { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin-top: 0.25rem; }
.sticky-bar__thumbs { display: inline-flex; gap: 0.25rem; }
.sticky-bar__thumb {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	overflow: hidden;
	box-sizing: border-box;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius-sm, 0.25rem);
	background: var(--wcp-color-surface);
}
.sticky-bar__thumb img { display: block; width: 100%; height: 100%; padding: 0.1rem; box-sizing: border-box; object-fit: contain; }
.sticky-bar__thumb:is(.is-empty, .is-pending) { border-style: dashed; background: var(--wcp-color-light); }
.sticky-bar__thumb.is-pending { border-color: var(--wcp-color-warning); }
/* Optioneel onderdeel zonder keuze ("Geen accessoire"): doorgestreept rondje, zoals in "Jouw samenstelling". */
.sticky-bar__thumb.is-empty { position: relative; }
.sticky-bar__thumb.is-empty::before,
.sticky-bar__thumb.is-empty::after { content: ''; position: absolute; top: 50%; left: 50%; }
.sticky-bar__thumb.is-empty::before { width: 0.8rem; height: 0.8rem; margin: -0.4rem 0 0 -0.4rem; border: 1.5px solid var(--wcp-color-muted); border-radius: 50%; box-sizing: border-box; opacity: 0.55; }
.sticky-bar__thumb.is-empty::after { width: 0.8rem; height: 1.5px; margin: -0.75px 0 0 -0.4rem; background: var(--wcp-color-muted); transform: rotate(-45deg); opacity: 0.55; }
.sticky-bar__status { font-size: var(--wcp-font-size-sm, 0.875rem); color: var(--wcp-color-warning); }
.sticky-bar__status.is-complete { color: var(--wcp-color-success); }
.sticky-bar__status.is-complete::before { content: '\2713\00a0'; font-weight: var(--wcp-font-weight-bold, 700); }
/* Zwevende WhatsApp-knop en de aankondiging (WooCommerce Plus .wcp-announcement, in het Starter Theme
   als zwevend blok #announcement) niet onder de balk: omhoog zolang de balk zichtbaar is. Met #announcement
   in de selector, anders wint de id-regel van het thema. */
.wcp-whatsapp,
:is(#announcement, .wcp-announcement) { transition: bottom 0.2s ease-in-out; }
body:has(.sticky-bar.show) .wcp-whatsapp,
body:has(.sticky-bar.show) :is(#announcement, .wcp-announcement) { bottom: 7rem; }
@media (max-width: 47.99rem) {
	.sticky-bar { --thumb: 3rem; --gap: 0.6rem; }
	/* Alleen het icoon: de tekst weg via font-size 0, maar het carticoon van WooCommerce Plus
	   (.single_add_to_cart_button:before, 1.1em) zou daarmee ook 0 worden — dus een vaste maat in rem. */
	.sticky-bar .button-wrap .button { font-size: 0; padding: 0; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
	.sticky-bar .button-wrap .button::before { margin: 0; width: 1.25rem; height: 1.25rem; }
	.sticky-bar .price-wrap .price { font-size: var(--wcp-font-size-sm, 0.875rem); }
	.sticky-bar .title-wrap { font-size: var(--wcp-font-size-sm, 0.875rem); }
	.sticky-bar .title-wrap .stock-wrap { display: none; }
	/* Lange titel hooguit 2 regels, btw-tekst onder de prijs: anders liep de titel over 3 regels en werd de balk hoog. */
	.sticky-bar:not(.is-composite) .title-wrap .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
	.sticky-bar .price-wrap .woocommerce-price-suffix { display: block; font-size: 0.75rem; }
	/* "Maak je keuze" heeft geen icoon: op mobiel kort de tekst tonen i.p.v. een lege knop. */
	.sticky-bar .button-wrap .button.choice { width: auto; padding: 0 0.85rem; font-size: 0.8125rem; font-weight: var(--wcp-font-weight-semibold, 600); white-space: nowrap; }
	.sticky-bar .button-wrap .button.choice::before { content: none; }
	.sticky-bar__thumb { width: 1.5rem; height: 1.5rem; }
	.sticky-bar__status { font-size: 0.75rem; white-space: nowrap; }
	body:has(.sticky-bar.show) .wcp-whatsapp,
	body:has(.sticky-bar.show) :is(#announcement, .wcp-announcement) { bottom: 5.5rem; }
	/* Samengesteld product: de keuze-thumbs vervangen de grote productfoto; titel op één regel, alleen het
	   actuele totaal (geen doorgestreepte prijs/btw-tekst) — anders past het niet naast de knop. */
	.sticky-bar.is-composite .thumb-wrap { display: none; }
	.sticky-bar .title-wrap { min-width: 0; }
	.sticky-bar.is-composite .title-wrap .title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	.sticky-bar.is-composite .price-wrap :is(del, .woocommerce-price-suffix) { display: none; }
	.sticky-bar.is-composite .price-wrap ins { text-decoration: none; }
	.sticky-bar.is-composite .price-wrap .price { font-size: 1rem; font-weight: var(--wcp-font-weight-bold, 700); }
}