/**
 * Shoppable-image hotspot popups (首页 Hand-Picked Daily 等).
 *
 * The theme builds each hotspot as
 *     span.mb-siwc-tag   +   div.mb-siwc-popup.mabel-invisible   (the tag's next sibling)
 * and toggles `.active` / `.mabel-invisible` (elementor/assets/js/widgets/widget-shoppable-image.js).
 * The popup markup already carries <div class="siwc-thumb-wrapper"><img></div>, a title, a price and
 * a "Shop it" link - the theme only hides the image and keeps the box small (130px, no shadow).
 *
 * Here that box becomes a product card: image on top, then title / price / button.
 *
 * Selector chains below carry `.elementor-widget-tm-shoppable-image` and the full
 * `div.mb-siwc-popup-inner` path on purpose: the theme's own popup rules are written as
 * `.minimog-shoppable-image div.mb-siwc-popup div.mb-siwc-popup-inner .target` = (0,4,2), and the
 * widget's "Show Thumbnail" switch prints
 * `.elementor-element-<id> .minimog-shoppable-image div.mb-siwc-popup-inner .siwc-thumb-wrapper`
 * = (0,4,1). One more class beats both, without !important and regardless of whether Elementor's
 * generated CSS is printed before or after this file.
 *
 * That also means the per-widget "Show Thumbnail" switch is overridden: every hotspot renders the
 * same card. Delete this file (and the enqueue in functions.php) to restore per-widget control.
 */

/* ---- card shell ---------------------------------------------------------- */

/*
 * The shell keeps whatever width the widget's own style controls set in Elementor (they print
 *     .elementor-21 .elementor-element-<id> .minimog-shoppable-image div.mb-siwc-popup { width: NNpx }
 * = (0,5,1), which no reasonable selector here should fight) - this only adds the card look, the
 * image layout and the "Shop it" button, none of which Elementor prints.
 */
.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
	overflow: hidden;
}

/*
 * Deliberately no transition: the hidden state is the plugin's
 * `.mabel-invisible { visibility: hidden !important }`, and Chrome does not run a transition that
 * starts while that subtree is hidden - the popup stayed at the transition's start value
 * (`opacity: 0`, and with `visibility` in the transition list even `visibility: hidden`) until the
 * transition was switched off in devtools. Instant show/hide is what actually works on this site.
 */
.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup.mabel-invisible {
	opacity: 0;
	pointer-events: none;
}

.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup div.mb-siwc-popup-inner {
	display: block;
	padding: 0;
	text-align: left;
}

/* ---- image -------------------------------------------------------------- */

.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup div.mb-siwc-popup-inner .siwc-thumb-wrapper {
	display: block;
	width: 100%;
	margin: 0;
	background-color: #f4f4f4;
	aspect-ratio: 3 / 4;
	border-radius: 0;
}

.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup div.mb-siwc-popup-inner .siwc-thumb-wrapper a {
	display: block;
	height: 100%;
}

.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup div.mb-siwc-popup-inner .siwc-thumb-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.15, 0.75, 0.5, 1);
}

.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup:hover div.mb-siwc-popup-inner .siwc-thumb-wrapper img {
	transform: scale(1.04);
}

/* ---- body --------------------------------------------------------------- */

.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup div.mb-siwc-popup-inner .siwc-content-wrapper {
	padding: 12px 14px 16px;
	flex-grow: 0;
}

.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup div.mb-siwc-popup-inner .product-title {
	font-size: 15px;
	line-height: 1.4;
	margin: 0 0 6px;
}

.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup div.mb-siwc-popup-inner .price {
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
}

/* The theme hides the call to action; a card reads better with it. */
.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup div.mb-siwc-popup-inner .product-link {
	display: inline-block;
	margin-top: 12px;
	height: 30px;
	line-height: 32px;
	padding: 0 15px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background-color: var(--minimog-color-primary, #111);
	color: #fff;
	border-radius: 3px;
	transition: opacity 0.25s ease;
}

.elementor-widget-tm-shoppable-image .minimog-shoppable-image div.mb-siwc-popup div.mb-siwc-popup-inner .product-link:hover {
	opacity: 0.86;
}