@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; }
.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); }
@media (max-width: 47.99rem) {
	.sticky-bar { --thumb: 3rem; --gap: 0.6rem; }
	.sticky-bar .button-wrap .button::before { margin: 0; }
	.sticky-bar .button-wrap .button { font-size: 0; padding: 0.5rem; }
	.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; }
}