/*
 * Call: tap-to-call button in the mobile header. See
 * includes/class-kd-forms-call.php for why.
 *
 * 🔑 Hidden at 992px and up — the exact width where the theme's own header
 * number (`d-lg-block`) appears. Below it, shown beside the cart.
 *
 * 🔴 SPECIFICITY. The theme styles every item in this list with
 * `header.kd-header .kd-header-top .kd-basket-col ul li { display: inline-block }`
 * — specificity (0,3,3). A plainer selector LOST to it: the first build's
 * `display: none` was overridden and the button showed on desktop too, beside
 * the theme's own number. Every rule here starts with the theme's full prefix
 * plus our class, (0,4,3), and scripts/check-forms.php fails the build if one
 * stops beating (0,3,3).
 *
 * 🔑 POSITIONED, NOT FLOWED. The basket column is too narrow for two icons —
 * in flow, the phone wrapped onto a second line and pushed the cart down. So
 * the button sits absolutely just left of the cart, in the empty space between
 * logo and cart (measured 2026-09-30: 34px clear of the logo at 375px, 6px at 320px), and
 * the cart does not move at all.
 */
header.kd-header .kd-header-top .kd-basket-col ul li.kd-call-li {
	display: none;
}

@media (max-width: 991.98px) {
	header.kd-header .kd-header-top .kd-basket-col ul.kd-call-host {
		position: relative;
	}

	header.kd-header .kd-header-top .kd-basket-col ul li.kd-call-li {
		display: block;
		position: absolute;
		right: 100%;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		padding: 0;
	}
}

/* 44px square: the minimum comfortable tap target. */
header.kd-header .kd-header-top .kd-basket-col ul li.kd-call-li a.kd-call {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #fff;
}

header.kd-header .kd-header-top .kd-basket-col ul li.kd-call-li a.kd-call svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}