/* Uitklapwagen umbaumeister.com (Leon 27-10-2026): Leno-opbouw zoals aku en akustik, in de umbau-huisstijl
   (kleuren uit umbau-look.css, var(--lla-*); de BF26-laag zet die in het donkere thema zelf om).
   Alles hangt aan .uwg of aan :has(.uwg), dus de gewone Flatsome-wagen blijft ongemoeid zolang het sjabloon uit staat.
   flatsome.css laadt na dit bestand: daarom steeds .uwg ervoor en bij knoppen en velden ook het type. */

/* ---------------------------------------------------------------- lade: kop, scrollende lijst, vaste voet */
.off-canvas .mfp-content.off-canvas-cart:has(.uwg) { --drawer-width: min(480px, 100vw); width: min(480px, 100vw) !important; max-width: 100vw; }
.mfp-content.off-canvas-cart:has(.uwg) > #cart-popup { height: 100%; }
.off-canvas-cart .cart-popup-inner:has(.uwg) { padding: 0 !important; height: 100%; min-height: 100%; display: flex; flex-direction: column; }
.off-canvas-cart .cart-popup-inner:has(.uwg) > :last-child { margin-bottom: 0; }
.off-canvas-cart .cart-popup-inner:has(.uwg) .cart-popup-title { display: none; }
.off-canvas-cart .widget_shopping_cart:has(.uwg), .off-canvas-cart .widget_shopping_cart_content:has(.uwg) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; }

.uwg { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; color: var(--lla-inkt, #141211); text-align: left; font-size: 14px; line-height: 1.45; }
.uwg.is-bezig .uwg__regels, .uwg.is-bezig .uwg__voet { opacity: .55; transition: opacity .15s; }
/* Tijdens een wijziging alleen de bediening blokkeren; Afrekenen en productlinks blijven klikbaar (anders slikt de lade de
   eerste klik na het intypen van een aantal in). */
.uwg.is-bezig :is(.uwg__aantal, .uwg__weg, .uwg__code, .uwg__aanbod-knop, [data-uwg-code-weg]) { pointer-events: none; }
.uwg p { margin: 0; }
.uwg svg { flex: 0 0 auto; }
.uwg :focus-visible { outline: 2px solid var(--lla-goud, #c88407); outline-offset: 2px; }
.uwg__kop { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding: 24px 56px 12px 24px; }
.uwg__kop b { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--lla-inkt, #141211); }
.uwg__kop span { font-size: 13.5px; color: var(--lla-grijs, #6b6459); }

.uwg ul.uwg__regels { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 !important; padding: 4px 24px 12px !important; list-style: none; }
/* De lijst is een flex-kolom (Flatsome): zonder dit krimpt een productregel in elkaar (overflow hidden) in plaats van dat
   de lijst scrolt, en valt met drie of meer producten de helft van een product weg (aku-fix 76e92cc, Leon 27-10). */
.uwg ul.uwg__regels > li { flex-shrink: 0; }
.uwg .uwg__regel { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 14px; align-items: start; position: relative; overflow: visible; margin: 0 !important; padding: 14px 0 !important; border: 0 !important; list-style: none; min-height: 0 !important; line-height: 1.45; }
.uwg .uwg__regel + .uwg__regel { border-top: 1px solid var(--lla-lijn, #ece7df) !important; }
.uwg .uwg__regel a:not(.remove) { display: inline; margin: 0; overflow: visible; text-overflow: clip; line-height: inherit; }
.uwg .uwg__foto { display: block !important; width: 80px; height: 80px; border-radius: 10px; overflow: hidden; background: var(--lla-creme, #faf8f5); }
.uwg .uwg__foto img { position: static !important; display: block; width: 80px !important; height: 80px !important; max-width: none; object-fit: cover; margin: 0 !important; float: none !important; border-radius: 0; }
.uwg__info { min-width: 0; }
.uwg .uwg__naam { margin: 0 0 4px; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--lla-inkt, #141211); overflow-wrap: anywhere; }
.uwg .uwg__naam a { color: var(--lla-inkt, #141211); text-decoration: none; }
.uwg .uwg__naam a:hover { color: var(--lla-goud, #c88407); }
.uwg .uwg__info dl.variation { margin: 0 0 4px; font-size: 12px; color: var(--lla-grijs, #6b6459); }
.uwg .uwg__info dl.variation :is(dt, dd, p) { display: inline; margin: 0; font-weight: 400; }
.uwg__prijs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.uwg__prijs b { font-size: 15px; font-weight: 700; color: var(--lla-inkt, #141211); font-variant-numeric: tabular-nums; }
.uwg__prijs s { font-size: 12.5px; color: #8a847a; }
.uwg .uwg__spaar { margin-top: 5px; line-height: 1; }
.uwg__spaar span { display: inline-block; padding: 3px 9px; border-radius: 99px; background: #e6f4ec; color: #0f7a4f; font-size: 11.5px; font-weight: 600; line-height: 1.35; }
/* Plek voor de BF-prijs (bf26.js); leeg buiten Black Friday. */
.uwg .uwg__bf { display: block; margin: 0; opacity: 1; font-size: inherit; white-space: normal; }
.uwg .uwg__bf:not(:has(.bf26-mcprijs)) { display: none; }
.uwg__lever { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 7px; padding: 3px 9px; border-radius: 99px; background: var(--lla-groen-bg, #eef7ef); color: var(--lla-groen, #2f7a3e); font-size: 11.5px; font-weight: 500; line-height: 1.35; }
.uwg__lever::before { content: ""; flex: 0 0 6px; height: 6px; border-radius: 99px; background: currentColor; }
.uwg__lever.is-later { background: var(--lla-blauw-bg, #eef3fc); color: var(--lla-blauw, #2456b3); }

.uwg__acties { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; align-self: stretch; }
.uwg .uwg__regel a.uwg__weg { position: static !important; display: flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent; color: var(--lla-grijs, #6b6459) !important; line-height: 1 !important; font-size: 0 !important; opacity: 1 !important; }
.uwg .uwg__regel a.uwg__weg:hover { background: var(--lla-creme, #faf8f5); color: var(--lla-inkt, #141211) !important; }
.uwg .uwg__weg svg { width: 16px; height: 16px; }
.uwg__aantal { display: flex; align-items: center; gap: 4px; }
.uwg .uwg__aantal button[type="button"] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--lla-lijn-sterk, #e2ddd4); border-radius: 8px; background: #fff; color: var(--lla-inkt, #141211); font-size: 16px; font-weight: 400; line-height: 1; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; }
.uwg .uwg__aantal button[type="button"]:hover:not(:disabled) { border-color: var(--lla-inkt, #141211); }
.uwg .uwg__aantal button[type="button"]:disabled { opacity: .35; cursor: default; }
.uwg .uwg__aantal input[type="number"] { width: 40px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--lla-inkt, #141211); text-align: center; font-size: 14px; -moz-appearance: textfield; appearance: textfield; }
.uwg .uwg__aantal input[type="number"]::-webkit-outer-spin-button, .uwg .uwg__aantal input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------------- voet: code, verzending, totaal, kassa, vertrouwen */
.uwg__voet { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--lla-lijn, #ece7df); background: #fff; }
.uwg .bf26-wk { margin: 0; }
/* De BF26-kaart heeft een eigen totaal zonder verzending; hier staat het totaal met verzending eronder. */
.uwg .bf26-wk__totaal, .uwg .bf26-wk__bespaard { display: none !important; }

.uwg__som { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--lla-lijn, #ece7df); }
.uwg .uwg__som-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--lla-inkt, #141211); }
.uwg__som-rij > span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.uwg .uwg__som-rij--code { font-weight: 600; color: #ea6a00; }
.uwg__code-tekst { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.uwg__code-tekst svg { flex: 0 0 16px; width: 16px; height: 16px; }
.uwg .uwg__code-tekst button[type="button"] { flex: 0 0 22px; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 99px; background: transparent; color: #8a847a; font-size: 16px; font-weight: 400; line-height: 1; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; }
.uwg .uwg__code-tekst button[type="button"]:hover { background: rgba(20, 18, 17, .08); color: var(--lla-inkt, #141211); }

/* UMBAU10-kaart in de stijl van het actieblok en de actiebalk (donker met goud). */
.uwg__aanbod { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #24201c 0%, #141210 100%); color: #fff; }
.uwg__aanbod-ico { flex: 0 0 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 99px; background: rgba(200, 132, 7, .2); color: var(--lla-goud, #c88407); }
.uwg__aanbod-ico svg { width: 17px; height: 17px; }
.uwg__aanbod-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.uwg__aanbod-tekst b { font-size: 14px; font-weight: 700; color: #fff; }
.uwg__aanbod-tekst small { font-size: 12px; color: rgba(255, 255, 255, .65); line-height: 1.35; }
.uwg .uwg__aanbod button.uwg__aanbod-knop { flex: 0 0 auto; height: 38px; min-height: 0; margin: 0; padding: 0 16px; border: 0; border-radius: 99px; background: var(--lla-goud, #c88407); color: #fff; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1; box-shadow: none; cursor: pointer; }
.uwg .uwg__aanbod button.uwg__aanbod-knop:hover { background: #a96f05; }
.uwg .uwg__code { display: flex; gap: 8px; margin: 0; }
.uwg .uwg__code input[type="text"] { flex: 1; min-width: 0; height: 40px; min-height: 0; margin: 0; padding: 0 12px; border: 1px solid var(--lla-lijn-sterk, #e2ddd4); border-radius: 8px; box-shadow: none; background: #fff; color: var(--lla-inkt, #141211); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.uwg .uwg__code input[type="text"]:focus { border-color: var(--lla-goud, #c88407); outline: none; }
.uwg .uwg__code input[type="text"]::placeholder { text-transform: none; letter-spacing: 0; color: #8a847a; }
.uwg .uwg__code button[type="submit"] { flex: 0 0 auto; height: 40px; min-height: 0; margin: 0; padding: 0 16px; border: 1px solid var(--lla-inkt, #141211); border-radius: 8px; background: #fff; color: var(--lla-inkt, #141211); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1; box-shadow: none; cursor: pointer; }
.uwg .uwg__code button[type="submit"]:hover { background: var(--lla-inkt, #141211); color: #fff; }
.uwg .uwg__fout { margin-top: -4px; font-size: 12.5px; color: var(--lla-rood, #b42318); }

.uwg__totaal { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.uwg__totaal > span { padding-top: 6px; font-size: 14px; color: var(--lla-grijs, #6b6459); }
.uwg__totaal > div { text-align: right; }
.uwg .uwg__bedrag { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 8px; }
.uwg__bedrag s { font-size: 15px; color: #8a847a; }
.uwg__bedrag b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--lla-inkt, #141211); font-variant-numeric: tabular-nums; }
.uwg .uwg__totaal-spaar { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: #0f7a4f; }
.uwg .uwg__btw { margin-top: 2px; font-size: 11.5px; color: var(--lla-grijs, #6b6459); }
.uwg a.uwg__kassa { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 10px; background: var(--lla-goud, #c88407); color: #fff !important; font-size: 16px; font-weight: 600; text-decoration: none; transition: background .15s; }
.uwg a.uwg__kassa:hover { background: #a96f05; color: #fff !important; }

.uwg__vertrouwen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; padding: 8px 12px; border-radius: 10px; background: var(--lla-creme, #faf8f5); font-size: 13px; color: var(--lla-inkt, #141211); }
.uwg__score { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.uwg__score b { font-weight: 600; }
.uwg__sterren { display: inline-flex; gap: 1px; color: var(--lla-goud, #c88407); }
.uwg__sterren svg { width: 13px; height: 13px; }
.uwg__streep { color: #d6d0c6; }
.uwg__garantie { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--lla-grijs, #6b6459); }
.uwg__garantie svg { width: 15px; height: 15px; color: var(--lla-goud, #c88407); }
.uwg .uwg__usps { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--lla-grijs, #6b6459); }
.uwg .uwg__usps li { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.uwg__usps svg { width: 13px; height: 13px; color: #0f7a4f; }
.uwg__betaal { display: flex; justify-content: center; }
.uwg .uwg__betaal .payment-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 !important; }
.uwg .uwg__betaal .payment-icon { display: flex !important; align-items: center; height: 26px; padding: 3px 6px !important; margin: 0 !important; border: 1px solid var(--lla-lijn, #ece7df); border-radius: 5px !important; background: #fff !important; opacity: 1 !important; }
.uwg .uwg__betaal .payment-icon svg { height: 16px !important; width: auto !important; }

/* ---------------------------------------------------------------- lege wagen */
.uwg__leeg { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 24px 24px; padding: 28px 22px; border-radius: 16px; background: var(--lla-creme, #faf8f5); text-align: center; }
.uwg__leeg-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 99px; background: #fff; border: 1px solid var(--lla-lijn, #ece7df); color: var(--lla-goud, #c88407); }
.uwg__leeg-ico svg { width: 22px; height: 22px; }
.uwg__leeg > b { font-size: 16px; color: var(--lla-inkt, #141211); }
.uwg__leeg > p { font-size: 13.5px; color: var(--lla-grijs, #6b6459); }
.uwg .uwg__leeg a.uwg__leeg-knop { width: 100%; margin-top: 2px; }
.uwg .uwg__leeg a.uwg__leeg-knop:first-of-type { margin-top: 8px; }
.uwg .uwg__leeg-voordelen { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 4px; font-size: 12px; }
.uwg__leeg-voordelen span { display: inline-flex; align-items: center; gap: 5px; }
.uwg__leeg-voordelen svg { width: 13px; height: 13px; color: var(--lla-goud, #c88407); }

/* ---------------------------------------------------------------- telefoon */
@media (max-width: 767px) {
	/* Zoals Leno: "Veilig betalen" weg, de prijsgarantie op een eigen regel onder de sterren. */
	.uwg .uwg__usps .uwg__usp--breed { display: none; }
	.uwg__streep { display: none; }
	.uwg__garantie { flex-basis: 100%; justify-content: center; }
	.uwg__vertrouwen { font-size: 12px; }
}
@media (max-width: 549px) {
	.uwg__kop { padding: 18px 52px 8px 16px; }
	.uwg ul.uwg__regels { padding: 0 16px 8px !important; }
	.uwg .uwg__regel { grid-template-columns: 72px minmax(0, 1fr); }
	.uwg .uwg__foto, .uwg .uwg__foto img { width: 72px !important; height: 72px !important; }
	.uwg__acties { grid-column: 2; flex-direction: row-reverse; align-items: center; justify-content: space-between; }
	.uwg .uwg__regel a.uwg__weg, .uwg .uwg__aantal button[type="button"] { width: 40px !important; height: 40px !important; }
	.uwg .uwg__aantal input[type="number"] { height: 40px; width: 44px; }
	.uwg__voet { gap: 10px; padding: 12px 16px 16px; }
	.uwg__leeg { margin: 8px 16px 20px; }
	/* Telefoon: de hele lade scrolt (zoals aku), anders blijft naast het totaal en de knop bijna niets over voor de regels. */
	.mfp-content.off-canvas-cart:has(.uwg) > #cart-popup, .off-canvas-cart .cart-popup-inner:has(.uwg) { height: auto; }
	.uwg, .uwg ul.uwg__regels { flex: 0 0 auto; overflow: visible; }
}

/* ---------------------------------------------------------------- Black Friday, donker thema (html.bf26.bf26-donker) */
/* De var(--lla-*)-kleuren zet bf26.css al om; alleen de vaste lichte vlakken hier donker maken. */
html.bf26.bf26-donker .uwg__voet { background: #111113; border-top-color: rgba(255, 255, 255, .1); }
html.bf26.bf26-donker .uwg :is(.uwg__vertrouwen, .uwg__leeg, .uwg__leeg-ico, .uwg__foto) { background: var(--bfd-kaart, #16161a) !important; border-color: rgba(255, 255, 255, .12) !important; }
html.bf26.bf26-donker .uwg :is(.uwg__aantal button[type="button"], .uwg__code input[type="text"], .uwg__code button[type="submit"]) { background: var(--bfd-kaart, #16161a) !important; color: #fff !important; border-color: rgba(255, 255, 255, .16) !important; }
html.bf26.bf26-donker .uwg .uwg__code button[type="submit"]:hover { background: #fff !important; color: #0a0a0b !important; }
html.bf26.bf26-donker .uwg :is(.uwg__prijs s, .uwg__bedrag s) { color: #8b8b93 !important; }
html.bf26.bf26-donker .uwg :is(.uwg__totaal-spaar, .uwg__usps svg) { color: #7ddc94 !important; }
html.bf26.bf26-donker .uwg .uwg__spaar span { background: rgba(34, 197, 94, .14); color: #7ddc94 !important; }
html.bf26.bf26-donker .uwg .uwg__regel a.uwg__weg:hover { background: rgba(255, 255, 255, .08); }
html.bf26.bf26-donker .uwg a.uwg__kassa { background: var(--bf-accent-2, #f2a81d); color: #0a0a0b !important; }
html.bf26.bf26-donker .uwg a.uwg__kassa:hover { background: var(--bf-accent-3, #ffcf6b); color: #0a0a0b !important; }