/* LilVastr Wishlist — the ONE wishlist stylesheet (frontend). */

/* Heart button active state (cards, quick view, product summary). */
.lv-card__action[data-lv-wishlist].is-active,
.lv-product__link[data-lv-wishlist].is-active { color: var(--lv-sale, #e04f4f); }
[data-lv-wishlist].is-busy { opacity: .5; pointer-events: none; }

/* Header wishlist icon (inline heart). */
.lv-wl-icon {
	width: 22px; height: 22px;
	display: inline-block;
	background: currentColor;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21C7 16.5 3 13.3 3 9.1 3 6.3 5.2 4 8 4c1.6 0 3.1.8 4 2 .9-1.2 2.4-2 4-2 2.8 0 5 2.3 5 5.1 0 4.2-4 7.4-9 11.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21C7 16.5 3 13.3 3 9.1 3 6.3 5.2 4 8 4c1.6 0 3.1.8 4 2 .9-1.2 2.4-2 4-2 2.8 0 5 2.3 5 5.1 0 4.2-4 7.4-9 11.9z'/%3E%3C/svg%3E");
}

/* ---------- Wishlist page ---------- */
/* The page wrapper (.lv-container) already provides width + gutters, so the
   page itself only adds vertical rhythm — no double max-width/padding. */
/* On the account page the sidebar starts at the top, so the wishlist content
   must too — no extra top padding (only bottom rhythm). */
.lv-wishlist { padding: 0 0 var(--lv-space, 90px); }

/* Respect the hidden attribute even though components set an explicit display
   (otherwise the empty state renders on top of a populated grid). */
.lv-wishlist [hidden] { display: none !important; }

/* Heading first, then all the tools on one row below it. */
.lv-wishlist__head {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	margin-bottom: 26px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--lv-border, #dfe0df);
}
.lv-wishlist__title { display: flex; align-items: baseline; gap: 12px; }
.lv-wishlist__title h1 { margin: 0; font-size: clamp(24px, 3.4vw, 34px); }
.lv-wishlist__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding-inline: 8px;
	border-radius: 999px;
	background: var(--lv-secondary, #ffe9e6);
	color: var(--lv-text, #141414);
	font-size: 14px;
	font-weight: 700;
}
/* All controls on one line (grid/list toggle, sort, move-all, share, clear). */
.lv-wishlist__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
/* Sort box sizing. Higher specificity than the global ".lv-theme select" rules
   (which otherwise stretch it full-width and wipe the custom chevron). */
.lv-wishlist__tools .lv-wishlist__sort { width: 240px; max-width: 100%; flex: 0 0 auto; margin-right: auto; }
.lv-wishlist__view { display: inline-flex; border: 1.5px solid var(--lv-border, #dfe0df); border-radius: 10px; overflow: hidden; }
.lv-wishlist__view button { border: 0; background: none; padding: 8px 10px; cursor: pointer; color: var(--lv-muted, #767676); display: inline-flex; }
.lv-wishlist__view button.is-active { background: var(--lv-surface, #f7f7f7); color: var(--lv-text, #141414); }
/* Higher specificity so it beats ".lv-theme select { background: … }" which
   would otherwise reset the custom chevron background-image to none. */
.lv-wishlist__tools .lv-wishlist__sort {
	padding: 11px 42px 11px 16px;
	border: 1.5px solid var(--lv-border, #dfe0df);
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
	color: var(--lv-text, #141414);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--lv-bg, #fff);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
}
.lv-wishlist__tools .lv-wishlist__sort:focus { border-color: var(--lv-primary, #000); outline: none; }

/* Product grid. shop.css (which defines .lv-product-grid) is NOT loaded on the
   wishlist page, so define the grid here. --lv-grid-cols lets the recommended
   row use its own column count. */
.lv-wishlist .lv-product-grid {
	display: grid;
	grid-template-columns: repeat(var(--lv-grid-cols, 4), 1fr);
	gap: 32px 22px;
}
@media (max-width: 1200px) { .lv-wishlist .lv-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .lv-wishlist .lv-product-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; } }

/* List view */
.lv-wishlist__grid.is-list { grid-template-columns: 1fr !important; gap: 16px; }
.lv-wishlist__grid.is-list .lv-card { flex-direction: row; gap: 22px; align-items: center; }
.lv-wishlist__grid.is-list .lv-card__media { width: 200px; flex-shrink: 0; }

.lv-wishlist__continue { margin-top: 32px; }

/* Empty state */
.lv-wishlist__empty { text-align: center; padding: clamp(40px, 8vw, 90px) 20px; display: grid; gap: 14px; justify-items: center; }
.lv-wishlist__empty-icon { color: var(--lv-border, #dfe0df); }
.lv-wishlist__empty h2 { margin: 0; font-size: 24px; }
.lv-wishlist__empty p { color: var(--lv-muted, #767676); margin: 0 0 8px; max-width: 380px; }

/* Recommended */
.lv-wishlist__recommended { margin-top: var(--lv-space, 90px); }
.lv-wishlist__recommended .lv-section-title { text-align: left; margin-bottom: 26px; }

@media (max-width: 782px) {
	.lv-wishlist__head { flex-direction: column; align-items: flex-start; }
	.lv-wishlist__tools { width: 100%; }
	.lv-wishlist__grid.is-list .lv-card__media { width: 120px; }
}