/* Página do carrinho: a lista de itens (foto, dados, quantidade com "−" e "+", subtotal do item e "Remover") e o
   resumo, com "Indisponível", o aviso da quantidade reduzida e "Finalizar compra" desabilitado. Na página de produto:
   "Adicionar ao carrinho", "Esgotado" desabilitado e o painel lateral (`<dialog>`). Usa as variáveis de loja.css; de
   360 a 1.920 px sem rolagem horizontal. */

.carrinho-pagina {
  max-width: 60rem;
  margin: 0 auto;
}

.carrinho-pagina h1 {
  margin: 0 0 var(--espaco-4);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  line-height: 1.2;
}

.itens-do-carrinho {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Celular: foto e dados lado a lado; quantidade, subtotal e "Remover" na linha de baixo. */
.item-do-carrinho {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  grid-template-areas:
    "foto dados"
    "quantidade quantidade"
    "subtotal remover";
  gap: var(--espaco-2) var(--espaco-3);
  align-items: center;
  padding: var(--espaco-3) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.item-foto {
  grid-area: foto;
  display: block;
  width: 5rem;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--cor-rodape);
}

.item-dados {
  grid-area: dados;
  min-width: 0;
}

.item-dados p {
  margin: 0 0 var(--espaco-1);
}

.item-nome {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.item-cor {
  color: var(--cor-texto-suave);
}

/* Quantidade reduzida ao estoque na leitura ("Só temos <N> unidades desta cor."). */
.item-aviso {
  font-size: 0.875rem;
  color: var(--cor-erro);
}

.item-quantidade {
  grid-area: quantidade;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
}

.item-quantidade input {
  width: 4rem;
  min-height: var(--alvo-minimo);
  padding: 0 var(--espaco-2);
  font: inherit;
  text-align: center;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-texto-suave);
  border-radius: var(--raio);
}

/* Os botões do carrinho: quantidade, "Remover" do item, e "Aplicar" e "Remover" do cupom (F06). */
.botao-quantidade,
.item-remover button,
.carrinho-cupom-form button,
.carrinho-cupom-remover button {
  min-width: var(--alvo-minimo);
  min-height: var(--alvo-minimo);
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-texto-suave);
  border-radius: var(--raio);
  cursor: pointer;
}

.botao-quantidade {
  font-size: 1.25rem;
  line-height: 1;
}

.item-subtotal {
  grid-area: subtotal;
  margin: 0;
  font-weight: 600;
}

/* Estoque 0: o texto no lugar do subtotal do item (fora do subtotal do carrinho). */
.item-indisponivel {
  color: var(--cor-erro);
  white-space: nowrap;
}

.item-remover {
  grid-area: remover;
  justify-self: end;
}

.item-remover button {
  padding: 0 var(--espaco-3);
}

.carrinho-resumo {
  margin: var(--espaco-4) 0 0;
  text-align: right;
}

.carrinho-resumo p {
  margin: 0 0 var(--espaco-2);
}

.carrinho-total {
  font-size: 1.25rem;
}

.carrinho-resumo .botao {
  margin-top: var(--espaco-2);
}

.carrinho-resumo button.botao {
  font: inherit;
  font-weight: 600;
  border: 0;
}

/* Com item indisponível: o botão desabilitado e a explicação logo abaixo. */
.carrinho-resumo button.botao:disabled {
  color: var(--cor-texto-suave);
  background: var(--cor-borda);
  cursor: not-allowed;
}

/* O cupom (F06): o campo com "Aplicar", ou a linha do cupom aplicado com as restrições e "Remover". */
.carrinho-cupom-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 var(--espaco-3);
}

.carrinho-cupom-form label {
  flex-basis: 100%;
}

.carrinho-cupom-form input {
  flex: 1 1 10rem;
  max-width: 16rem;
  min-height: var(--alvo-minimo);
  padding: 0 var(--espaco-2);
  font: inherit;
  text-transform: uppercase;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-texto-suave);
  border-radius: var(--raio);
}

.carrinho-cupom-form button,
.carrinho-cupom-remover button {
  padding: 0 var(--espaco-3);
}

.carrinho-cupom-aplicado {
  margin: 0 0 var(--espaco-3);
}

.carrinho-cupom-restricoes {
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}

.finalizar-explicacao {
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}

.carrinho-vazio {
  font-size: 1.125rem;
  color: var(--cor-texto-suave);
}

/* Tablet e computador: cada item numa linha. */
@media (min-width: 640px) {
  .item-do-carrinho {
    grid-template-columns: 6rem minmax(0, 1fr) auto 7rem auto;
    grid-template-areas: "foto dados quantidade subtotal remover";
  }

  .item-foto {
    width: 6rem;
  }

  .item-subtotal {
    text-align: right;
  }
}

/* Página de produto: os botões da área de compra (o `.botao` do `loja.css` é feito para links). */
.compra .botao,
.painel-botoes .botao {
  justify-content: center;
  font: inherit;
  font-weight: 600;
  border: 0;
  cursor: pointer;
}

.compra .botao {
  margin-top: var(--espaco-3);
}

.compra .botao-esgotado:disabled {
  color: var(--cor-texto-suave);
  background: var(--cor-borda);
  cursor: not-allowed;
}

/* Painel lateral: `<dialog>` encostado à direita, na altura da tela; no celular, a tela inteira. */
.painel-do-carrinho {
  width: 100%;
  max-width: 24rem;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: var(--espaco-4) var(--espaco-3);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 0;
  overflow-y: auto;
}

.painel-do-carrinho[open] {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

.painel-do-carrinho::backdrop {
  background: rgb(0 0 0 / 50%);
}

/* O `hidden` do item e do subtotal na recusa vence o `display` das regras abaixo. */
.painel-do-carrinho [hidden] {
  display: none;
}

.painel-titulo {
  margin: 0;
  font-size: 1.25rem;
}

.painel-item {
  display: flex;
  gap: var(--espaco-3);
  align-items: flex-start;
}

.painel-foto {
  flex: none;
  width: 6rem;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--cor-rodape);
}

.painel-dados {
  min-width: 0;
}

.painel-dados p,
.painel-subtotal,
.painel-erro {
  margin: 0 0 var(--espaco-1);
}

.painel-nome {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.painel-cor,
.painel-quantidade {
  color: var(--cor-texto-suave);
}

.painel-subtotal {
  font-size: 1.125rem;
}

.painel-erro {
  padding: var(--espaco-2) var(--espaco-3);
  color: var(--cor-erro);
  background: var(--cor-erro-fundo);
  border-radius: var(--raio);
}

.painel-botoes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}