/* Meghnaj Store Tools: product card extras */

/* ---- Wishlist icon on a white circle (70% opacity) ---- */
body.mst-wishlist-circle .etheme-product-grid-item .footer-inner .xstore-wishlist {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: var(--mst-wishlist-size, 36px) !important;
	height: var(--mst-wishlist-size, 36px) !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, var(--mst-wishlist-opacity, .7)) !important;
	color: #111;
	transition: background-color .2s ease;
}

body.mst-wishlist-circle .etheme-product-grid-item .footer-inner .xstore-wishlist:hover {
	background-color: rgba(255, 255, 255, .95) !important;
}

body.mst-wishlist-circle .etheme-product-grid-item .footer-inner .xstore-wishlist .et-icon {
	line-height: 1;
}

/* ---- Next photo slides in from the right on hover ---- */
.etheme-product-grid-image > a.mst-hover-swap > img.mst-hover-img {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	/* z-index 0 keeps both photos in their own layer, so the theme's hover icons (wishlist, Quick View) stay on top. */
	.etheme-product-grid-image > a.mst-hover-swap {
		position: relative;
		z-index: 0;
		display: block;
		overflow: hidden;
	}

	.etheme-product-grid-image > a.mst-hover-swap > img {
		transition: transform .55s cubic-bezier(.22, .61, .36, 1) !important;
	}

	.etheme-product-grid-image > a.mst-hover-swap > img.mst-hover-img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		display: block;
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		margin: 0 !important;
		object-fit: cover;
		transform: translateX(100%) !important;
	}

	.etheme-product-grid-item:hover .etheme-product-grid-image > a.mst-hover-swap > img:not(.mst-hover-img) {
		transform: translateX(-100%) !important;
	}

	.etheme-product-grid-item:hover .etheme-product-grid-image > a.mst-hover-swap > img.mst-hover-img {
		transform: translateX(0) !important;
	}

	/* Keep the sale badge above both photos. */
	.etheme-product-grid-image > a.mst-hover-swap .sale-wrapper {
		position: relative;
		z-index: 2;
	}

	/* A color picked on the card shows that color's photo; don't slide it away. */
	.etheme-product-grid-item.mst-cs-picked .etheme-product-grid-image > a.mst-hover-swap > img:not(.mst-hover-img),
	.etheme-product-grid-item.mst-cs-picked .etheme-product-grid-image > a.mst-hover-swap > img.mst-hover-img {
		transition: none !important;
	}

	.etheme-product-grid-item.mst-cs-picked:hover .etheme-product-grid-image > a.mst-hover-swap > img:not(.mst-hover-img) {
		transform: none !important;
	}

	.etheme-product-grid-item.mst-cs-picked:hover .etheme-product-grid-image > a.mst-hover-swap > img.mst-hover-img {
		transform: translateX(100%) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.etheme-product-grid-image > a.mst-hover-swap > img {
		transition: none !important;
	}
}

/* ---- Product labels (Sale, New, Hot...) with rounded corners like the card buttons ---- */
body.mst-rounded-badges .onsale:not(.type-circle) {
	border-radius: var(--mst-badge-radius, 10px) !important;
}

/* XStore lays the label out with flex, which drops the space in "Up to 15%"; put it back. */
.onsale.with-percentage > span {
	margin-inline-start: .3em;
}

/* ---- Wishlist heart visible without hovering ----
   XStore hides the whole hover area until hover. Keep that area's own layer (white overlay, Quick View bar)
   hidden, and make only the heart visible: a visible child shows even inside a hidden parent. */
body.mst-wishlist-always .etheme-product-grid-item .etheme-product-grid-image footer {
	opacity: 1 !important;
}

body.mst-wishlist-always .etheme-product-grid-item .etheme-product-grid-image footer .footer-inner .xstore-wishlist {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Quick view window: no wishlist / compare buttons. */
.et-quick-view-wrapper .single-wishlist,
.et-quick-view-wrapper .single-compare {
	display: none !important;
}

/* Quick view title in Alexandria on Arabic pages (the theme uses the primary font, Kraften, for headings). */
html[lang^="ar"] .et-quick-view-wrapper .product-name,
html[lang^="ar"] .et-quick-view-wrapper .product-name a,
html[lang^="ar"] .et-quick-view-wrapper .product_title {
	font-family: "Alexandria", sans-serif !important;
}

/* Mini cart product names in Alexandria, in every language. */
.woocommerce-mini-cart-item .product-title,
.woocommerce-mini-cart-item .product-title a,
.mini_cart_item .product-title,
.mini_cart_item .product-title a {
	font-family: "Alexandria", sans-serif !important;
}

/* Empty cart / compare / wishlist heading: the theme's heading font (Kraften) has no Arabic letters, so Arabic
   pages fell back to a system font. */
html[lang^="ar"] .empty-cart-block h1,
html[lang^="ar"] .empty-cart-block h2,
html[lang^="ar"] .cart-empty h1,
html[lang^="ar"] .wc-empty-cart-message h1 {
	font-family: "Alexandria", sans-serif !important;
}

/* Live search results: the title takes the free width, the price stays on one line next to it. */
.etheme-search-form .autocomplete-suggestion .etheme-search-form-item-link{display:flex;align-items:center;width:100%}
.etheme-search-form .autocomplete-suggestion .etheme-search-form-item-link img{flex:0 0 auto}
.etheme-search-form .autocomplete-suggestion .etheme-search-form-item-info{flex:1 1 auto;min-width:0;width:auto}
.etheme-search-form .autocomplete-suggestion .etheme-search-form-item-title{word-break:normal;overflow-wrap:break-word;white-space:normal;line-height:1.4}
.etheme-search-form .autocomplete-suggestion .etheme-search-form-item-price{flex:0 0 auto}
.rtl .etheme-search-form .autocomplete-suggestion .etheme-search-form-item-info:not(:last-child){margin-right:0;margin-left:20px}
/* Wider than the search box on desktop: grows toward the page (left on Arabic pages, right on English ones). */
@media (min-width:768px){
.etheme-search-form:not([type=popup]) .etheme-search-ajax-results{width:min(620px,92vw);min-width:100%;left:0;right:auto;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.rtl .etheme-search-form:not([type=popup]) .etheme-search-ajax-results{right:0;left:auto}
.etheme-search-form:not([type=popup]) .etheme-search-ajax-results .autocomplete-suggestions{width:100%!important;max-height:min(70vh,560px)}
}
.etheme-search-form .autocomplete-suggestion .etheme-search-form-item-price{white-space:nowrap}
/* Results heading: "Products" on one side, the count on the other, also on Arabic pages. */
.etheme-search-form .etheme-search-form-title{justify-content:space-between;gap:10px}
.rtl .etheme-search-form .etheme-search-form-title span{margin-left:0;margin-right:auto}
/* Everything in the Arabic results box (heading, count, names, prices, "no results") in Alexandria. */
html[lang^="ar"] .etheme-search-ajax-results,
html[lang^="ar"] .etheme-search-ajax-results *:not(i):not([class*="icon"]){font-family:"Alexandria",sans-serif!important}

/* Wishlist side panel (and the mini cart panel): names, prices, buttons and the empty message in Alexandria. */
.et_b_wishlist-dropdown,
.et_b_wishlist-dropdown *:not(i):not([class*="icon"]),
.woocommerce-mini-wishlist-item,
.woocommerce-mini-wishlist-item *:not(i):not([class*="icon"]),
.empty-wishlist-block,
.empty-wishlist-block *:not(i):not([class*="icon"]){
	font-family: "Alexandria", sans-serif !important;
}