/**
 * Mobile header — right-side icon row, wishlist "(N)" and cart "(N)" counts.
 *
 * Every rule is scoped under `.header-mobile`, which Konte renders only in the
 * mobile context (parent inc/frontend/mobile.php). The desktop header
 * (`.header-main` / `.header-right-items`) is therefore untouched.
 *
 * Konte lays the row out already: `.mobile-header-icons` is a flex row aligned
 * to the right with 15px gaps, and its icons are 24px `.svg-icon` SVGs coloured
 * via `currentColor`. We only set the palette, size, and the two count states.
 *
 * @package Konte Child
 */

/* Icon row: brand-dark icons, comfortable size, vertically centred. */
.header-mobile .mobile-header-icons {
	color: var(--ink_text);
}

.header-mobile .mobile-header-icons > * {
	display: inline-flex;
	align-items: center;
}

.header-mobile .mobile-header-icons a,
.header-mobile .mobile-header-icons .search-icon {
	color: inherit;
	display: inline-flex;
	align-items: center;
}

.header-mobile .mobile-header-icons .svg-icon {
	font-size: 15px; /* 22px SVGs read a touch tighter than the 24px default. */
}

/* -------------------------------------------------------------------------
   Wishlist and Cart counts — icon followed by "(N)" text, hidden when empty.

   Both counts share one treatment so they cannot drift apart. The number sits
   in `.wishlist-count-text` / `.cart-count-text`; the parentheses are static
   text and the `.counter` inside carries only the number, which is what Konte's
   AJAX fragments (`span.counter.wishlist-counter`, `span.cart-counter`) swap.
   Konte's base `.counter` is a dark circular pill, so it is stripped back to
   plain inline text here.
   ------------------------------------------------------------------------- */
.header-mobile .header-mobile-wishlist .wishlist-contents,
.header-mobile .header-mobile-cart > a {
	display: inline-flex;
	align-items: center;
}

.header-mobile .header-mobile-wishlist .wishlist-count-text,
.header-mobile .header-mobile-cart .cart-count-text {
	margin-left: 3px;
	font-size: 13px;
	line-height: 1;
	font-weight: 500;
	color: var(--ink_text);
}

.header-mobile .header-mobile-wishlist .wishlist-count-text .counter,
.header-mobile .header-mobile-cart .cart-count-text .counter {
	position: static;
	display: inline;
	min-width: 0;
	height: auto;
	border-radius: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	vertical-align: baseline;
	/* `!important` overrides two unscoped `!important` rules in style.css that
	   reach these counters: `.counter { padding:3px !important }` (mini-cart
	   block, line 5440 — would render "( 2 )") and `.archive .counter {
	   color:black !important; background:white !important }` (line 4963 —
	   would paint a white chip behind the number on archive pages). */
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	background-color: transparent !important;
	color: inherit !important;
}

/* Hide the whole wrapper, not just the counter — otherwise the parentheses
   would be left behind as a stray "()". */
.header-mobile .header-mobile-wishlist.is-empty .wishlist-count-text,
.header-mobile .header-mobile-cart.is-empty .cart-count-text {
	display: none;
}