/* ==========================================================================
   petrascal — wishlist

   Everything here is additive. No existing rule is redeclared and no existing
   class is restyled, so removing this file leaves the theme exactly as it was.

   Colours come from the theme's own tokens (--Primary, --Surface, --line,
   --Onsurface, --Critical) with the shipped values as fallbacks, which means a
   palette change in css/styles.css recolours the wishlist with it.

   !important appears exactly twice, both times against a named theme rule that
   uses !important itself and would otherwise repaint the saved heart on hover.
   Each one carries the rule it is answering in a comment above it.
   ========================================================================== */

:root {
	--petrascal-wl-ink: var(--Onsurface, #181818);
	--petrascal-wl-muted: var(--Secondary, #4d4e4f);
	--petrascal-wl-faint: var(--Secondary2, #a0a0a0);
	--petrascal-wl-line: var(--line, #e9e9e9);
	--petrascal-wl-surface: var(--Surface, #f6f6f6);
	--petrascal-wl-white: var(--White, #ffffff);
	--petrascal-wl-accent: var(--Primary, #bd6f43);
	--petrascal-wl-love: var(--Critical, #f03e3e);

	--petrascal-wl-r: 12px;
	--petrascal-wl-r-lg: 16px;

	--petrascal-wl-sh-1: 0 1px 2px rgba(16, 24, 40, 0.05);
	--petrascal-wl-sh-2: 0 4px 16px rgba(16, 24, 40, 0.07);
	--petrascal-wl-sh-3: 0 12px 32px rgba(16, 24, 40, 0.12);
}

/* ==========================================================================
   1. The heart, in every place the theme prints one
   ========================================================================== */

.petrascal-wl-btn {
	cursor: pointer;
}

/* The card heart: a.box-icon.wishlist.btn-icon-action inside .card-product.
   The glyph is an icon font, so "solid" is expressed as the theme's own filled
   circle treatment in the accent colour rather than as a fill on a path. */
.card-product .btn-icon-action.wishlist.is-wishlisted {
	background-color: var(--petrascal-wl-white);
	box-shadow: 0 0 0 1px rgba(189, 111, 67, 0.25), var(--petrascal-wl-sh-2);
}

.btn-icon-action.wishlist.is-wishlisted .icon-heart {
	color: var(--petrascal-wl-love);
	transform: scale(1.06);
}

/* Answers `.card-product .box-icon.active, .card-product .box-icon:hover`
   in css/styles.css, which paints the whole button --Onsurface and the glyph
   --White with !important. Without this the saved heart loses its colour for
   as long as the pointer is over it, which reads as the click undoing itself. */
.card-product .btn-icon-action.wishlist.is-wishlisted:hover {
	background-color: var(--petrascal-wl-love) !important;
}

.card-product .btn-icon-action.wishlist.is-wishlisted:hover .icon-heart {
	color: var(--petrascal-wl-white) !important;
}

.btn-icon-action.wishlist .icon-heart {
	transition: color 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The kela-design hearts are inline SVG with fill:currentColor, so these do go
   genuinely solid. petrascal-pdp.css already colours [aria-pressed="true"]
   inside .kela-design-root; this repeats it unscoped so a kela-design card
   dropped outside that wrapper behaves the same. */
[data-kela-design-fav].is-wishlisted,
[data-kela-design-fav][aria-pressed="true"] {
	color: var(--petrascal-wl-love);
}

/* A saved card heart stays visible instead of waiting for a card hover. */
.kela-design-card-fav.is-wishlisted {
	opacity: 1;
	transform: none;
}

/* The pop. Added by JS on add only, and only when motion is welcome. */
@keyframes petrascal-wl-pop {
	0% { transform: scale(1); }
	38% { transform: scale(1.32); }
	68% { transform: scale(0.94); }
	100% { transform: scale(1); }
}

.petrascal-wl-pop .icon-heart,
.petrascal-wl-pop .kela-design-icon,
.petrascal-wl-pop > svg {
	animation: petrascal-wl-pop 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ==========================================================================
   2. The header and toolbar count bubble
   ==========================================================================
   In the header the theme's own `.header-default .nav-icon .count-box` rule is
   more specific than anything here and keeps winning, which is the point: the
   wishlist bubble and the cart bubble beside it are then the same object. The
   rules below are what the mobile toolbar gets, where the theme has none. */

.petrascal-wl-counted {
	position: relative;
}

.petrascal-wl-count {
	position: absolute;
	top: -4px;
	right: -6px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background-color: var(--petrascal-wl-accent);
	color: var(--petrascal-wl-white);
	font-size: 11px;
	line-height: 1;
	pointer-events: none;
}

/* A permanent zero beside a heart reads as a broken counter, not as a count. */
.petrascal-wl-count--empty {
	display: none;
}

/* ==========================================================================
   3. Toast
   ==========================================================================
   The product page already has [data-kela-design-toast] and the CSS for it, and
   the script reuses that one when it is there. This is the standalone toast for
   every other template. */

.petrascal-wl-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 1080;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 12px 24px;
	border-radius: 999px;
	background-color: var(--petrascal-wl-ink);
	color: var(--petrascal-wl-white);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	box-shadow: var(--petrascal-wl-sh-3);
	transform: translate(-50%, 160%);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.petrascal-wl-toast[data-show="true"] {
	transform: translate(-50%, 0);
}

.petrascal-wl-toast--error {
	background-color: var(--petrascal-wl-love);
}

/* ==========================================================================
   4. The wishlist page
   ========================================================================== */

.petrascal-wl {
	display: block;
	width: 100%;
}

/* --- the bar above the grid --- */

.petrascal-wl-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	padding: 16px 20px;
	border: 1px solid var(--petrascal-wl-line);
	border-radius: var(--petrascal-wl-r-lg);
	background-color: var(--petrascal-wl-surface);
}

.petrascal-wl-bar[hidden] {
	display: none;
}

.petrascal-wl-summary {
	margin: 0;
	color: var(--petrascal-wl-muted);
	font-size: 15px;
	line-height: 1.5;
}

.petrascal-wl-summary b {
	color: var(--petrascal-wl-ink);
	font-weight: 600;
}

.petrascal-wl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* .tf-btn is 48px tall site-wide; the toolbar reads better a little tighter
   without changing the shared button. */
.petrascal-wl-actions .tf-btn {
	height: 44px;
	border: 0;
	font-size: 15px;
}

.petrascal-wl-actions .tf-btn.btn-border {
	border: 1px solid var(--petrascal-wl-line);
	background-color: var(--petrascal-wl-white);
	color: var(--petrascal-wl-ink);
}

.petrascal-wl-actions .tf-btn.btn-border:hover {
	border-color: var(--petrascal-wl-ink);
}

.petrascal-wl-actions .tf-btn[disabled] {
	opacity: 0.55;
	cursor: progress;
	pointer-events: none;
}

/* --- the grid --- */

.petrascal-wl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 28px 24px;
	align-items: start;
}

.petrascal-wl-grid[hidden] {
	display: none;
}

.petrascal-wl-item {
	position: relative;
	border-radius: var(--petrascal-wl-r);
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.35s ease,
		box-shadow 0.35s ease;
}

.petrascal-wl-item:hover {
	transform: translate3d(0, -4px, 0);
	box-shadow: var(--petrascal-wl-sh-2);
}

.petrascal-wl-item--leaving {
	transform: scale(0.92);
	opacity: 0;
	pointer-events: none;
}

/* --- the remove control --- */

.petrascal-wl-remove {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 12;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--petrascal-wl-line);
	border-radius: 999px;
	background-color: var(--petrascal-wl-white);
	color: var(--petrascal-wl-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--petrascal-wl-sh-1);
	transition: background-color 0.2s ease, color 0.2s ease,
		border-color 0.2s ease, transform 0.2s ease;
}

.petrascal-wl-remove span {
	display: block;
	margin-top: -2px;
}

.petrascal-wl-remove:hover,
.petrascal-wl-remove:focus-visible {
	border-color: var(--petrascal-wl-love);
	background-color: var(--petrascal-wl-love);
	color: var(--petrascal-wl-white);
	transform: scale(1.08);
}

.petrascal-wl-remove:focus-visible {
	outline: 2px solid var(--petrascal-wl-ink);
	outline-offset: 2px;
}

/* --- the empty state --- */

.petrascal-wl-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 56px 24px 60px;
	border: 1px solid var(--petrascal-wl-line);
	border-radius: var(--petrascal-wl-r-lg);
	background-color: var(--petrascal-wl-surface);
	text-align: center;
}

.petrascal-wl-empty[hidden] {
	display: none;
}

.petrascal-wl-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background-color: var(--petrascal-wl-white);
	color: var(--petrascal-wl-love);
	font-size: 28px;
	box-shadow: var(--petrascal-wl-sh-1);
}

.petrascal-wl-empty-title {
	margin: 0;
	color: var(--petrascal-wl-ink);
	font-size: 22px;
	line-height: 1.3;
}

.petrascal-wl-empty-copy {
	max-width: 42ch;
	margin: 0;
	color: var(--petrascal-wl-muted);
	font-size: 15px;
	line-height: 1.6;
}

.petrascal-wl-empty .tf-btn {
	margin-top: 6px;
}

/* ==========================================================================
   5. Responsive, down to 360px
   ========================================================================== */

@media (max-width: 991px) {
	.petrascal-wl-grid {
		grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
		gap: 24px 18px;
	}
}

@media (max-width: 767px) {
	.petrascal-wl-bar {
		flex-direction: column;
		align-items: stretch;
		padding: 14px 16px;
	}

	.petrascal-wl-actions .tf-btn {
		flex: 1 1 auto;
		width: auto;
	}

	.petrascal-wl-empty {
		padding: 44px 18px 48px;
	}

	.petrascal-wl-empty-title {
		font-size: 19px;
	}
}

@media (max-width: 575px) {
	/* Two columns stay useful all the way down: a wishlist is a page people
	   scan, and one enormous card per row turns it into endless scrolling. */
	.petrascal-wl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 12px;
	}

	.petrascal-wl-remove {
		width: 26px;
		height: 26px;
		font-size: 17px;
	}

	.petrascal-wl-toast {
		left: 16px;
		right: 16px;
		bottom: 88px; /* clear of the fixed mobile toolbar */
		max-width: none;
		transform: translate(0, 200%);
	}

	.petrascal-wl-toast[data-show="true"] {
		transform: translate(0, 0);
	}
}

@media (max-width: 379px) {
	.petrascal-wl-grid {
		gap: 16px 10px;
	}

	.petrascal-wl-actions {
		flex-direction: column;
	}

	.petrascal-wl-summary {
		font-size: 14px;
	}
}

/* ==========================================================================
   6. Motion and focus
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.petrascal-wl-item,
	.petrascal-wl-remove,
	.petrascal-wl-toast,
	.btn-icon-action.wishlist .icon-heart {
		transition-duration: 0.01ms;
	}

	.petrascal-wl-item:hover {
		transform: none;
	}

	.petrascal-wl-pop .icon-heart,
	.petrascal-wl-pop .kela-design-icon,
	.petrascal-wl-pop > svg {
		animation: none;
	}
}

.petrascal-wl-btn:focus-visible {
	outline: 2px solid var(--petrascal-wl-accent);
	outline-offset: 2px;
}