/* Painel da loja: o mesmo design system do site (tokens.css), pensado primeiro para o celular da dona. */
.painel { min-height: 100svh; background: var(--noite); }

.p-topo {
  position: sticky; top: 0; z-index: var(--z-topo);
  display: flex; align-items: center; gap: var(--e-12);
  min-height: 60px; padding: var(--e-8) var(--margem);
  background: rgba(15, 13, 11, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha-fraca);
}
.p-topo__marca { color: var(--marfim); text-decoration: none; }
.p-topo__marca .logo__nome { font-size: var(--t-16); }
.p-topo__nome { flex: 1; font-size: var(--t-12); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--taupe); }
.p-topo__sair { min-height: 40px; padding: 0 var(--e-12); color: var(--champanhe); font-size: var(--t-14); }

.p-conteudo { width: min(720px, 100%); margin: 0 auto; padding: var(--e-24) var(--margem) var(--e-96); }
.p-carregando { color: var(--taupe); text-align: center; padding: var(--e-64) 0; }
.p-titulo { font-size: var(--t-38); line-height: 1.05; }
.p-cartao { display: grid; gap: var(--e-16); max-width: 440px; margin: var(--e-32) auto 0; padding: var(--e-32) var(--e-24); background: var(--grafite); border: 1px solid var(--linha-fraca); border-radius: var(--raio); }
.p-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-12); margin-bottom: var(--e-24); }
.p-cabeca .p-titulo { flex: 1; }
.p-voltar { display: grid; place-items: center; width: var(--alvo); height: var(--alvo); margin-left: calc(var(--e-12) * -1); color: var(--champanhe); }
.p-voltar .icone { width: 24px; height: 24px; }

/* formulários */
.p-form { display: grid; gap: var(--e-24); }
.p-login .p-form { gap: var(--e-16); }
.campo textarea { padding: var(--e-12); background: var(--noite); border: 1px solid var(--linha-fraca); border-radius: var(--raio); resize: vertical; font: inherit; color: inherit; }
.campo textarea:focus { border-color: var(--champanhe); outline: none; }
.campo input, .campo textarea { font-size: 16px; } /* sem zoom automático no iPhone */
.p-bloco { display: grid; gap: var(--e-16); margin: 0; padding: var(--e-24) 0 0; border: 0; border-top: 1px solid var(--linha-fraca); }
.p-bloco > legend { float: left; width: 100%; padding: 0; color: var(--champanhe); }
.p-bloco > legend + * { clear: both; }
.p-bloco > legend.sr-only { float: none; width: 1px; } /* a legenda escondida não pode ter 100% de largura (alargava a página no celular) */
.p-dica { font-size: var(--t-14); margin-top: calc(var(--e-8) * -1); }
.p-erro { padding: var(--e-12) var(--e-16); border-radius: var(--raio); border: 1px solid rgba(232, 150, 130, .5); background: rgba(232, 150, 130, .08); color: var(--blush); font-size: var(--t-14); }
.p-seg3 { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.p-seg4 { grid-template-columns: repeat(4, 1fr); }

/* fotos: cada uma aparece no mesmo palco do site (arco, facho e piso) */
.p-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-16); }
.p-foto { display: grid; gap: var(--e-8); align-content: start; }
.p-foto__palco {
  position: relative; aspect-ratio: 3 / 4.4; overflow: hidden; border-radius: var(--arco);
  background:
    radial-gradient(ellipse 60% 30% at 50% 95%, rgba(201, 164, 106, .22), transparent 70%),
    linear-gradient(to bottom, rgba(201, 164, 106, .14), transparent 70%) center top / 46% 100% no-repeat,
    var(--grafite);
  border: 1px solid var(--linha);
}
.p-foto__palco::after { content: ''; position: absolute; inset: auto 0 0; height: 9%; background: rgba(0, 0, 0, .35); }
.p-foto__palco img { position: absolute; z-index: 1; left: 50%; bottom: 5%; height: 86%; width: auto; max-width: 94%; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.p-foto__palco img.corta { bottom: 0; height: 88%; }
.p-foto__vazio { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--e-4); text-align: center; font-family: var(--fonte-display); font-size: var(--t-28); color: var(--taupe); }
.p-foto__vazio small { font-family: var(--fonte-texto); font-size: var(--t-12); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; }
.p-foto--processando .p-foto__palco::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, transparent 30%, rgba(201, 164, 106, .18) 50%, transparent 70%) -100% 0 / 200% 100%; animation: brilho 1.4s linear infinite; }
.p-foto__estado { min-height: 1.4em; font-size: var(--t-12); color: var(--taupe); text-align: center; }
.p-foto__estado.erro { color: var(--blush); }
.p-foto__bt { min-height: 44px; padding: 0 var(--e-12); font-size: var(--t-12); cursor: pointer; }
.p-foto__bt:focus-within { outline: 2px solid var(--champanhe); outline-offset: 2px; }
.p-foto__tirar { justify-self: center; font-size: var(--t-12); color: var(--taupe); }
@keyframes brilho { to { background-position: 100% 0; } }

/* tamanhos */
.p-tamanhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e-12); }
.p-tam { display: flex; align-items: center; justify-content: space-between; gap: var(--e-8); padding: var(--e-8) var(--e-8) var(--e-8) var(--e-16); border: 1px solid var(--linha-fraca); border-radius: var(--pilula); }
.p-tam__nome { font-weight: 500; }
.p-tam--zero .p-tam__nome { color: var(--taupe); text-decoration: line-through; }

/* chaves liga/desliga */
.p-chaves { gap: var(--e-8); }
.p-chave { display: flex; align-items: center; justify-content: space-between; gap: var(--e-16); min-height: var(--alvo); cursor: pointer; }
.p-chave input { appearance: none; position: relative; flex: none; width: 48px; height: 28px; margin: 0; border-radius: var(--pilula); background: var(--grafite-2); border: 1px solid var(--linha-fraca); cursor: pointer; transition: background var(--d-controle) var(--curva); }
.p-chave input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--taupe); transition: transform var(--d-controle) var(--curva), background var(--d-controle) var(--curva); }
.p-chave input:checked { background: rgba(201, 164, 106, .3); border-color: var(--champanhe); }
.p-chave input:checked::after { transform: translateX(20px); background: var(--champanhe); }
.p-chave input:focus-visible { outline: 2px solid var(--champanhe); outline-offset: 2px; }
.p-chave span { order: -1; }

.p-acoes { display: grid; gap: var(--e-16); justify-items: center; }
.p-excluir { min-height: var(--alvo); padding: 0 var(--e-16); color: var(--blush); font-size: var(--t-14); text-decoration: underline; text-underline-offset: 4px; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* lista de peças */
.p-lista { display: grid; gap: var(--e-12); padding: 0; margin: 0; list-style: none; }
.p-item { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--e-16); padding: var(--e-8) var(--e-12) var(--e-8) var(--e-8); background: var(--grafite); border: 1px solid var(--linha-fraca); border-radius: var(--raio); }
.p-item img { width: 64px; height: 88px; object-fit: cover; border-radius: 999px 999px 6px 6px; }
.p-item__nome { font-size: var(--t-16); line-height: 1.25; }
.p-item__meta { display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-12); margin-top: var(--e-4); font-size: var(--t-12); color: var(--taupe); }
.p-item__selo { color: var(--champanhe); letter-spacing: .08em; text-transform: uppercase; }
.p-item__selo--oculta { color: var(--taupe); }
.p-item__acoes { display: grid; gap: var(--e-4); justify-items: end; }
.p-item__acoes a, .p-item__acoes button { min-height: 36px; font-size: var(--t-14); color: var(--champanhe); text-decoration: none; }
.p-item__acoes a { color: var(--taupe); font-size: var(--t-12); }
.p-vazio { display: grid; gap: var(--e-12); padding: var(--e-48) var(--e-24); text-align: center; border: 1px dashed var(--linha); border-radius: var(--raio); }
.p-vazio .display { font-size: var(--t-28); }

.p-conta { margin-top: var(--e-32); text-align: center; font-size: var(--t-12); color: var(--taupe); }
.p-conta .link-sublinhado { font-size: var(--t-12); color: var(--champanhe); }
[data-form-senha] .link-sublinhado { justify-self: center; font-size: var(--t-14); color: var(--taupe); }

/* retoque do recorte (tela cheia) */
.retocando { overflow: hidden; }
.p-retoque { position: fixed; inset: 0; height: 100dvh; z-index: var(--z-camada); display: grid; grid-template-rows: auto 1fr auto; background: var(--noite); }
.p-retoque__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-12); padding: var(--e-8) var(--margem); padding-top: max(var(--e-8), env(safe-area-inset-top)); border-bottom: 1px solid var(--linha-fraca); }
.p-retoque__titulo { font-size: var(--t-12); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--taupe); }
.p-retoque__texto { min-height: var(--alvo); color: var(--marfim); font-size: var(--t-14); }
.p-retoque__pronto { min-height: 40px; padding: 0 var(--e-24); }
.p-retoque__area { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; background: repeating-conic-gradient(#1a1714 0 25%, #221e1a 0 50%) 0 0 / 24px 24px; }
.p-retoque__area--zoom { overflow: auto; place-items: start; }
.p-retoque__area canvas { display: block; user-select: none; -webkit-user-select: none; }
.p-retoque__ferramentas { display: grid; gap: var(--e-12); padding: var(--e-12) var(--margem); padding-bottom: max(var(--e-12), env(safe-area-inset-bottom)); border-top: 1px solid var(--linha-fraca); }
.p-retoque__modos { grid-template-columns: repeat(3, 1fr); }
.p-retoque__linha { display: flex; align-items: center; gap: var(--e-16); }
.p-retoque__tam { flex: 1; display: flex; align-items: center; gap: var(--e-12); }
.p-retoque__tam input { flex: 1; accent-color: var(--champanhe); }
.p-retoque__bts { display: flex; gap: var(--e-4); }
.p-retoque__bts .qtd__bt { width: 44px; height: 44px; border: 1px solid var(--linha-fraca); border-radius: 50%; }
.p-retoque__dica { font-size: var(--t-12); }
.p-foto__ajustar { justify-self: center; font-size: var(--t-12); color: var(--champanhe); }

@media (max-width: 420px) {
  .p-titulo { font-size: var(--t-28); }
  .p-cabeca .btn { padding: 0 var(--e-16); }
}