/**
 * Hide the header shopping cart icon while the WooCommerce cart is empty.
 *
 * The body class `hilucy-cart-empty` is added server-side on initial render
 * (so there is no flash of the icon on page load) and is toggled by
 * cart-visibility.js whenever the cart contents change.
 *
 * `display: none` removes the element from the flow entirely so the rest of
 * the header collapses cleanly with no reserved gap, which keeps mobile
 * particularly tidy. Because the icon is a discrete header item, the reflow
 * happens only when the user explicitly adds/removes an item, so it does not
 * read as a layout glitch.
 */
body.hilucy-cart-empty #user-cart-menu {
	display: none !important;
}

/*
 * Collapse the empty slot the cart used to occupy.
 *
 * The parent My Listing theme renders several direct children inside
 * `.header-right` (`.user-area`, `.header-button`, `.search-trigger`, …).
 * Hiding just `#user-cart-menu` is not enough on mobile, because the
 * surrounding wrappers (e.g. `.user-area`) remain in the flex layout with
 * their own `margin-right` and per-child `margin-left: 20px`, leaving a
 * residual gap before the search icon even when their internal content
 * is fully invisible.
 *
 * `cart-visibility.js` measures each direct child of `.header-right` after
 * the cart has been hidden and tags any that ended up with zero rendered
 * width with `.hilucy-cart-empty-slot`. The rule below removes them from
 * the flex flow entirely so the surviving items (typically just the
 * search trigger on mobile) sit flush against the language toggle.
 *
 * The `gap` rule provides the original 20px breathing room between any
 * children that *are* still visible (e.g. logged-in desktop with messaging
 * + user menu + search), so we don't lose spacing in those layouts.
 *
 * The tags are stripped as soon as the cart has items again, so the
 * theme's original margin-based layout takes over with no glitches.
 */
body.hilucy-cart-empty .header-right {
	gap: 20px;
}

body.hilucy-cart-empty .header-right > .hilucy-cart-empty-slot {
	display: none !important;
}

body.hilucy-cart-empty .header-right > div,
body.hilucy-cart-empty .header-right > a {
	margin-left: 0 !important;
	margin-right: 0 !important;
}