/* Vislokaal 2026: snel toevoegen vanaf productkaarten (Claude, 17 oktober 2026). Gedrag: assets/js/atc.js.
 * Plusknop uit Figma (Card/Product, Add to cart): wit, rand #2D2D2D van 1,5px, hoek 8, harde gouden schaduw, 44 bij 44
 * (design system: klikbaar minimaal 44px). In het mandje: blauwe knop (#3A5896) met het aantal, die openklapt tot min, aantal, plus.
 * Focus zoals overal: oranje ring #F8B840. */

.vl26-atc { --atc-navy: #3a5896; --atc-navy-2: #344f8d; --atc-ink: #2d2d2d; --atc-gold: rgba(197, 170, 115, .7); --atc-s: 44px; position: relative; display: inline-block; flex: none; width: var(--atc-s); height: var(--atc-s); margin: 0; padding: 0; vertical-align: middle; line-height: 0; }

/* ---------- Plusknop (de WooCommerce-link zelf) ---------- */
.vl26-atc .vl26-atc__add,
#main-content .vl26-atc .vl26-atc__add,
#main-content.vl26-hm .vl26-atc .vl26-atc__add,
#main-content.vl26-pdp-main .vl26-atc .vl26-atc__add,
body.vl26-cat #all-products .vl26-atc .vl26-atc__add,
body.vl-filters .allproducts .product .vl26-atc .vl26-atc__add,
.allproducts .product .wrap-inner .vl26-atc .vl26-atc__add {
	position: absolute !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: var(--atc-s) !important; height: var(--atc-s) !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important; border: 1.5px solid var(--atc-ink) !important; border-radius: 8px !important;
	background: #fff !important; color: var(--atc-ink) !important; box-shadow: 4px 4px 0 var(--atc-gold) !important;
	font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important; text-indent: 0 !important; text-decoration: none !important; text-transform: none !important;
	opacity: 1 !important; transform: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.vl26-atc .vl26-atc__add::before, .vl26-atc .vl26-atc__add::after { display: none !important; content: none !important; }
.vl26-atc .vl26-atc__add > *:not(.vl26-atc__ic) { display: none !important; }
.vl26-atc .vl26-atc__ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--atc-ink); pointer-events: none; }
.vl26-atc .vl26-atc__ic svg { display: block; width: 28px; height: 28px; }
@media (hover: hover) and (pointer: fine) {
	.vl26-atc .vl26-atc__add:hover,
	#main-content .vl26-atc .vl26-atc__add:hover,
	.allproducts .product .wrap-inner .vl26-atc .vl26-atc__add:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--atc-gold) !important; }
}
.vl26-atc .vl26-atc__add:active,
#main-content .vl26-atc .vl26-atc__add:active,
.allproducts .product .wrap-inner .vl26-atc .vl26-atc__add:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--atc-gold) !important; }
.vl26-atc .vl26-atc__add:focus-visible,
#main-content .vl26-atc .vl26-atc__add:focus-visible { outline: 3px solid #f8b840 !important; outline-offset: 2px !important; }
.vl26-atc.is-busy .vl26-atc__add { opacity: .55 !important; pointer-events: none; cursor: progress; }
.vl26-atc .added_to_cart { display: none !important; }

/* ---------- In het mandje: blauwe knop met het aantal, klapt open naar links tot min, aantal, plus ---------- */
.vl26-atc.is-in .vl26-atc__add { visibility: hidden; }
.vl26-atc__pill { position: absolute; top: 0; right: 0; z-index: 4; display: none; align-items: stretch; height: var(--atc-s); border-radius: 8px; background: var(--atc-navy); color: #fff; box-shadow: 4px 4px 0 var(--atc-gold); overflow: hidden; }
.vl26-atc.is-in .vl26-atc__pill { display: flex; }
.vl26-atc__pill button,
#main-content .vl26-atc__pill button,
.allproducts .product .vl26-atc__pill button {
	display: inline-flex; flex: none; align-items: center; justify-content: center; height: var(--atc-s); min-height: 0; margin: 0; padding: 0;
	border: 0; border-radius: 0; background: transparent; color: #fff; box-shadow: none; font: 600 17px/1 Roboto, Arial, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer;
}
.vl26-atc__pill .vl26-atc__qty { width: var(--atc-s); }
.vl26-atc__pill .vl26-atc__min, .vl26-atc__pill .vl26-atc__plus { width: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: width .18s ease, opacity .12s ease, visibility 0s linear .18s; }
.vl26-atc.is-open .vl26-atc__min, .vl26-atc.is-open .vl26-atc__plus { width: var(--atc-s); opacity: 1; visibility: visible; transition: width .18s ease, opacity .12s ease .05s, visibility 0s; }
@media (hover: hover) and (pointer: fine) {
	.vl26-atc.is-in:hover .vl26-atc__min, .vl26-atc.is-in:hover .vl26-atc__plus { width: var(--atc-s); opacity: 1; visibility: visible; transition: width .18s ease, opacity .12s ease .05s, visibility 0s; }
	.vl26-atc__pill button:hover { background: var(--atc-navy-2); }
}
.vl26-atc__pill svg { display: block; width: 20px; height: 20px; pointer-events: none; }
.vl26-atc__pill button:focus-visible { outline: 3px solid #f8b840; outline-offset: -3px; }

/* ---------- Plek in de kaart ---------- */
/* Categorie, zoeken en Hoe doe ik dat (kaart uit het thema): rechtsonder, zelfde plek als de oude knop */
.allproducts .product .wrap-inner > .vl26-atc { position: absolute; right: 23px; bottom: 23px; z-index: 3; }
/* Homepage, bestsellers: rechts naast de prijs, de prijs blijft in het midden */
#main-content.vl26-hm .vl26-hm-card__foot { grid-template-columns: 44px minmax(0, 1fr) 44px; }
#main-content.vl26-hm .vl26-hm-card__foot > .vl26-atc { grid-column: 3; justify-self: end; }
/* Homepage, vangst van de maand en de kerstlijst */
#main-content.vl26-hm .vl26-hm-row { grid-template-columns: 56px minmax(0, 1fr) auto 44px; }
/* Productpagina, Ook leuk: de lege ruimte links even breed als de knop, zodat de prijs in het midden blijft */
#main-content.vl26-pdp-main .vl26-pdp-card__spacer { width: 44px; height: 44px; }

@media (max-width: 980px) {
	#main-content.vl26-hm .vl26-hv__tile > .vl26-hv__buy > .vl26-atc,
	#main-content.vl26-hm .vl26-hv__tile .vl26-atc { grid-area: cart; }
}
@media (max-width: 767px) {
	.allproducts .product .wrap-inner > .vl26-atc { right: 8px; bottom: 8px; }
	#main-content.vl26-hm .vl26-hm-card__foot { grid-template-columns: minmax(0, 1fr) 44px; }
	#main-content.vl26-hm .vl26-hm-card__foot > .vl26-atc { grid-column: 2; }
	#main-content.vl26-hm .vl26-hm-row { grid-template-columns: 48px minmax(0, 1fr) auto 44px; }
	.vl26-atc .vl26-atc__add,
	#main-content .vl26-atc .vl26-atc__add,
	.allproducts .product .wrap-inner .vl26-atc .vl26-atc__add,
	body.vl-filters .allproducts .product .vl26-atc .vl26-atc__add { box-shadow: 3px 3px 0 var(--atc-gold) !important; }
	.vl26-atc__pill { box-shadow: 3px 3px 0 var(--atc-gold); }
}

/* ---------- Melding onderin ---------- */
.vl26-toast { position: fixed; left: 50%; bottom: 20px; z-index: 100001; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 14px; border-radius: 12px; background: #2e4881; color: #fff; box-shadow: 0 10px 28px rgba(46, 72, 129, .28); font: 400 15px/1.35 Roboto, Arial, sans-serif; opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s, visibility .2s; }
.vl26-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.vl26-toast__ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #3cb371; color: #fff; }
.vl26-toast.is-error .vl26-toast__ic { background: #e74c3c; }
.vl26-toast.is-error { padding-right: 16px; }
.vl26-toast__txt { min-width: 0; }
.vl26-toast__txt strong { font-weight: 600; }
.vl26-toast__go, .vl26-toast a.vl26-toast__go { flex: none; margin-left: 4px; padding: 9px 14px; border-radius: 8px; background: #fff; color: #2e4881 !important; font-weight: 600; text-decoration: none !important; }
.vl26-toast__go:hover { background: #faf0d7; }
.vl26-toast__go:focus-visible { outline: 3px solid #f8b840; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.vl26-atc *, .vl26-toast { transition: none !important; }
}