/*
 * Divi DigiMart: Wishlist.
 *
 * Theme.css section 8: buttons, the list and its empty state.
 *
 * Ported from the QuikNexa child theme's theme.css (Phase 2b, Task 3): qn- became qndm-,
 * its tokens read the panel's (QNDM_Tokens), and the 1280 / 980 / 767 / 480 queries are
 * rewritten by QNDM_Tokens_Compile when the Breakpoint pane differs from Divi's.
 * Generated by tools/theme-css: edit the additions there, not this file.
 */

#et-boc .qndm-wish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px var(--qndm-sp-4);
	border: 1px solid var(--qndm-border);
	border-radius: 8px;
	background: var(--qndm-surface);
	color: var(--qndm-body);
	font-size: var(--qndm-fs-base);
	font-weight: var(--qndm-fw-semibold);
	line-height: 1.4;
	cursor: pointer;
	transition: border-color var(--qndm-dur-fast) var(--qndm-ease), color var(--qndm-dur-fast) var(--qndm-ease), background var(--qndm-dur-fast) var(--qndm-ease);
}

#et-boc .qndm-wish svg {
	width: 16px;
	height: 16px;
	transition: fill var(--qndm-dur-fast) var(--qndm-ease);
}

#et-boc .qndm-wish:hover,
#et-boc .qndm-wish.is-active {
	border-color: var(--qndm-primary);
	color: var(--qndm-primary);
}

#et-boc .qndm-wish.is-active svg {
	fill: currentColor;
}

#et-boc .qndm-wish.is-busy {
	opacity: .55;
	pointer-events: none;
}

#et-boc .qndm-wish-slot {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: var(--qndm-z-overlay);
	line-height: 0;
}

#et-boc .qndm-wish--icon {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: var(--qndm-r-circle);
	box-shadow: var(--qndm-sh-sm);
}

#et-boc .qndm-wish--icon .qndm-wish-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

#et-boc .qndm-wish--remove {
	padding: var(--qndm-sp-2) var(--qndm-sp-3);
	border-color: transparent;
	font-size: var(--qndm-fs-sm);
}

#et-boc .qndm-wish--remove:hover {
	border-color: var(--qndm-danger);
	color: var(--qndm-danger);
}

#et-boc .qndm-wishlist {
	display: grid;
	gap: var(--qndm-sp-3);
}

#et-boc .qndm-wishlist--async {
	display: block;
	min-height: 60px;
}

#et-boc .qndm-wishlist-item {
	display: grid;
	grid-template-columns: 64px minmax( 0, 1fr ) auto;
	align-items: center;
	gap: var(--qndm-sp-4);
	padding: 14px;
	transition: border-color var(--qndm-dur-fast) var(--qndm-ease);
}

#et-boc .qndm-wishlist-thumb {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	line-height: 0;
}

#et-boc .qndm-wishlist-thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
}

#et-boc .qndm-wishlist-info {
	min-width: 0;
}

#et-boc .qndm-wishlist-name {
	display: block;
	margin-bottom: 3px;
	color: var(--qndm-heading);
	font-size: var(--qndm-fs-md);
	font-weight: var(--qndm-fw-semibold);
}

#et-boc .qndm-wishlist-name:hover {
	color: var(--qndm-primary);
}

#et-boc .qndm-wishlist-price {
	display: block;
	font-size: var(--qndm-fs-base);
}

#et-boc .qndm-wishlist-actions {
	display: flex;
	align-items: center;
	gap: var(--qndm-sp-2);
}

@media (max-width: 560px) {
	#et-boc .qndm-wishlist-item {
		grid-template-columns: 56px minmax( 0, 1fr );
		row-gap: var(--qndm-sp-3);
	}

	#et-boc .qndm-wishlist-thumb img {
		width: 56px;
		height: 56px;
	}

	#et-boc .qndm-wishlist-actions {
		grid-column: 1 / -1;
	}

	#et-boc .qndm-wishlist-actions .button {
		flex: 1;
	}
}

/* Wishlist pane, Button position: beside the title or the card's buttons, not over the image. */
#et-boc .qndm-wish-slot--title,
#et-boc .qndm-wish-slot--actions {
	position: static;
	display: inline-flex;
	vertical-align: middle;
	margin: var(--qndm-sp-2) 0 0 var(--qndm-sp-2);
}