.estampa-box {
display: grid;
gap: 0.45rem;
}
.estampa-fotos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
gap: 0.5rem;
}
.estampa-foto {
position: relative;
display: block;
border: 2px solid var(--line-pink-8);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
background: var(--surface-pink-9);
}
.estampa-foto input {
position: absolute;
opacity: 0;
}
.estampa-foto img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: contain;
}
.estampa-foto:has(input:checked) {
border-color: var(--line-green-3);
box-shadow: 0 0 0 3px var(--surface-green-9);
}
.estampa-foto:has(input:checked)::after {
content: '✅';
position: absolute;
top: 4px;
right: 4px;
font-size: 1rem;
}
.estampa-foto:has(input:focus-visible) {
outline: 3px solid var(--line-pink-7);
outline-offset: 2px;
}
.estampa-escolhida {
display: flex;
align-items: center;
gap: 0.6rem;
}
.thumb-estampa {
width: 56px;
height: 56px;
flex: none;
object-fit: contain;
border-radius: 10px;
border: 1.5px solid var(--line-pink-8);
background: var(--surface-pink-9);
}
.colecao-painel {
display: grid;
gap: 0.6rem;
margin: 1rem 0;
}
.colecao-painel h2 {
margin: 0;
}
.colecao-grade {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.8rem;
}
.colecao-arte,
.colecao-peca {
display: grid;
gap: 0.35rem;
padding: 0.5rem;
border: 2px solid var(--line-pink-8);
border-radius: 16px;
background: var(--surface-neutral-9);
font: inherit;
text-align: left;
color: inherit;
cursor: pointer;
}
.colecao-arte:hover,
.colecao-peca:hover {
border-color: var(--line-pink-7);
}
.colecao-arte:focus-visible,
.colecao-peca:focus-visible {
outline: 3px solid var(--line-pink-7);
outline-offset: 2px;
}
.colecao-arte img,
.colecao-peca img,
.colecao-escolhida img {
width: 100%;
aspect-ratio: 1;
object-fit: contain;
border-radius: 12px;
background: var(--surface-pink-9);
}
.colecao-frase {
display: grid;
place-items: center;
aspect-ratio: 1;
padding: 0.8rem;
border-radius: 12px;
background: var(--surface-yellow-9);
font-style: italic;
text-align: center;
overflow: hidden;
}
.colecao-topo {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.5rem;
justify-items: center;
}
.colecao-escolhida {
width: min(100%, 560px);
}
.colecao-escolhida img {
max-height: 60vh;
}
.estampa-escolhida img {
width: min(100%, 260px);
height: auto;
aspect-ratio: 1;
flex: none;
object-fit: contain;
border-radius: 12px;
border: 1.5px solid var(--line-pink-8);
background: var(--surface-pink-9);
}
.estampa-escolhida {
flex-wrap: wrap;
}
.colecao-artes {
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.colecao-emoji {
display: grid;
place-items: center;
width: 100%;
height: 100%;
font-size: 2.6rem;
}
.linha-estampa {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.linha-estampa img {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 8px;
border: 1px solid var(--line-pink-8);
background: var(--surface-pink-9);
}
.estampa-modos {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.estampa-modo {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.8rem;
border: 1.5px solid var(--line-pink-8);
border-radius: 999px;
background: var(--surface-neutral-9);
font-weight: 700;
cursor: pointer;
}
.estampa-modo input {
position: absolute;
opacity: 0;
}
.estampa-modo:has(input:checked) {
border-color: var(--line-green-3);
background: var(--surface-green-9);
color: var(--ink-green-2);
}
.estampa-modo:has(input:focus-visible) {
outline: 3px solid var(--line-pink-7);
outline-offset: 2px;
}
.estampa-nota {
display: grid;
gap: 0.25rem;
}
button.colecao-escolhida {
position: relative;
display: block;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
}
.colecao-lupa {
position: absolute;
right: 6px;
bottom: 6px;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface-neutral-9);
box-shadow: 0 2px 8px rgba(122, 47, 85, 0.2);
}
dialog.dialog.visor-janela {
width: 96vw;
max-width: 96vw;
max-height: 96vh;
}
.colecao-escolhida .colecao-frase,
.visor-frase {
font-size: 1.5rem;
line-height: 1.4;
}
.visor {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.5rem;
}
.visor-foto {
grid-column: 2;
margin: 0;
display: grid;
place-items: center;
touch-action: pan-y;
}
.visor-foto img {
width: 100%;
height: auto;
max-height: 80vh;
max-height: min(80vh, calc(100dvh - 18rem));
object-fit: contain;
border-radius: 14px;
}
.visor-frase {
width: min(80vw, 520px);
font-size: 1.2rem;
}
.visor-seta {
width: 48px;
height: 48px;
border: 1.5px solid var(--line-pink-8);
border-radius: 50%;
background: var(--surface-neutral-9);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
}
.visor-seta:focus-visible {
outline: 3px solid var(--line-pink-7);
outline-offset: 2px;
}
.visor-conta {
text-align: center;
margin: 0.4rem 0 0;
}
@media (max-width: 640px) {
.visor {
grid-template-columns: 1fr;
}
.visor-foto {
grid-column: 1;
}
.visor-seta {
position: absolute;
top: 45%;
z-index: 2;
}
.visor-seta.antes {
left: 10px;
}
.visor-seta.depois {
right: 10px;
}
.visor-foto img {
max-height: 62vh;
}
}
.foto-lupa {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 3;
display: grid;
place-items: center;
width: 42px;
height: 42px;
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.1rem;
cursor: zoom-in;
}
.foto-lupa:focus-visible {
outline: 3px solid var(--line-pink-7);
outline-offset: 2px;
}