/* "Osta"-painikkeen check-ikonin väläytys (ks. assets/js/add-to-cart-flash.js).
   Kaksi eri painiketyyppiä käyttävät tätä: tuotekortin/karusellin natiivi
   product-button (tekstin ympärillä oma <span>) ja yksittäisen tuotesivun
   klassinen <button>Osta</button> (pelkkä tekstisolmu, ei span-kääretä).
   Siksi teksti piilotetaan painikkeen omalla color:transparent-arvolla eikä
   span-kohtaisella opacityllä — toimii molemmissa rakenteissa samalla
   säännöllä, eikä color-ominaisuuteen puutu mikään WooCommercen animaatio
   (vain opacity/transform animoituu), joten tätä ei tarvitse edes voittaa
   !important-säännöllä käynnissä olevaa animaatiota vastaan. Checkmarkin
   reunaväri on kirjoitettu suoraan (ei currentColor), koska currentColor
   olisi nyt sama transparent-arvo. */
.wc-block-components-product-button__button,
.single_add_to_cart_button {
	position: relative;
}

/* Klassiset (ei-lohkopohjaiset) "Osta"-napit, esim. tuotetyypit joita
   woocommerce/add-to-cart-with-options-lohko ei tue natiivisti (kuten YITH:n
   gift-card-tuotteet). Näille napeille ei koskaan lisätä .wp-element-button
   -luokkaa, joten ne eivät peri theme.json:n styles.elements.button-tyyliä
   automaattisesti — toistetaan sama tyyli tässä käsin.
   font-size: inherit on pakollinen, ei vain kosmeettinen: ilman
   .wp-block-button__link-luokkaa (jolla WP-ydin asettaa tämän) <button>
   käyttää selaimen omaa, teeman fonttikokoa pienempää oletusarvoa, jolloin
   em-yksikköinen padding laskeutuu pienemmäksi kuin oikealla lohkonapilla. */
.single_add_to_cart_button.button {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 5px;
	padding: 0.5em 1em;
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
}

.single_add_to_cart_button.button:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.cosmetsky-added-flash {
	color: transparent !important;
}

.cosmetsky-added-flash::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 6px;
	border-left: 2px solid var(--wp--preset--color--base);
	border-bottom: 2px solid var(--wp--preset--color--base);
	transform: translate(-50%, -65%) rotate(-45deg);
}