/**
 * Geanimeerde "toevoegen aan winkelwagen"-knop.
 *
 * Omgezet van SCSS naar platte CSS en gescoped op .add-to-cart. De compound
 * selector .single_add_to_cart_button.add-to-cart overschrijft theme-styling
 * (breedte, padding, achtergrond) zonder !important.
 */

.add-to-cart {
	--background-default: #ffd426;
	--background-hover: #e6bf1f;
	--background-scale: 1;
	--text-color: #000;
	--text-o: 1;
	--text-x: 0px;
	--cart: #000;
	--cart-x: 0px;
	--cart-y: 0px;
	--cart-rotate: 0deg;
	--cart-scale: .75;
	--cart-clip: 0px;
	--cart-clip-x: 0px;
	--cart-tick-offset: 10px;
	--cart-tick-color: #3ca196;
	--bottle-y: -16px;
	--bottle-scale: 0;
	--bottle-color: #000;
	--bottle-logo: #ffd426;
	--bottle-second-y: 24px;
	--bottle-second-color: #000;
	--bottle-second-logo: #ffd426;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	background: none;
	border: none;
	padding: 12px 28px 12px 60px;
	width: auto;
	min-width: 164px;
	max-width: 100%;
	margin: 0;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	font-family: inherit;
}

/* Theme-overrides: het Ecomfast-thema stuurt met een hogere specificiteit
 * (button.single_add_to_cart_button.button). Daarom neutraliseren we die
 * styling met een nog hogere, gelijkwaardige selector i.p.v. !important. */
button.single_add_to_cart_button.button.add-to-cart {
	width: auto;
	min-width: 164px;
	max-width: 100%;
	/* !important omdat andere WooCommerce/thema-regels de padding en positie
	 * met gelijke of hogere specificiteit zetten; deze layout is essentieel
	 * voor de animatie (ruimte links voor het karretje). */
	padding: 12px 28px 12px 60px !important;
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 5px !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	color: var(--text-color);
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	height: auto !important;
	display: inline-block !important;
	position: relative !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	top: auto !important;
	z-index: auto !important;
	overflow: hidden;
}

button.single_add_to_cart_button.button.add-to-cart:hover,
button.single_add_to_cart_button.button.add-to-cart:active {
	background: none;
	background-color: transparent;
	color: var(--text-color);
	box-shadow: none;
}

.add-to-cart::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 5px;
	transition: background .25s;
	background: var(--background, var(--background-default));
	transform: scaleX(var(--background-scale)) translateZ(0);
}

.add-to-cart:not(.active):hover {
	--background: var(--background-hover);
}

.add-to-cart span {
	display: block;
	text-align: center;
	position: relative;
	z-index: 1;
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	white-space: nowrap;
	color: var(--text-color);
	opacity: var(--text-o);
	transform: translateX(var(--text-x)) translateZ(0);
}

.add-to-cart svg {
	display: block;
	width: var(--svg-width, 24px);
	height: var(--svg-height, 24px);
	position: var(--svg-position, relative);
	left: var(--svg-left, 0);
	top: var(--svg-top, 0);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.add-to-cart svg path {
	fill: var(--svg-fill, none);
	stroke: var(--svg-stroke, none);
	stroke-width: var(--svg-stroke-width, 2);
}

.add-to-cart .morph {
	--svg-width: 40px;
	--svg-height: 13px;
	--svg-left: 30px;
	--svg-top: -12px;
	--svg-position: absolute;
	--svg-fill: var(--background, var(--background-default));
	transition: fill .25s;
	pointer-events: none;
	margin-left: -20px;
}

.add-to-cart .bottle,
.add-to-cart .cart {
	pointer-events: none;
	position: absolute;
	left: 30px;
}

.add-to-cart .bottle {
	margin: -12px 0 0 -12px;
	top: 0;
	transform-origin: 50% 100%;
	transform: translateY(var(--bottle-y)) scale(var(--bottle-scale));
}

.add-to-cart .bottle svg {
	--svg-fill: var(--bottle-color);
}

.add-to-cart .bottle svg g {
	--svg-fill: var(--svg-g-fill, var(--bottle-logo));
}

.add-to-cart .bottle svg.second {
	--svg-fill: var(--bottle-second-color);
	--svg-g-fill: var(--bottle-second-logo);
	--svg-position: absolute;
	clip-path: polygon(0 var(--bottle-second-y), 24px var(--bottle-second-y), 24px 24px, 0 24px);
}

.add-to-cart .cart {
	--svg-width: 36px;
	--svg-height: 26px;
	--svg-stroke: var(--cart);
	top: 10px;
	margin-left: -18px;
	transform: translate(var(--cart-x), var(--cart-y)) rotate(var(--cart-rotate)) scale(var(--cart-scale)) translateZ(0);
}

.add-to-cart .cart::before {
	content: '';
	display: block;
	width: 22px;
	height: 12px;
	position: absolute;
	left: 7px;
	top: 7px;
	background: var(--background-default);
	clip-path: polygon(0 0, 22px 0, calc(22px - var(--cart-clip-x)) var(--cart-clip), var(--cart-clip-x) var(--cart-clip));
}

.add-to-cart .cart path.wheel {
	--svg-stroke-width: 1.5;
}

.add-to-cart .cart path.tick {
	--svg-stroke: var(--cart-tick-color);
	stroke-dasharray: 10px;
	stroke-dashoffset: var(--cart-tick-offset);
}