/* WooCommerce lataa lohkoteemoille oman woocommerce-blocktheme.css:n, joka
   asettaa palkille position:fixed; bottom:0; top:auto !important — kiinnittää
   sen näytön alareunaan leijuvaksi palkiksi. !important jokaisessa
   kilpailevassa ominaisuudessa varmistaa, että oma asemointimme (tavallinen,
   sivun normaalissa virtauksessa ylälaidassa) voittaa riippumatta CSS:n
   latausjärjestyksestä. (top voittaa aina bottomin ja left aina rightin kun
   molemmat on asetettu, joten niitä ei tarvitse erikseen ylikirjoittaa.) */
.woocommerce-store-notice,
p.demo_store,
.admin-bar .woocommerce-store-notice,
.admin-bar p.demo_store {
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	z-index: 20 !important;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.9rem;
	padding: 0.75em 2.75em 0.75em 1em;
}

/* Tekstin sijaan pyöreä ×-painike oikeaan reunaan. Alkuperäinen teksti
   ("Piilota tämä ilmoitus") jää näkymättömiin ruudunlukijoille asti,
   font-size:0 ei poista sitä saavutettavuuspuusta. HUOM: koko ja sijainti on
   rem, ei em — em laskettaisiin tämän elementin OMASTA fonttikoosta (0), jolloin
   1.75em/0.75em olisivat todellisuudessa 0px ja painike romahtaisi näkymättömiin. */
.woocommerce-store-notice__dismiss-link {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	font-size: 0;
	line-height: 0;
	color: inherit;
	/* woocommerce.css:n ".woocommerce-store-notice a" on spesifisyydeltään
	   (luokka+elementti) meitä (pelkkä luokka) korkeampi, joten pelkkä
	   text-decoration:none ei riitä voittamaan sen alleviivausta. */
	text-decoration: none !important;
	margin-left: 0;
}

.woocommerce-store-notice__dismiss-link::before {
	content: "\2715";
	font-size: 1rem;
	line-height: 1;
}

.woocommerce-store-notice__dismiss-link:hover,
.woocommerce-store-notice__dismiss-link:focus-visible {
	background-color: rgba(255, 255, 255, 0.15);
}