/*
 * 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 logo gives way when the icons do not fit beside it; the icons never do */
	header .header-logo {
		flex: 0 1 auto;
		min-width: 0;
	}

	header .header-logo a {
		display: block;
	}

	header .header-logo img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	header .header-buttons {
		flex: none;
	}
}

/* Five icons and the 149px logo filled 393px with 16px to spare; at 360px the menu stood 15px past the screen's edge
   (2026-10-23, after the heart joined them). Below 393px the gaps close, 4px to none at 360px, the boxes stay 40px;
   narrower still, the logo shrinks (Kirill's pick of three, 2026-10-23: 108px at 320px). */
@media (max-width: 392px) {
	header .header-buttons {
		gap: clamp(0px, (100vw - 360px) * 4 / 33, 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. */
:is(header .wc-block-mini-cart__badge, header .gp-wishlist-count, .gp-tab__count) { /* and the tab bar's: tabbar.css */
	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) {
	:is(header .wc-block-mini-cart__badge, header .gp-wishlist-count, .gp-tab__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;
}

/* The cart's number visible from the first paint: WooCommerce's CSS keeps it transparent until its script picks the
   colour from the circle's background, so as the page loaded the circle stood empty and the number blinked in
   (Kirill's iPhone, 2026-10-23); its script then sets the same dark colour */
header .wc-block-mini-cart__button .wc-block-mini-cart__badge {
	color: #121212;
}

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

/* The search field the magnifier opens where SearchBooster is off (Xbox Turkey, PS India, /digital/: Fluent snippets
   163/164 leave those out, so the button opens the header template's AWS field, #head, toggled by snippet 135). It
   ran edge to edge over the page title, on a desktop over the row of section links, and next to nothing told that
   it had opened (Kirill, 2026-10-23). Still over the page, not pushing it down (his choice): a panel of the header's
   colour under the header (53px, as the template's spacer), the field 10px from the screen edges and no wider than
   the catalog's content, a lighter fill, the page under it dimmed and the magnifier in the accent while it is open. */
header > #head.searchblock {
	top: 53px;
	margin: 0 !important; /* the block's own inline margins */
	padding: 10px var(--gp-phone-gutter) !important;
	background: #121212;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
}

/* A click here closes the field, as Escape does (js/overlays.js), rather than reaching the page under it */
header > #head.searchblock::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);
}

header > #head.searchblock .aws-container {
	max-width: 1252px;
	margin: 0 auto;
}

header > #head.searchblock .aws-container .aws-search-field {
	background-color: #2B2B2B;
}

header .searchbutton.btn-search:has(.searchinhead-active) {
	color: var(--wp--preset--color--accent);
}

/* AWS's live results under the field, dark like the rest (Kirill, 2026-10-23: without them nothing told whether a search
   would find anything before sending it). Wherever AWS answers on its own: the three sites above and the search results
   page; where SearchBooster runs it takes over AWS's field and Fluent snippet 166 keeps these hidden. AWS places the
   list under its field itself (top, left, width inline). The picture, the title and the price; no excerpt. */
.aws-search-result {
	margin-top: 8px;
	overflow: hidden;
	border: 0;
	background: #232323;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	font-family: Onest, sans-serif;
}

.aws-search-result ul {
	margin: 0;
	padding: 6px 0;
}

.aws-search-result .aws_results .aws_result_item {
	padding: 8px 12px;
	border-bottom: 0;
	background: transparent;
	transition: background-color var(--gp-hover-out) ease;
}

/* .hovered: AWS's own mark for the item picked with the arrow keys */
.aws-search-result .aws_results .aws_result_item.hovered {
	background: #2B2B2B;
}

@media (hover: hover) {
	.aws-search-result .aws_results .aws_result_item:hover {
		background: #2B2B2B;
		transition-duration: var(--gp-hover-in);
	}
}

.aws-search-result .aws_result_image {
	padding: 0 12px 0 0;
}

.aws-search-result .aws_result_image img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px !important; /* over Fluent snippet 34's 10px !important on everything in the list */
}

.aws-search-result .aws_result_title {
	padding: 0;
	color: #E7E7E7;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
}

.aws-search-result .aws_result_title :is(strong, b) {
	color: #E7E7E7;
	font-weight: 600;
}

.aws-search-result .aws_result_price {
	margin-top: 4px;
	text-align: left;
	color: #E7E7E7;
	font-size: 16px;
	font-weight: 600;
}

.aws-search-result .aws_result_excerpt {
	display: none;
}

.aws-search-result .aws_search_more {
	padding: 12px;
	color: var(--wp--preset--color--accent);
	font-size: 15px;
}

.aws-search-result .aws_search_more a {
	color: inherit;
}