.temas-topo {
white-space: nowrap;
}
.temas-barra {
display: grid;
gap: 0.55rem;
margin: 0 0 1rem;
padding: 0.9rem 1rem;
border: 1.5px solid var(--line-green-7);
border-radius: 20px;
background: var(--surface-green-9);
}
.temas-rotulo {
margin: 0;
font-weight: 800;
color: var(--ink-green-2);
}
.temas-lista,
.foto-temas {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.tema-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 42px;
padding: 0.4rem 1rem;
border: 1.5px solid var(--line-green-7);
border-radius: 999px;
background: var(--surface-neutral-9);
color: var(--ink-green-2);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.tema-pill.on {
border-color: var(--line-green-2);
background: var(--surface-green-2);
color: var(--ink-neutral-9);
}
.tema-pill:focus-visible,
.tema-cartao:focus-visible {
outline: 3px solid var(--line-pink-7);
outline-offset: 2px;
}
.tema-ativo {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding-top: 0.5rem;
border-top: 1px dashed var(--line-green-7);
color: var(--ink-green-2);
}
.temas-grade {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.8rem;
margin: 0.8rem 0;
}
.tema-cartao {
display: grid;
gap: 0.25rem;
padding: 0.5rem;
border: 1.5px solid var(--line-pink-8);
border-radius: 18px;
background: var(--surface-neutral-9);
color: var(--ink-pink-3);
font: inherit;
text-align: left;
cursor: pointer;
}
.tema-cartao.on {
border-color: var(--line-green-2);
background: var(--surface-green-9);
}
.tema-cartao figure {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 12px;
background: var(--surface-pink-9);
}
.tema-cartao img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--fx, 50%) var(--fy, 50%);
transform: scale(var(--fz, 1));
transform-origin: var(--fx, 50%) var(--fy, 50%);
}
.tema-cartao small {
color: var(--ink-neutral-3);
}
.foto-temas .tema-pill {
min-height: 38px;
padding: 0.3rem 0.8rem;
font-size: 0.9rem;
}
.card-seta {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 36px;
height: 36px;
margin-top: -18px;
border: 1.5px solid var(--line-pink-8);
border-radius: 50%;
background: var(--surface-neutral-9);
color: var(--ink-pink-3);
font: inherit;
font-size: 1.3rem;
font-weight: 800;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 6px rgba(61, 27, 52, 0.18);
}
.card-seta.antes {
left: 8px;
}
.card-seta.depois {
right: 8px;
}
.card-seta:focus-visible {
outline: 3px solid var(--line-pink-7);
outline-offset: 2px;
}
.card-contador {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 2;
padding: 0.1rem 0.55rem;
border-radius: 999px;
background: var(--surface-neutral-9);
color: var(--ink-neutral-3);
font-size: 0.78rem;
font-weight: 700;
}
@media (pointer: coarse) {
.card-seta {
width: 42px;
height: 42px;
margin-top: -21px;
}
}
.colecoes {
display: grid;
gap: 0.55rem;
margin: 0 0 1rem;
}
.colecoes-lista {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.7rem;
}
.colecao-cartao {
display: grid;
gap: 0.2rem;
padding: 0.45rem;
border: 1.5px solid var(--line-pink-8);
border-radius: 18px;
background: var(--surface-neutral-9);
color: var(--ink-pink-3);
font: inherit;
text-align: left;
cursor: pointer;
}
.colecao-cartao.on {
border-color: var(--line-green-2);
background: var(--surface-green-9);
color: var(--ink-green-2);
}
.colecao-cartao figure {
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 12px;
background: var(--surface-pink-9);
}
.colecao-cartao img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--fx, 50%) var(--fy, 50%);
transform: scale(var(--fz, 1));
transform-origin: var(--fx, 50%) var(--fy, 50%);
}
.colecao-cartao small {
color: var(--ink-neutral-3);
}
.colecao-cartao:focus-visible {
outline: 3px solid var(--line-pink-7);
outline-offset: 2px;
}
.product-card figure::before,
.preview-frame::before {
content: '';
position: absolute;
inset: -24px;
background: var(--fundo, none) center / cover no-repeat;
filter: blur(18px) saturate(1.2);
opacity: 0.85;
}
.product-card figure img {
position: relative;
z-index: 1;
object-fit: contain;
}
.product-card .product-icon,
.product-card .product-sticker {
z-index: 2;
}
.preview-frame {
position: relative;
background: var(--surface-pink-9);
}
.piece-detail .image-preview {
position: relative;
z-index: 1;
object-fit: contain;
}