/**
 * Модуль «Іконки шапки» — вигляд наших іконок і лічильників у шапці.
 *
 * Правила навмисно короткі: колір, розмір і наведення іконок ДАЄ ТЕМА своїм правилом
 * `.ct-icon, .ct-icon-container svg { width/height: var(--theme-icon-size); fill: var(--theme-icon-color, …) }`.
 * Ми лише
 *   • підхоплюємо ту саму змінну для КОНТУРНИХ іконок (їх малює `stroke`, а не `fill`),
 *   • переносимо лічильник за контур іконки,
 *   • даємо іконкам трохи повітря, щоб лічильник не торкався сусідньої.
 *
 * Гард — клас на `<body>`: він дозволяє перебити правила теми специфічністю,
 * не вдаючись до `!important`, і вимкнути «єдиний лічильник» для кошика окремо.
 */

/* ------------------------------------------------------ векторний логотип */

/* Висоту тема вже дає (`.site-logo-container svg { height: inherit }`, а сама
   висота — з Кастомайзера, окремо для ПК і смартфона). Ширину `auto` вона задає
   лише для <img>, тож для вектора її рахує пропорція з viewBox (інлайн aspect-ratio). */
.site-logo-container svg.cfsux-logo {
	width: auto;
	max-width: none;
	height: inherit;
}

/* --------------------------------------------------------------- іконки */

/* Наші іконки беруть КОЛІР ІКОНОК ТЕМИ (та сама змінна, що й `fill` у теми),
   тому наведення, прозорий хедер і зміна палітри працюють самі собою.
   `color` потрібен і завантаженим іконкам: у них обведення переводиться
   на `currentColor`, щоб чужий файл не лишався чорним поруч із рештою. */
.cfsux-hicon {
	color: var( --theme-icon-color, var( --theme-text-color, currentColor ) );
}

.cfsux-hicon--stroke {
	stroke-width: var( --cfhi-stroke, 1.7 );
}

/* Наведення: тема вже тримає свій колір у змінній — просто беремо його. */
a:hover .cfsux-hicon,
a:focus-visible .cfsux-hicon {
	color: var( --theme-icon-hover-color, var( --theme-icon-color, currentColor ) );
}

/* Заливкові іконки нічого не потребують: `fill` їм дає правило теми. */

/* Повітря між іконками — щоб винесений лічильник не торкався СУСІДНЬОЇ іконки
   (заміряно: при двозначному числі кружок обраного впирався в іконку кошика — 0px).

   Навмисно `padding`, а не `margin`: у Додатковому CSS сайту крок між акаунтом,
   обраним і кошиком заданий через `gap` контейнера, а власні поля елементів
   обнулені з `!important` — наш `margin` там просто не мав би сили. `padding`
   того правила не стосується, тож ми додаємо місце, нічого не перебиваючи,
   і крок лишається рівним, як задумано.

   Крайньому елементу ряду поле не потрібне: праворуч від нього сусідів немає,
   а його власний кружок вільно вміщується в контейнер (заміряно). */
body.cfsux-hicons #header [data-items] > [data-id="account"],
body.cfsux-hicons #header [data-items] > .cfsux-wish-header,
body.cfsux-hicons #header [data-items] > [data-id="cart"] {
	padding-inline-end: var( --cfhi-gap, 8px );
}

body.cfsux-hicons #header [data-items] > :last-child {
	padding-inline-end: 0;
}

/* --------------------------------------------------------- лічильники */

/* Спільна геометрія: кружок стоїть ПОВНІСТЮ за правим краєм іконки.
   Ключове — фіксуємо ЛІВИЙ край (`inset-inline-start: 100%`), а не правий:
   тоді двозначне число росте ВПРАВО, від іконки, а не насуває на неї.
   Кільце малюємо `box-shadow`, а не `border`: бордер збільшив би сам кружок
   і зіпсував би вирівнювання цифри всередині. */
body.cfsux-hicons #header .cfsux-wish-header__count,
body.cfsux-hicons-unify #header [data-id="cart"] [class*="ct-dynamic-count"] {
	position: absolute;
	inset-inline-start: calc( 100% + 2px );
	inset-inline-end: auto;
	inset-block-start: calc( -0.5 * var( --cfhi-badge-size, 16px ) + 2px );
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-inline-size: var( --cfhi-badge-size, 16px );
	block-size: var( --cfhi-badge-size, 16px );
	padding: 0 4px;
	border: 0;
	border-radius: 999px;
	background: var( --cfhi-badge-bg, var( --theme-palette-color-2, #f96900 ) );
	box-shadow: 0 0 0 2px var( --cfhi-badge-ring, #ffffff );
	color: var( --cfhi-badge-fg, #ffffff );
	font-size: var( --cfhi-badge-font, 10px );
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
}

/* Лічильник СЕРДЕЧКА може мати власні кольори (Модулі → Кольори сердечка).
   Окреме правило ПІСЛЯ спільного: та сама специфічність, тож перемагає воно, а
   кошик лишається на кольорах цього модуля. Не задано — фолбек на них же. */
body.cfsux-hicons #header .cfsux-wish-header__count {
	background: var( --cfsux-wish-count-bg, var( --cfhi-badge-bg, var( --theme-palette-color-2, #f96900 ) ) );
	color: var( --cfsux-wish-count-fg, var( --cfhi-badge-fg, #ffffff ) );
}

/* Порожньо — кружка немає взагалі (тема робить так само для свого лічильника). */
body.cfsux-hicons #header .cfsux-wish-header__count[data-count="0"],
body.cfsux-hicons #header .cfsux-wish-header.is-empty .cfsux-wish-header__count {
	display: none;
}

/* Контейнер іконки має бути точкою відліку для кружка. У теми він уже такий,
   у нашого вішліста — теж; правило лишається страховкою на випадок іншого рядка. */
body.cfsux-hicons #header .cfsux-wish-header__icon,
body.cfsux-hicons-unify #header [data-id="cart"] .ct-icon-container {
	position: relative;
}

/* На смартфоні крок між іконками менший (заміряно: 44px проти 42px на ПК, але
   іконка більша — 22px, тож просвіт лише 22px). Кружок із двома цифрами разом із
   кільцем займає ~23px і впирався в СУСІДНЮ іконку — тому саме тут даємо більше
   поля. Розмір цифри при цьому НЕ роздуваємо: ширший кружок з'їдав би той самий
   просвіт, а 10px із вагою 700 на щільному екрані читається добре. */
@media ( max-width: 999.98px ) {

	body.cfsux-hicons #header [data-items] > [data-id="account"],
	body.cfsux-hicons #header [data-items] > .cfsux-wish-header,
	body.cfsux-hicons #header [data-items] > [data-id="cart"] {
		padding-inline-end: calc( var( --cfhi-gap, 8px ) + 4px );
	}

	body.cfsux-hicons #header [data-items] > :last-child {
		padding-inline-end: 0;
	}
}