/*
 * The header's icons: one set and one weight (Kirill, 2026-10-23: the search, the account and the menu came from three
 * sets, the search a filled 20px drawing stretched to 32px, about 3px thick; the menu two 2px bars). The account is
 * lucide's user-round: its plain user looked small beside the rest (Kirill, same day). Lucide's (global.css),
 * 24px with a 2px line, as the wishlist's heart beside them (wishlist.css) and the cart's outline; the theme's pictures
 * stay in the markup, hidden. On a phone the icons a little closer: 4px between their 40px boxes rather than 8px.
 */

header :is(.searchbutton .searchicon, .btn-burger img.burger-line, .header-accounticon .btn-account svg) {
	display: none;
}

/* Not the menu's display: the theme shows it up to 991px only (display: none wider, flex below); a display here kept
   it on a desktop (2026-10-23, #113) */
header :is(.searchbutton.btn-search, .header-accounticon .btn-account) {
	display: flex;
}

header :is(.searchbutton.btn-search, .btn-burger, .header-accounticon .btn-account) {
	align-items: center;
	justify-content: center;
	color: #E7E7E7;
	transition: color var(--gp-hover-out) ease;
}

header :is(.searchbutton.btn-search, .btn-burger, .header-accounticon .btn-account)::before {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--gp-icon) center / contain no-repeat;
	mask: var(--gp-icon) center / contain no-repeat;
}

header .searchbutton.btn-search {
	--gp-icon: var(--gp-icon-search);
}

header .btn-burger {
	--gp-icon: var(--gp-icon-menu);
}

header .header-accounticon .btn-account {
	--gp-icon: var(--gp-icon-user);
}

@media (hover: hover) {
	header :is(.searchbutton.btn-search, .btn-burger, .header-accounticon .btn-account):hover {
		color: var(--wp--preset--color--accent);
	}
}

@media (max-width: 781px) {
	header .header-buttons {
		gap: 4px;
	}
}

/* The counts on the cart and the heart: smaller and lighter (Kirill, 2026-10-23, the second of five drawn on the
   header: a 16px circle, an 11px number, and a 2px ring of the header's colour around it, in cart-common.css and
   wishlist.css with the hover's fill). Both in the same place of the 40px square their icon stands in, 2px from its
   top and 22px from its left (Kirill, 2026-10-23: placed by the drawings, the heart's and the cart's sat at different
   heights; a 1px nudge for a lone "1" made it worse and went). The cart's count is placed in WooCommerce's 32px box,
   4px into that square, the heart's in our 40px link: one place, two offsets. */
header :is(.wc-block-mini-cart__badge, .gp-wishlist-count) {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 16px;
	width: auto;
	height: 16px;
	margin: 0;
	padding: 0 4px;
	border-radius: 8px;
	transform: none;
	font-family: Onest, sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 16px;
}

/* The number centred by its digits' height rather than the font's line: Safari reads Onest's line taller above, and on an
   iPhone the number sat a pixel or two high (Kirill, 2026-10-23); where text-box is unknown, the line as before */
@supports (text-box: trim-both cap alphabetic) {
	header :is(.wc-block-mini-cart__badge, .gp-wishlist-count) {
		display: block; /* text-box trims a block's lines, not a flex container's */
		padding: 3.5px 4px 0; /* (16 - the digits' 7.8px) / 2, less the trim's half pixel */
		line-height: 1;
		text-align: center;
		text-box: trim-both cap alphabetic;
	}
}

header .wc-block-mini-cart__badge {
	top: -2px;
	left: 18px;
}

header .gp-wishlist-count {
	top: 2px;
	left: 22px;
}

/* The "Подписки" menu before the search, so the icons stand together (Kirill, 2026-10-23); 16px from them, twice the
   icons' own gap, as the start of a group */
header .header-buttons .btn-subscriptions-wrapper {
	order: -1;
	margin-right: 8px;
}