/* Sticky pitää olla ULOMMASSA <header class="wp-block-template-part">
   -elementissä (jonka WP generoi automaattisesti template-osan ympärille),
   ei sisemmässä .cosmetsky-headerissa. Sticky-elementin "containing block"
   on sen SUORA vanhempi, ja koska se vanhempi olisi muuten täsmälleen yhtä
   korkea kuin header itse (ei muuta sisältöä), sticky-alue olisi 0px eikä
   header pysyisi paikallaan lainkaan - se irtoaisi heti ensimmäisestä
   scroll-pikselistä. Ulompi wp-block-template-part sen sijaan on
   .wp-site-blocksin (koko sivun) lapsi, joten sillä on koko sivun verran
   tilaa pysyä kiinni yläreunassa. */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 9999;
}

.cosmetsky-header {
	align-items: center;
	max-width: 1400px;
	margin-inline: auto;
	padding: 0.85rem 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

.cosmetsky-header-start,
.cosmetsky-header-actions {
	align-items: center;
	gap: 0.35rem;
}

.cosmetsky-header-logo {
	margin: 0;
}

.cosmetsky-header-logo img {
	display: block;
}

/* Yhteinen ulkoasu kaikille header-ikoneille: hampurilaisvalikko, haku, tili */
.cosmetsky-header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	text-decoration: none;
}

/* Hakupainikkeen oma teksti piilotetaan visuaalisesti, ikoni riittää headerissa */
.cosmetsky-header-icon.cs-search-open span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* WooCommercen natiivi minikori-painike samaan visuaaliseen sarjaan muiden ikonien kanssa.
   Ikonin ja badgen värit on annettu suoraan lohkon omilla attribuuteilla
   (parts/header.html), joten tässä tarvitsee muotoilla vain koko/muoto. */
.wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
}

.wc-block-mini-cart__button:hover {
	background-color: var(--wp--preset--color--background);
}

.wc-block-mini-cart__badge {
	font-size: 0.7em;
	height: 1.2em;
	min-width: 1.2em;
}

@media (max-width: 689px) {
	.cosmetsky-header {
		padding: 0.6rem 1rem;
	}

	.cosmetsky-header-icon,
	.wc-block-mini-cart__button {
		width: 36px;
		height: 36px;
	}
}