/* =====================================================================
   VasiLab – wishlist (assets/css/extras/wishlist.css)
   Header favorites badge + the /wishlist/ page. Uses the :root tokens
   from main.css. Tiles reuse the shop grid (.products.o-grid / .o-tile).
   ===================================================================== */

/* Favorites badge in the header (was .o-cart-count, which WooCommerce's
   add-to-cart fragments overwrite with the bag count). Same look. */
.o-wish-count { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-full); background: var(--c-red); color: #fff; font-size: 10px; font-weight: 700; display: none; align-items: center; justify-content: center; line-height: 1; }
.o-wish-count.is-on { display: inline-flex; }

/* Favorites row in the mobile drawer */
.o-drawer__wishn { display: none; margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-full); background: var(--c-olive); color: var(--c-warm-white); font-size: 11px; font-weight: 700; align-items: center; justify-content: center; line-height: 1; }
.o-drawer__wishn.is-on { display: inline-flex; }

/* ---------- Page ---------- */
.o-wishlist [hidden] { display: none !important; } /* .o-empty / .o-grid set display, which would beat the hidden attribute */
.o-wishlist__head { margin-bottom: 18px; gap: 4px; }
.o-wishlist__count { margin: 0; }
.o-wishlist__count:empty { display: none; }
.o-wishlist__intro { margin-bottom: 18px; }
@media (min-width: 992px) {
	.o-wishlist__head { justify-content: flex-start; align-items: baseline; gap: 18px; }
	.o-wishlist__count { padding-bottom: 6px; }
}

/* Tiles fade out when un-hearted on the wishlist page */
.o-wishlist .o-tile { transition: opacity .28s var(--ease), transform .28s var(--ease); }
.o-wishlist .o-tile.is-removing { opacity: 0; transform: scale(.96); pointer-events: none; }

/* Skeleton tiles while the tiles are fetched */
.o-wishlist__grid[aria-busy="true"] { min-height: 120px; }
.o-tile--skel { pointer-events: none; }
.o-tile--skel .o-tile__media { position: relative; border-radius: var(--r-12); overflow: hidden; background: var(--c-tile); aspect-ratio: 1; }
.o-tile--skel .o-tile__media::after,
.o-tile--skel i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, rgba(250,247,240,.55) 50%, transparent 100%); transform: translateX(-100%); animation: o-wl-shimmer 1.4s infinite; }
.o-tile--skel .o-tile__body { padding: 10px 2px 0; display: flex; flex-direction: column; gap: 6px; }
.o-tile--skel i { display: block; position: relative; overflow: hidden; height: 12px; border-radius: var(--r-4); background: var(--c-grey-100); }
.o-tile--skel i:nth-child(1) { width: 40%; }
.o-tile--skel i:nth-child(2) { width: 85%; height: 16px; }
.o-tile--skel i:nth-child(3) { width: 30%; }
@keyframes o-wl-shimmer { to { transform: translateX(100%); } }

/* Empty state */
.o-wishlist__empty { padding: 56px 0 40px; }
.o-wishlist__emptyico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-full); background: var(--c-beige-bg); color: var(--c-olive); margin-bottom: 4px; }
.o-wishlist__hint { max-width: 36ch; margin: -6px 0 6px; }

/* Error state */
.o-wishlist__error { text-align: center; padding: 32px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }