/* ==========================================================================
   Calm Wolf — "Add to wishlist" heart in the product loop
   Loaded site-wide (the heart appears on the home/shop/category grids, not
   just the wishlist page, so this can't live in wishlist.css).
   ========================================================================== */

/* The heart sits in an Elementor widget wrapper that the loop card stretches
   to the same 54px height as the neighbouring "Add to Cart" button. The
   wrapper is display:block though, so the 30px button inside it just sits at
   the top — leaving the heart ~15px above the centre of the Add to Cart bar.
   Making the wrapper (and Elementor's inner container) centring flex boxes
   pulls the heart onto the same optical line as the button beside it. */
.elementor-widget-yith_wcwl_add_to_wishlist,
.elementor-widget-yith_wcwl_add_to_wishlist > .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* .elementor-widget-container is what carries the widget's dark background,
   and making the widget above a flex container turns it into a flex item —
   which shrinks to its 24px icon instead of filling the widget's full width,
   leaving a strip of white between the heart and the Add to Cart button.
   Growing it back keeps the dark block flush against the button. */
.elementor-widget-yith_wcwl_add_to_wishlist > .elementor-widget-container {
	flex: 1 0 auto;
	width: 100%;
}

.elementor-widget-yith_wcwl_add_to_wishlist .yith-add-to-wishlist-button-block,
.elementor-widget-yith_wcwl_add_to_wishlist .yith-wcwl-add-to-wishlist-button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
}

/* The icon is a 24x24 viewBox, but it inherits a 30px line-height-derived
   height, so it renders into a 24x30 box and reads as slightly off-centre.
   Pinning it square keeps the glyph's own centre on the box's centre. */
.elementor-widget-yith_wcwl_add_to_wishlist .yith-wcwl-icon-svg {
	width: 22px;
	height: 22px;
	display: block;
	flex: 0 0 auto;
}

/* The loop-item template (Elementor library #178) has a custom position
   offset saved on the wishlist widget:
       .elementor-178 .elementor-element-c8e17ad.elementor-element { top: -10px }
   which lifts the heart 10px above the Add to Cart button next to it. That
   offset is a hand-nudge in the widget's Advanced > Custom Positioning
   settings, not something this design wants — cancel it so the heart lands on
   the same centre line as the button. (Clearing the offset in Elementor
   itself would let this rule go away.) */
/* !important, reluctantly: Elementor's generated rule for this widget is
   four classes deep (.elementor-178 .elementor-element.elementor-element-c8e17ad
   .elementor-element) and its post CSS file is enqueued after this one, so
   nothing short of !important reliably wins — and matching that selector by
   hand would bake the template/widget IDs into this file, which then silently
   stops working the moment the template is duplicated or re-saved. */
.elementor-widget-yith_wcwl_add_to_wishlist.elementor-element {
	top: 0 !important;
}