/* Aura Site Kit: wishlist, compare, toast. Styled by tokens; templates restyle via these classes. */
@layer aura {
	.aura-list-btn {
		display: inline-grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		padding: 0;
		border: var(--border);
		border-radius: var(--radius-full);
		background: var(--bg);
		color: var(--heading-color);
		cursor: pointer;
		transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition);
	}

	.aura-list-btn:hover { border-color: var(--heading-color); }
	.aura-list-btn:active { transform: scale(0.94); }
	.aura-list-btn.is-active { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
	.aura-list-btn--wishlist.is-active svg path { fill: currentColor; }

	.aura-list-count {
		position: relative;
		display: inline-grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		color: var(--heading-color);
		text-decoration: none;
	}

	.aura-list-count__num {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		min-inline-size: 1.15rem;
		block-size: 1.15rem;
		padding: 0 0.3rem;
		border-radius: var(--radius-full);
		background: var(--primary);
		color: var(--on-primary);
		font-size: 0.7rem;
		font-weight: 700;
		line-height: 1.15rem;
		text-align: center;
	}

	.aura-list-count__num.is-empty { display: none; }

	.aura-list-card { display: flex; flex-direction: column; gap: var(--gap-xs); }
	.aura-list-card__link { display: flex; flex-direction: column; gap: var(--gap-xs); color: inherit; text-decoration: none; }
	.aura-list-card__image { inline-size: 100%; aspect-ratio: var(--product-ratio); object-fit: var(--product-fit); border-radius: var(--image-radius); background: var(--bg-light); }
	.aura-list-card__title { font-size: var(--text-m); }
	.aura-list-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs); }
	.aura-list-card__remove { padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--text-s); text-decoration: underline; cursor: pointer; }
	.aura-list-card__remove:hover { color: var(--error); }

	.aura-list__empty { display: grid; justify-items: start; gap: var(--content-gap); padding-block: var(--section-s); }

	.aura-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.aura-compare { inline-size: 100%; min-inline-size: 36rem; border-collapse: collapse; }
	.aura-compare th,
	.aura-compare td { padding: var(--gap-xs); border-block-end: var(--border); text-align: start; vertical-align: top; }
	.aura-compare__label { inline-size: 9rem; color: var(--text-muted); font-weight: 500; }
	.aura-compare__product a { display: grid; gap: var(--gap-xxs); color: var(--heading-color); text-decoration: none; }
	.aura-compare__product img { inline-size: 100%; max-inline-size: 11rem; aspect-ratio: var(--product-ratio); object-fit: var(--product-fit); border-radius: var(--image-radius); }
	.aura-compare__name { font-weight: 600; }

	.aura-toast {
		position: fixed;
		z-index: 9999;
		inset-inline: 1rem;
		inset-block-end: 1rem;
		max-inline-size: 26rem;
		margin-inline: auto;
		padding: 0.8rem 1rem;
		border-radius: var(--radius);
		background: var(--bg-dark);
		color: var(--on-bg-dark);
		box-shadow: var(--shadow-l);
		font-size: var(--text-s);
		opacity: 0;
		transform: translateY(1rem);
		pointer-events: none;
		transition: opacity var(--transition), transform var(--transition);
	}

	.aura-toast.is-visible { opacity: 1; transform: none; pointer-events: auto; }
	.aura-toast a { color: inherit; font-weight: 700; }
}