/*
 * 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). Each at the top-right corner of its icon's drawing,
   placed by the drawing's shape rather than its box (Kirill, 2026-10-23: placed by the boxes, the heart's sat low on its right
   lobe and the cart's above its basket's corner): just above and right of the cart's basket corner and of the heart's
   right lobe. The cart's count is placed in WooCommerce's 32px box, the heart's in our 40px link. A lone "1" moves 1px
   right: its flag weighs it left, and its drawing sits 0.45px left in its width (js: header-link.js marks it). */
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;
}

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

header .gp-wishlist-count {
	top: -1px;
	left: 26px;
}

header :is(.wc-block-mini-cart__badge, .gp-wishlist-count)[data-gp-one] {
	padding-left: 5px;
	padding-right: 3px;
}

/* 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;
}