.fav-coracao {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1.5px solid var(--line-pink-8);
border-radius: 50%;
background: var(--surface-neutral-9);
box-shadow: 0 3px 10px rgba(122, 47, 85, 0.18);
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fav-coracao:hover {
transform: scale(1.1);
}
.fav-coracao.on {
border-color: var(--line-pink-7);
background: var(--surface-pink-9);
}
.fav-coracao:focus-visible {
outline: 3px solid var(--line-pink-7);
outline-offset: 2px;
}
@media (pointer: coarse) {
.fav-coracao {
width: 44px;
height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.fav-coracao {
transition: none;
}
.fav-coracao:hover {
transform: none;
}
}
.fav-nota {
color: var(--ink-pink-3);
font-weight: 700;
}
.fav-cliente summary {
font-weight: 800;
color: var(--ink-pink-3);
cursor: pointer;
}
.fav-grade {
list-style: none;
margin: 0.5rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 0.6rem;
}
.fav-grade li {
display: grid;
gap: 0.25rem;
padding: 0.3rem;
border: 1.5px solid var(--line-pink-8);
border-radius: 12px;
background: var(--surface-neutral-9);
}
.fav-grade img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 8px;
}
.fav-grade span {
display: grid;
font-size: 11pt;
font-weight: 700;
}
.fav-grade small {
font-weight: 400;
color: var(--ink-neutral-3);
}