/* Bmart Wishlist frontend styles. All selectors are bmart-wishlist__* —
   never wc-block-* (WC core Shopper Collections claims those). */

/* ── Buttons ─────────────────────────────────────────────── */

.bmart-wishlist__button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	line-height: 1;
}

.bmart-wishlist__heart {
	display: inline-block;
	vertical-align: middle;
	transition: transform 0.15s ease;
}

.bmart-wishlist__button.is-added .bmart-wishlist__heart path {
	fill: #e2401c;
	stroke: #e2401c;
}

.bmart-wishlist__button:hover .bmart-wishlist__heart {
	transform: scale(1.1);
}

.bmart-wishlist__button--loop {
	background: none;
	border: 0;
	padding: 0.25em;
	margin: 0.25em 0 0;
	color: inherit;
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
}

.bmart-wishlist__button--loop:hover,
.bmart-wishlist__button--loop:focus {
	background: none;
	color: #e2401c;
}

/* ── Header icon ─────────────────────────────────────────── */

.bmart-wishlist__header-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: inherit;
}

.bmart-wishlist__header-count {
	position: absolute;
	top: -0.55em;
	right: -0.8em;
	min-width: 1.6em;
	height: 1.6em;
	padding: 0 0.3em;
	border-radius: 999px;
	background: #e2401c;
	color: #fff;
	font-size: 0.65em;
	font-weight: 700;
	line-height: 1.6em;
	text-align: center;
}

/* ── Wishlist page ───────────────────────────────────────── */

.bmart-wishlist__loading,
.bmart-wishlist__empty {
	padding: 2em 0;
	text-align: center;
}

.bmart-wishlist__empty .button {
	margin-top: 1em;
}

.bmart-wishlist__list {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.bmart-wishlist__row {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bmart-wishlist__row--unavailable {
	opacity: 0.55;
}

.bmart-wishlist__row-image {
	flex: 0 0 80px;
}

.bmart-wishlist__row-image img {
	display: block;
	width: 80px;
	height: auto;
}

.bmart-wishlist__row-info {
	flex: 1 1 auto;
	min-width: 0;
}

.bmart-wishlist__row-name {
	font-weight: 600;
	display: block;
}

.bmart-wishlist__row-variation {
	font-size: 0.85em;
	opacity: 0.75;
}

.bmart-wishlist__row-stock {
	font-size: 0.85em;
	color: #e2401c;
}

.bmart-wishlist__row-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.bmart-wishlist__row-cart.button {
	margin: 0;
}

.bmart-wishlist__row-remove {
	background: none;
	border: 0;
	padding: 0.2em 0.5em;
	font-size: 1.4em;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.6;
	box-shadow: none;
	min-height: 0;
}

.bmart-wishlist__row-remove:hover,
.bmart-wishlist__row-remove:focus {
	background: none;
	color: #e2401c;
	opacity: 1;
}

@media ( max-width: 549px ) {
	.bmart-wishlist__row {
		flex-wrap: wrap;
	}

	.bmart-wishlist__row-actions {
		flex-basis: 100%;
		justify-content: flex-end;
	}
}

/* ── My Account template (bowlersmart) ───────────────────── */

/* Flatsome's page-my-account.php puts the account nav in a large-3 column
   that stacks ABOVE the page content below the 850px breakpoint, pushing the
   wishlist under seven menu items on phones. The row is already flex, so
   swap the stacking order on the wishlist page only. */
@media ( max-width: 849px ) {
	body.bmart-wishlist-page .vertical-tabs > .col.large-3 {
		order: 2;
	}

	body.bmart-wishlist-page .vertical-tabs > .col.large-9 {
		order: 1;
	}
}