/* ============================================================
   QUART'Z — MINHA-CONTA.CSS
   Dashboard do cliente logado
   ============================================================ */

body { padding-top: 64px; }

/* ── CABEÇALHO DA CONTA ──────────────────────────────────────── */

.conta-header {
  padding: 36px 1.2rem 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid var(--stone);
}

.conta-header__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amadeirado);
  border: 1px solid var(--amadeirado);
  padding: 4px 12px;
  margin-bottom: 16px;
}

.conta-header__nome {
  font-family: var(--font-title);
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 400;
  color: var(--void);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 6px;
}

.conta-header__sub {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.conta-header__vip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amadeirado);
  border: 1px solid var(--amadeirado);
  padding: 5px 14px;
  margin-bottom: 8px;
}

.conta-header__membro {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.05em;
}

/* ── STATS (pedidos / desejos / exclusivos) ──────────────────── */

.conta-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--stone);
}

.conta-stat {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-right: 1px solid var(--stone);
}
.conta-stat:last-child { border-right: none; }

.conta-stat__num {
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 400;
  color: var(--void);
  line-height: 1;
}

.conta-stat__label {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ── SEÇÃO GENÉRICA ──────────────────────────────────────────── */

.conta-secao {
  padding: 28px 1.2rem 0;
}

.conta-secao__titulo {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--void);
  margin-bottom: 12px;
}

/* ── ACESSO RÁPIDO ───────────────────────────────────────────── */

.acesso-rapido {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--stone);
}

.acesso-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--stone);
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
.acesso-item:hover .acesso-item__titulo { color: var(--amadeirado); }

.acesso-item__icone {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ash);
  font-size: 16px;
  flex-shrink: 0;
}

.acesso-item__info { flex: 1; }

.acesso-item__titulo {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.03em;
  transition: color 0.2s;
}

.acesso-item__sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

.acesso-item__seta {
  color: var(--stone);
  font-size: 11px;
  flex-shrink: 0;
}

/* ── ÚLTIMO PEDIDO ───────────────────────────────────────────── */

.ultimo-pedido {
  border: 1px solid var(--stone);
  padding: 16px;
  margin-top: 12px;
}

.ultimo-pedido__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ultimo-pedido__num {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--void);
  letter-spacing: 0.04em;
}

.ultimo-pedido__status {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--void);
  color: var(--void);
}
.ultimo-pedido__status--transito { color: var(--amadeirado); border-color: var(--amadeirado); }
.ultimo-pedido__status--entregue { background: var(--void); color: var(--washi); }
.ultimo-pedido__status--novo     { color: var(--amadeirado); border-color: var(--amadeirado); }

.ultimo-pedido__produto {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--stone);
}

.ultimo-pedido__img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
  background: #F0EBE3;
}

.ultimo-pedido__nome {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.03em;
}

.ultimo-pedido__meta {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.ultimo-pedido__preco {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--amadeirado);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.ultimo-pedido__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.ultimo-pedido__data {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.04em;
}

.ultimo-pedido__link {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  color: var(--void);
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 1px solid var(--amadeirado);
  padding-bottom: 1px;
  transition: color 0.2s;
}
.ultimo-pedido__link:hover { color: var(--amadeirado); }

/* ── LISTA DE DESEJOS — scroll horizontal ────────────────────── */

.desejos-titulo {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--void);
  text-align: center;
  margin-bottom: 16px;
}

.desejos-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.desejos-scroll::-webkit-scrollbar { display: none; }

/* Card de desejo — layout catálogo adaptado horizontal */
.desejo-card {
  flex-shrink: 0;
  width: 140px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.desejo-card__img-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  overflow: hidden;
  background: #F0EBE3;
  flex-shrink: 0;
}

.desejo-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.desejo-card:hover .desejo-card__img-wrap img { transform: scale(1.04); }

.desejo-card__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--font-body);
  font-size: 6px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 3px 6px;
  background: var(--void);
  color: var(--washi);
  line-height: 1;
}
.desejo-card__badge--novo { background: var(--amadeirado); }

.desejo-card__corpo {
  padding: 10px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.desejo-card__meta {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 200;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 4px;
}

.desejo-card__nome {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--void);
  line-height: 1.6;
  min-height: calc(1.6em * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.desejo-card__sep {
  width: 20px;
  height: 1px;
  background: var(--stone);
  margin: 8px auto;
}

.desejo-card__preco {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--void);
  letter-spacing: 0.06em;
}

.desejo-card__parcela {
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.desejos-ver-todos {
  display: block;
  text-align: right;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: var(--ash);
  margin-top: 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--amadeirado);
  width: fit-content;
  margin-left: auto;
  padding-bottom: 1px;
  transition: color 0.2s;
}
.desejos-ver-todos:hover { color: var(--void); }

/* ── SAIR DA CONTA ───────────────────────────────────────────── */

.conta-sair {
  display: flex;
  justify-content: center;
  padding: 36px 1.2rem 40px;
  border-top: 1px solid var(--stone);
  margin-top: 40px;
}

.conta-sair__link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 200;
  color: var(--ash);
  letter-spacing: 0.06em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.conta-sair__link:hover { color: var(--void); }

/* ============================================================
   DESKTOP — MINHA CONTA (≥1024px)
   ============================================================ */
@media (min-width: 1024px) {

  .conta-header {
    max-width: 900px;
    margin: 0 auto;
    padding: 36px 3rem 28px;
  }

  .conta-stats {
    max-width: 500px;
    margin: 0 auto;
  }
  .conta-stat { padding: 32px 0; }
  .conta-stat__num { font-size: 2.4rem; }

  .conta-secao {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 3rem 0;
  }

  .acesso-rapido {
    flex-direction: row;
    gap: 0;
    border: 1px solid var(--stone);
    border-top: none;
  }
  .acesso-item {
    flex: 1;
    border-bottom: none;
    border-right: 1px solid var(--stone);
    padding: 20px 16px;
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  .acesso-item:last-child { border-right: none; }
  .acesso-item__seta { display: none; }
  .acesso-item__icone { font-size: 20px; }

  .ultimo-pedido {
    max-width: 600px;
  }

  .desejos-scroll {
    gap: 16px;
  }
  .desejo-card { width: 160px; }
  .desejo-card__img-wrap { width: 160px; height: 160px; }

  .conta-sair {
    max-width: 900px;
    margin: 40px auto 0;
  }
}