.product-card {
position: relative;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.product-card:hover,
.product-card:focus-within {
transform: translateY(-4px);
border-color: var(--line-pink-8);
box-shadow: 0 14px 30px var(--line-pink-6-veil);
}
.store-main.neuro .product-card:hover,
.store-main.neuro .product-card:focus-within {
border-color: var(--line-green-7);
box-shadow: 0 14px 30px var(--line-green-3-veil);
}
.product-card .price {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.75rem;
border-radius: 999px;
background: var(--surface-green-9);
}
.product-sticker {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 1;
padding: 0.25rem 0.7rem;
border: 2px solid var(--line-neutral-9);
border-radius: 999px;
background: var(--surface-pink-9);
color: var(--ink-pink-3);
font-size: 0.8rem;
font-weight: 700;
box-shadow: 0 4px 10px var(--line-pink-4-veil);
transform: rotate(-4deg);
}
.product-sticker.theme {
left: auto;
right: 0.75rem;
background: var(--surface-green-9);
color: var(--ink-green-2);
transform: rotate(4deg);
}
.chip.theme {
border-color: var(--line-green-3);
font-weight: 700;
}
.product-sticker.soon {
top: auto;
bottom: 0.9rem;
left: auto;
right: 0.75rem;
background: var(--surface-yellow-9);
color: var(--ink-amber-2);
transform: rotate(3deg);
}
.chip .chip-emoji {
margin-right: 0.3rem;
}
.chip:hover {
border-color: var(--line-pink-7);
}
.benefits {
position: relative;
border-bottom: 0;
padding-bottom: 1.8rem;
}
.benefits::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 12px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6 T36 6 T48 6' fill='none' stroke='%23f2a7c8' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='6' r='1.6' fill='%237fbf95'/%3E%3C/svg%3E")
repeat-x center / 48px 12px;
opacity: 0.9;
}
.store-main .section-title h2::after {
content: ' ✿';
color: var(--ink-pink-6);
}
.store-main.neuro .section-title h2::after {
content: ' ∞';
color: var(--surface-green-3);
font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.product-card,
.product-card:hover,
.product-card:focus-within {
transition: none;
transform: none;
}
.product-sticker {
transform: none;
}
}