/*
 * qrp-wl.css: the storefront wishlist (qrp-wishlist.php 1.0.1).
 * Looks are Botiga Pro 1.4.1's, read off the live site on 5 Oct 2026: a 35px
 * clear circle 15px in from the top right of a card's image, a 17px heart
 * stroked #212121, filled and stroked #ff87e1 once saved, a dark tooltip on
 * hover. The header heart and its badge are drawn by the theme's own rules
 * (.header-wishlist-icon). Botiga styles bare buttons globally in 2.2.3, so
 * every property it touches on these buttons carries !important.
 * The hearts are printed with the hidden attribute and shown here, so a
 * page whose copy of this file failed to load shows no stray buttons.
 */

/* ---- the heart button, everywhere ---- */
.qrp-wl-heart,
.qrp-wl-heart[hidden] {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--bt-color-heading-4, #212121) !important;
	font: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.2 !important;
	transform: none !important;
	cursor: pointer;
}

.qrp-wl-heart .qrp-wl-icon path {
	fill: transparent;
	stroke: #212121;
	transition: fill 150ms ease, stroke 150ms ease;
}

.qrp-wl-heart.is-on .qrp-wl-icon path {
	fill: #ff87e1;
	stroke: #ff87e1;
}

.qrp-wl-heart:focus-visible {
	outline: 2px solid var(--bt-color-heading-4, #212121) !important;
	outline-offset: 2px !important;
}

/* ---- on a product card: top right of the image ---- */
.loop-image-wrap { position: relative; }

.qrp-wl-heart.qrp-wl-heart--card {
	position: absolute !important;
	top: 15px !important;
	right: 15px !important;
	z-index: 2;
	width: 35px !important;
	height: 35px !important;
	border-radius: 100% !important;
	background: rgba(255, 255, 255, 0) !important;
}

@media (hover: hover) and (min-width: 1025px) {
	.qrp-wl-heart--card::after {
		content: attr(data-qrp-wl-tip);
		position: absolute;
		top: 50%;
		right: calc(100% + 8px);
		transform: translate3d(6px, -50%, 0);
		padding: 5px 10px;
		border-radius: 4px;
		background: #212121;
		color: #fff;
		font-size: 12px;
		line-height: 1.3;
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
	}
	.qrp-wl-heart--card:hover::after,
	.qrp-wl-heart--card:focus-visible::after {
		opacity: 1;
		visibility: visible;
		transform: translate3d(0, -50%, 0);
	}
}

/* ---- on a product page: under the meta ---- */
.qrp-wl-single,
.qrp-wl-single[hidden] {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-top: 15px;
}

.qrp-wl-heart.qrp-wl-heart--text {
	font-size: .9rem !important;
	font-weight: 600 !important;
}

/* One name at a time: "Add to Wishlist" while off; while on, the words go
 * and a screen reader hears "Saved to your wishlist" (pressed) instead. */
.qrp-wl-single .qrp-wl-saved { display: none; }

.qrp-wl-single.is-on .qrp-wl-saved {
	display: block;
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.qrp-wl-single.is-on .qrp-wl-add { display: none; }

.qrp-wl-single .qrp-wl-view {
	display: none;
	font-size: .9rem;
	font-weight: 600;
	color: var(--bt-color-heading-4, #212121);
	text-decoration: underline;
}

.qrp-wl-single.is-on .qrp-wl-view { display: inline; }

/* ---- the wishlist page ---- */
.qrp-wl-page { margin-top: 10px; }

/* rules between rows only: the theme boxes every cell of a bare table
 * (table th, table td { border: 1px solid }), which Pro's page escaped
 * through the cart page's classes */
.qrp-wl-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0 0 30px;
}

.qrp-wl-table tr { border: 0; }

.qrp-wl-table th,
.qrp-wl-table td {
	padding: 16px 12px;
	border: 0;
	border-bottom: 1px solid rgba(33, 33, 33, .1);
	text-align: left;
	vertical-align: middle;
}

.qrp-wl-table thead th {
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--bt-color-heading-4, #212121);
}

.qrp-wl-table td.product-thumbnail { width: 96px; }

.qrp-wl-table td.product-thumbnail img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: cover;
}

.qrp-wl-table td.product-remove,
.qrp-wl-table th.product-remove { width: 40px; }

.qrp-wl-table td.product-addtocart { text-align: right; }

.qrp-wl-table tr.is-removing { opacity: .35; transition: opacity 250ms ease; }

.qrp-wl-table .qrp-wl-empty-row[hidden] { display: none !important; }

.qrp-wl-table .qrp-wl-empty-row td { padding: 30px 12px; text-align: center; }

.qrp-wl-table.is-empty thead { display: none; }

.qrp-wl-remove {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--bt-color-heading-4, #212121) !important;
	color: #fff !important;
	font: inherit !important;
	font-size: 16px !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	transform: none !important;
	cursor: pointer;
}

.qrp-wl-remove:focus-visible {
	outline: 2px solid var(--bt-color-heading-4, #212121) !important;
	outline-offset: 2px !important;
}

.qrp-wl-footer { text-align: right; }

@media screen and (max-width: 767px) {
	.qrp-wl-table thead { display: none; }
	.qrp-wl-table tr.qrp-wl-row {
		position: relative;
		display: grid;
		grid-template-columns: 80px 1fr;
		column-gap: 14px;
		padding: 16px 0;
		border-bottom: 1px solid rgba(33, 33, 33, .1);
	}
	.qrp-wl-table tr.qrp-wl-row td { padding: 2px 0; border: 0; }
	.qrp-wl-table tr.qrp-wl-row td.product-remove { position: absolute; top: 12px; right: 0; width: auto; }
	.qrp-wl-table tr.qrp-wl-row td.product-thumbnail { grid-row: 1 / span 4; width: 80px; }
	.qrp-wl-table tr.qrp-wl-row td.product-name { padding-right: 32px; font-weight: 600; }
	.qrp-wl-table tr.qrp-wl-row td.product-addtocart { text-align: left; padding-top: 8px; }
	.qrp-wl-footer { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.qrp-wl-heart .qrp-wl-icon path { transition: none; }
	.qrp-wl-heart--card::after { transition: opacity 150ms linear, visibility 150ms; }
}