/* ---------------------------------------------------------------
 * Loja — carrinho, conta do cliente, checkout
 * Complementa assets/css/main.css. Reaproveita a paleta do site:
 *   marrom escuro #2c1a0e · âmbar #6b3d1e · destaque #eb5e28
 * --------------------------------------------------------------- */

:root {
  --loja-escuro:  #2c1a0e;
  --loja-medio:   #6b3d1e;
  --loja-destaque:#eb5e28;
  --loja-suave:   #f5f0eb;
  --loja-borda:   #e8ddd2;
  --loja-ok:      #27ae60;
  --loja-erro:    #e74c3c;
}

/* ---------- Cartão genérico da loja ---------- */
.loja-card {
  background: #fff;
  border: 1px solid var(--loja-borda);
  border-radius: 14px;
  padding: 28px;
}
.loja-card + .loja-card { margin-top: 20px; }

.loja-card-titulo {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--loja-escuro);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--loja-borda);
  display: flex;
  align-items: center;
  gap: 10px;
}
.loja-card-titulo i { color: var(--loja-destaque); }

/* ---------- Botões ---------- */
.loja-btn,
.loja-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--loja-escuro), var(--loja-medio));
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.loja-btn:hover { opacity: .9; transform: translateY(-1px); color: #fff; }
.loja-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.loja-btn-destaque,
.loja-btn-destaque:visited { background: var(--loja-destaque); color: #fff; }

.loja-btn-vazado,
.loja-btn-vazado:visited {
  background: transparent;
  color: var(--loja-escuro);
  border: 1.5px solid var(--loja-borda);
}
.loja-btn-vazado:hover { background: var(--loja-suave); color: var(--loja-escuro); }

.loja-btn-bloco { width: 100%; }

/* ---------- Avisos ---------- */
.loja-aviso {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .9rem;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.loja-aviso-erro  { background: #fdecea; color: #a4291c; border: 1px solid #f5c6c2; }
.loja-aviso-ok    { background: #eafaf1; color: #1d7a48; border: 1px solid #bfe9d3; }
.loja-aviso-info  { background: #eef5fa; color: #2c5d7c; border: 1px solid #cfe2ef; }

/* ---------- Carrinho ---------- */
.carrinho-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--loja-borda);
  align-items: center;
}
.carrinho-item:last-child { border-bottom: none; }

.carrinho-item-foto {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--loja-suave);
  flex-shrink: 0;
}
.carrinho-item-info { flex: 1; min-width: 0; }
.carrinho-item-nome {
  font-weight: 600;
  color: var(--loja-escuro);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}
.carrinho-item-nome:hover { color: var(--loja-destaque); }
.carrinho-item-cat { font-size: .8rem; color: #999; }

.carrinho-qtd {
  display: flex;
  align-items: center;
  border: 1px solid var(--loja-borda);
  border-radius: 50px;
  overflow: hidden;
}
.carrinho-qtd button {
  background: none;
  border: none;
  width: 34px;
  height: 34px;
  color: var(--loja-escuro);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.carrinho-qtd button:hover { background: var(--loja-suave); }
.carrinho-qtd input {
  width: 42px;
  border: none;
  text-align: center;
  font-weight: 600;
  color: var(--loja-escuro);
  -moz-appearance: textfield;
}
.carrinho-qtd input::-webkit-outer-spin-button,
.carrinho-qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.carrinho-item-preco {
  font-weight: 700;
  color: var(--loja-escuro);
  white-space: nowrap;
  min-width: 96px;
  text-align: right;
}

.carrinho-remover {
  background: none;
  border: none;
  color: #c9c9c9;
  cursor: pointer;
  padding: 6px;
  font-size: 1rem;
}
.carrinho-remover:hover { color: var(--loja-erro); }

/* ---------- Resumo ---------- */
.loja-resumo-linha {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: .95rem;
  color: #555;
}
.loja-resumo-total {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 2px solid var(--loja-borda);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--loja-escuro);
}

/* ---------- Rótulo sob os ícones do header ---------- */
.header .main-header .header-actions .header-action-btn.com-rotulo {
  flex-direction: column;
  justify-content: center;
}
.header .main-header .header-actions .header-action-btn.com-rotulo i {
  margin-right: 0;
}
/* O badge do carrinho ancora no ícone, não no link inteiro */
.header-action-icone { position: relative; display: inline-flex; }
.header-action-rotulo {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  margin-top: 2px;
  white-space: nowrap;
}
/* No celular o header fica compacto — os rótulos saem */
@media (max-width: 991.98px) {
  .header-action-rotulo { display: none; }
}

/* ---------- Badge do carrinho no menu ---------- */
.menu-carrinho { position: relative; display: inline-flex; }
.menu-carrinho-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--loja-destaque);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ---------- Painel do cliente ---------- */
.painel-menu { list-style: none; padding: 0; margin: 0; }
.painel-menu li + li { margin-top: 4px; }
.painel-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 10px;
  color: #555;
  text-decoration: none;
  font-size: .93rem;
  transition: background .15s;
}
.painel-menu a:hover { background: var(--loja-suave); color: var(--loja-escuro); }
.painel-menu a.ativo {
  background: linear-gradient(135deg, var(--loja-escuro), var(--loja-medio));
  color: #fff;
  font-weight: 600;
}
.painel-menu a.ativo i { color: #fff; }
.painel-menu i { width: 18px; text-align: center; color: #aaa; }

/* ---------- Status do pedido ---------- */
.pedido-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50px;
  padding: 4px 12px;
  color: #fff;
  white-space: nowrap;
}
.status-aguardando_pagamento { background: #f5a623; }
.status-pago                 { background: #27ae60; }
.status-em_separacao         { background: #3498db; }
.status-enviado              { background: #8e44ad; }
.status-entregue             { background: #2c3e50; }
.status-cancelado            { background: #95a5a6; }

/* ---------- Passos do checkout ---------- */
.checkout-passos {
  display: flex;
  gap: 6px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.checkout-passo {
  flex: 1;
  min-width: 130px;
  text-align: center;
  padding: 10px 8px;
  border-radius: 10px;
  background: var(--loja-suave);
  color: #999;
  font-size: .85rem;
  font-weight: 600;
}
.checkout-passo.ativo { background: linear-gradient(135deg, var(--loja-escuro), var(--loja-medio)); color: #fff; }
.checkout-passo.feito { background: #eafaf1; color: var(--loja-ok); }

/* ---------- Opções de frete e pagamento ---------- */
.opcao-escolha {
  display: block;
  border: 1.5px solid var(--loja-borda);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opcao-escolha:hover { border-color: var(--loja-destaque); }
.opcao-escolha input { margin-right: 10px; }
.opcao-escolha.selecionada { border-color: var(--loja-destaque); background: #fff8f4; }

/* ---------- Responsivo ---------- */
@media (max-width: 575px) {
  .loja-card { padding: 20px 16px; }

  /* Carrinho no celular: 1ª linha = foto + nome/categoria/aroma;
     2ª linha = controles (quantidade · preço · remover) em largura total,
     para o nome nunca ficar espremido entre a foto e os botões. */
  .carrinho-item { flex-wrap: wrap; gap: 12px; }
  .carrinho-item-foto { width: 64px; height: 64px; }
  .carrinho-item-info { flex: 1 1 0; }
  .carrinho-item form {
    flex: 1 1 100%;
    justify-content: space-between;
    background: var(--loja-suave);
    border-radius: 12px;
    padding: 8px 12px;
  }
  .carrinho-item-preco { min-width: auto; text-align: right; }

  /* Meus Pedidos no celular: cada linha da tabela vira um cartão
     (código + total / data · itens · status / botão Detalhes),
     em vez de tabela espremida com rolagem lateral. */
  .tabela-pedidos thead { display: none; }
  .tabela-pedidos, .tabela-pedidos tbody { display: block; }
  .tabela-pedidos tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    border: 1px solid var(--loja-borda);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
  }
  .tabela-pedidos tbody tr td {
    display: block;
    border: 0;
    padding: 0;
    box-shadow: none;
    background: none;
  }
  .tabela-pedidos td:nth-child(1) { order: 1; flex: 1 1 55%; }               /* código + rastreio */
  .tabela-pedidos td:nth-child(5) { order: 2; flex: 0 0 45%; }               /* total */
  .tabela-pedidos td:nth-child(2) { order: 3; }                              /* data */
  .tabela-pedidos td:nth-child(3) { order: 4; margin-left: 6px; }            /* itens */
  .tabela-pedidos td:nth-child(3)::before { content: "· "; color: #bbb; }
  .tabela-pedidos td:nth-child(4) { order: 5; margin-left: auto; }           /* status */
  .tabela-pedidos td:nth-child(6) { order: 6; flex: 1 1 100%; margin-top: 4px; }
  .tabela-pedidos td:nth-child(6) .loja-btn { display: block; text-align: center; }
}

/* ===============================================================
 * Menu de navegação — "pavio aceso"
 * A faixa vira creme quente e os itens usam a Quicksand da marca
 * em caixa alta. No hover, uma brasa (caramelo nas pontas, chama
 * no centro) cresce a partir do meio do item, como pavio pegando
 * fogo; o item ativo permanece aceso. O vinho do template sai de
 * cena — toda cor aqui é da paleta da loja.
 * =============================================================== */
:root {
  --nav-color: #5c4330;
  --nav-hover-color: var(--loja-escuro);
  --nav-mobile-background-color: #fffdf9;
  --nav-dropdown-background-color: #fffdf9;
  --nav-dropdown-color: #5c4330;
  --nav-dropdown-hover-color: var(--loja-escuro);
}

.header .header-nav {
  /* Degradê creme: quase branco encostado no header, descendo até um creme torrado visível */
  background: linear-gradient(180deg, #fffdf9 0%, #f5eee3 55%, #ecdfcc 100%);
  border-bottom: 1px solid var(--loja-borda);
  padding: 4px 0;
}

/* ---------- Desktop ---------- */
@media (min-width: 1200px) {
  .header .navmenu ul { justify-content: center; }

  .header .navmenu > ul > li { padding: 14px 16px; }
  .header .navmenu > ul > li:last-child { padding-right: 16px; }

  .header .navmenu a,
  .header .navmenu a:focus {
    font-family: var(--heading-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  /* A brasa: cresce do centro, com um brilho quente discreto */
  .header .navmenu > ul > li > a:before {
    height: 3px;
    border-radius: 3px;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #e8b87a, var(--loja-destaque), #e8b87a);
    box-shadow: 0 1px 6px rgba(235, 94, 40, .35);
  }

  /* Dropdown no padrão dos cartões da loja */
  .header .navmenu .dropdown ul {
    border: 1px solid var(--loja-borda);
    border-radius: 14px;
    padding: 12px 0;
    box-shadow: 0 14px 34px rgba(44, 26, 14, .14);
  }
  .header .navmenu .dropdown ul a {
    font-family: var(--heading-font);
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 22px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 1199px) {
  /* No celular os itens moram no hambúrguer: a faixa vazia some,
     mas volta (transparente) quando o menu abre, pois o overlay mora nela */
  .header .header-nav { display: none; }
  .mobile-nav-active .header .header-nav {
    display: block;
    background: none;
    border-bottom: none;
    padding: 0;
  }

  .header .mobile-nav-toggle { color: var(--loja-escuro); }

  /* Aberto, o X fica creme sobre o véu marrom */
  .mobile-nav-active .header .mobile-nav-toggle { color: var(--loja-suave); }
  .mobile-nav-active .navmenu { background: rgba(44, 26, 14, .82); }

  .header .navmenu ul { border-color: var(--loja-borda); }

  .header .navmenu a,
  .header .navmenu a:focus {
    font-family: var(--heading-font);
    font-weight: 600;
  }

  /* Círculos dos chevrons na chama, não no vinho do template */
  .header .navmenu a i,
  .header .navmenu a:focus i {
    background-color: color-mix(in srgb, var(--loja-destaque), transparent 88%);
    color: var(--loja-medio);
  }
  .header .navmenu a i:hover,
  .header .navmenu .active i,
  .header .navmenu .active:focus i {
    background-color: var(--loja-destaque);
    color: #fff;
  }
}

/* ---------- Acessibilidade ---------- */
.header .navmenu a:focus-visible {
  outline: 2px solid var(--loja-destaque);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .header .navmenu a,
  .header .navmenu > ul > li > a:before,
  .header .navmenu .dropdown ul { transition: none; }
}

/* ===============================================================
 * Rodapé — degradê creme horizontal
 * Mesma família de tons do menu: claro na esquerda, creme torrado
 * na direita.
 * =============================================================== */
.footer {
  background: linear-gradient(90deg, #fffdf9 0%, #f3ead9 50%, #e7d5b9 100%);
}

/* ===============================================================
 * Tela de login — cartão dividido
 * Esquerda: painel escuro com a vela acesa (chama em CSS puro).
 * Direita: formulário. No celular, o painel vira faixa compacta.
 * =============================================================== */
.login-envelope {
  max-width: 940px;
  margin: 0 auto;
}

.login-split {
  display: grid;
  grid-template-columns: 5fr 6fr;
  background: #fff;
  border: 1px solid var(--loja-borda);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(44, 26, 14, .4);
}

/* ---------- Painel da marca ---------- */
.login-marca {
  position: relative;
  background: linear-gradient(165deg, #1d1006 0%, var(--loja-escuro) 48%, var(--loja-medio) 135%);
  color: var(--loja-suave);
  padding: 52px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
  overflow: hidden;
}

/* brilho ambiente atrás da vela */
.login-marca::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(235, 94, 40, .30), transparent 62%);
  animation: velaBrilho 4s ease-in-out infinite;
  pointer-events: none;
}

.login-vela {
  position: relative;
  width: 72px;
  z-index: 1;
}

.login-vela-chama {
  width: 22px;
  height: 34px;
  margin: 0 auto 1px;
  background: radial-gradient(ellipse at 50% 78%, #fff6d8 0%, #ffc93c 42%, #eb5e28 76%, rgba(235, 94, 40, 0) 100%);
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  transform-origin: 50% 100%;
  animation: velaChama 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 176, 84, .6));
}

.login-vela-pavio {
  width: 3px;
  height: 9px;
  margin: 0 auto;
  background: #3a2413;
  border-radius: 2px;
}

.login-vela-corpo {
  width: 72px;
  height: 92px;
  background: linear-gradient(180deg, #fdf6ec, #e9dbc7);
  border-radius: 12px 12px 15px 15px;
  box-shadow: inset 0 -16px 24px rgba(107, 61, 30, .18), inset 0 4px 6px rgba(255, 255, 255, .7);
}

@keyframes velaChama {
  0%, 100% { transform: scale(1) rotate(-1.5deg); }
  30%      { transform: scale(1.06, .94) rotate(1.8deg); }
  55%      { transform: scale(.95, 1.06) rotate(-2.2deg); }
  80%      { transform: scale(1.03, .97) rotate(1deg); }
}

@keyframes velaBrilho {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

.login-marca-texto {
  position: relative;
  z-index: 1;
}

.login-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #d9b48f;
  margin: 0 0 10px;
}

.login-marca-titulo {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.25;
  color: #fdf6ec;
  margin: 0 0 10px;
}

.login-marca-sub {
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(245, 240, 235, .75);
  margin: 0;
}

/* ---------- Formulário ---------- */
.login-form {
  padding: 44px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-titulo {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--loja-escuro);
  margin: 0 0 4px;
}

.login-sub {
  font-size: .88rem;
  color: #8a7563;
  margin: 0 0 26px;
}

.login-campo {
  margin-bottom: 18px;
}

.login-campo label,
.login-form .form-label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--loja-medio);
  margin-bottom: 7px;
}

.login-campo-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.login-esqueci {
  font-size: .78rem;
  color: #a08a76;
  text-decoration: none;
}

.login-esqueci:hover {
  color: var(--loja-destaque);
  text-decoration: underline;
}

.login-form .form-control,
.login-form .form-select {
  border-radius: 12px;
  border: 1.5px solid var(--loja-borda);
  padding: 12px 16px;
  font-size: .95rem;
  background: #fdfbf8;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.login-form .form-control:focus,
.login-form .form-select:focus {
  border-color: var(--loja-medio);
  box-shadow: 0 0 0 4px rgba(107, 61, 30, .12);
  background: #fff;
}

.login-senha-wrap {
  position: relative;
}

.login-senha-wrap input.form-control {
  padding-right: 48px;
}

.login-olho {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: #a08a76;
  font-size: 17px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
}

.login-olho:hover,
.login-olho:focus-visible {
  color: var(--loja-escuro);
}

.login-turnstile {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.login-turnstile:empty {
  display: none;
}

.login-divisor {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .8rem;
  color: #b3a08d;
  margin: 24px 0 16px;
  white-space: nowrap;
}

.login-divisor::before,
.login-divisor::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--loja-borda);
}

/* ---------- Responsivo ---------- */
@media (max-width: 991px) {
  .login-split {
    grid-template-columns: 1fr;
  }

  .login-marca {
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
    gap: 22px;
    padding: 26px 24px;
  }

  .login-marca::before {
    top: 50%;
    left: 20%;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -50%);
  }

  .login-vela {
    width: 46px;
    flex-shrink: 0;
  }

  .login-vela-corpo {
    width: 46px;
    height: 58px;
    border-radius: 9px 9px 11px 11px;
  }

  .login-vela-chama {
    width: 16px;
    height: 24px;
  }

  .login-marca-titulo {
    font-size: 1.25rem;
    margin-bottom: 6px;
  }

  .login-marca-sub {
    font-size: .82rem;
  }

  .login-form {
    padding: 30px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-vela-chama,
  .login-marca::before {
    animation: none;
  }
}

/* ---------- Variante larga (cadastro) ---------- */
.login-envelope-largo {
  max-width: 1100px;
}

.login-split-largo {
  grid-template-columns: 4fr 7fr;
}

.login-secao {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--loja-escuro);
  margin: 30px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--loja-borda);
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-secao:first-of-type {
  margin-top: 0;
}

.login-secao i {
  color: var(--loja-destaque);
}

/* Estas duas regras precisam vir DEPOIS de .login-split-largo — mesma
 * especificidade, então quem ganha é a última do arquivo. */

/* O cadastro empilha junto com as outras telas; sem isto as 4fr/7fr
 * continuariam valendo e o formulário ficaria espremido no celular. */
@media (max-width: 991px) {
  .login-split-largo {
    grid-template-columns: 1fr;
  }
}

/* No celular o cadastro é longo — o painel da marca sai da frente do
 * formulário. Vale só para a variante larga; login e recuperar mantêm a
 * faixa com a vela. */
@media (max-width: 767.98px) {
  .login-split-largo .login-marca {
    display: none;
  }
}

/* Trava contra estouro horizontal no celular.
 * Filho de grid/flex nasce com min-width:auto: se a largura mínima do
 * conteúdo (o iframe de 300px do Turnstile, por exemplo) não couber na
 * coluna, o grid cresce além da viewport em vez de encolher — a página
 * passa a arrastar para os lados e o cartão encosta na margem. */
.login-split > * {
  min-width: 0;
}

.login-turnstile,
.login-turnstile > div,
.login-turnstile iframe {
  max-width: 100%;
}

/* O Safari do iPhone dá zoom sozinho quando o campo focado tem fonte
 * menor que 16px — a página amplia, passa a arrastar de lado e o cartão
 * encosta na margem. 16px trava isso. Diferença visual imperceptível. */
@media (max-width: 767.98px) {
  .login-form .form-control,
  .login-form .form-select {
    font-size: 16px;
  }
}