/* =====================================================================
   cleia.css — identidade visual Cleia Nunes, carregada por topo3.php
   em TODAS as páginas da loja.

   Paleta tirada da logo (marrom #3D251E sobre rosé #F4D3C8) e layout
   minimalista: fundo off-white, Cormorant Garamond nos títulos, Jost leve
   e espaçada no texto (referências: annefernandes.com.br e charth.com.br),
   fotos grandes e cantos retos.

   Como as páginas antigas trazem CSS próprio (site.css, <style> inline),
   as regras do card e de tipografia usam !important de propósito.
   ===================================================================== */

:root {
  --cn-marrom: #3d251e;
  --cn-marrom-2: #5a3a30;
  --cn-rose: #f4d3c8;
  --cn-rose-claro: #fbefea;
  --cn-creme: #f6f1ec;
  --cn-fundo: #fdfbf8;
  --cn-texto: #2c2925;
  --cn-cinza: #8a817b;
  --cn-linha: #ebe4de;
  --cn-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --cn-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

html,
body {
  font-family: var(--cn-sans) !important;
  font-weight: 400;
  color: var(--cn-texto);
  background: var(--cn-fundo);
  -webkit-font-smoothing: antialiased;
}

/* ornamento com o símbolo floral da logo, usado nos títulos de seção */
.cn-flor {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url('../img/simbolo_cleia.png') center / contain no-repeat;
  vertical-align: 1px;
  opacity: .85;
}

body,
input,
button,
select,
textarea,
.btn,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cn-sans);
}

a {
  color: var(--cn-marrom);
}

a:hover,
a:focus {
  color: var(--cn-marrom-2);
}

::selection {
  background: var(--cn-rose);
  color: var(--cn-marrom);
}

/* títulos de seção das páginas antigas */
.titulo_grande,
.div_titulo h2,
h2.cinza {
  font-family: var(--cn-serif) !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
  color: var(--cn-marrom) !important;
}

.titulo_grande:after,
.div_titulo h2:after {
  background: var(--cn-marrom) !important;
  height: 1px !important;
}

h2.cinza {
  border-bottom-color: var(--cn-linha) !important;
  font-size: 22px;
}

/* ── títulos de seção (novo padrão) ─────────────────────────────────── */
.cn-secao {
  padding: 64px 0 8px;
}

.cn-secao-cab {
  text-align: center;
  margin: 0 auto 34px;
  padding: 0 16px;
  max-width: 720px;
}

.cn-sobretitulo {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cn-cinza);
  margin-bottom: 10px;
}

.cn-titulo {
  font-family: var(--cn-serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  color: var(--cn-marrom);
  margin: 0;
}

.cn-titulo em {
  font-style: italic;
}

.cn-secao-cab p {
  margin: 12px 0 0;
  color: var(--cn-cinza);
  font-size: 14px;
  line-height: 1.7;
}

.cn-link-todos {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cn-marrom) !important;
  border-bottom: 1px solid var(--cn-marrom);
  padding-bottom: 3px;
  text-decoration: none !important;
}

.cn-link-todos:hover {
  opacity: .7;
}

.cn-btn {
  display: inline-block;
  padding: 14px 34px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1px solid var(--cn-marrom);
  background: var(--cn-marrom);
  color: #fff !important;
  transition: background .2s, color .2s, border-color .2s;
}

.cn-btn:hover {
  background: transparent;
  color: var(--cn-marrom) !important;
}

.cn-btn--claro {
  background: #fff;
  border-color: #fff;
  color: var(--cn-marrom) !important;
}

.cn-btn--claro:hover {
  background: transparent;
  color: #fff !important;
}

.cn-btn--contorno {
  background: transparent;
  color: var(--cn-marrom) !important;
}

.cn-btn--contorno:hover {
  background: var(--cn-marrom);
  color: #fff !important;
}

@media (max-width: 767px) {
  .cn-secao {
    padding: 44px 0 4px;
  }

  .cn-titulo {
    font-size: 30px;
  }

  .cn-secao-cab {
    margin-bottom: 22px;
  }
}

/* =====================================================================
   CARD DE PRODUTO (card_produto_lib.php) — foto 3:4, sem moldura,
   nome em caixa alta discreta, preço e parcelas logo abaixo.
   ===================================================================== */
.produto {
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  width: 100% !important;
  overflow: visible !important;
}

.produto:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.card_foto_wrap {
  border-radius: 0 !important;
  margin-bottom: 14px !important;
  background: var(--cn-creme);
  aspect-ratio: 3 / 4;
}

.card_foto_wrap > a {
  height: 100%;
}

.card_foto_wrap .foto,
.produto .foto {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 3 / 4;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: transform .8s cubic-bezier(.2, .6, .2, 1), opacity .3s;
}

.produto:hover .card_foto_wrap .foto {
  transform: scale(1.035);
}

.card_badge {
  background: var(--cn-marrom) !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  letter-spacing: 1.4px !important;
  padding: 6px 10px !important;
  box-shadow: none !important;
}

.card_badge i {
  display: none;
}

.card_fav,
.card_sacola {
  background: rgba(255, 255, 255, .92) !important;
  color: var(--cn-marrom) !important;
  box-shadow: none !important;
}

.card_fav.ativo i {
  color: #b5524a !important;
}

.card_sacola {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s, background .2s, color .2s !important;
}

.produto:hover .card_sacola {
  opacity: 1;
  transform: none;
}

.card_sacola:hover {
  background: var(--cn-marrom) !important;
  color: #fff !important;
}

/* no toque não existe hover: sacola sempre visível */
@media (hover: none) {
  .card_sacola {
    opacity: 1;
    transform: none;
  }
}

.produto .t_produto {
  font-family: var(--cn-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  line-height: 1.5 !important;
  text-transform: uppercase;
  color: var(--cn-texto) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  text-align: left;
}

.produto .t_cidade {
  font-family: var(--cn-sans) !important;
  color: var(--cn-cinza) !important;
  font-size: 10px !important;
  letter-spacing: 1.6px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
}

.produto .detalhes {
  padding: 0 !important;
  margin-top: 6px !important;
  min-height: 0 !important;
}

.produto .t_valor {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--cn-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--cn-texto) !important;
}

.produto .t_valor sup {
  top: 0;
  font-size: 100%;
  font-weight: 500;
}

.produto .t_parcela {
  position: static !important;
  float: none !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font-family: var(--cn-sans) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: var(--cn-cinza) !important;
}

.produto .variacoes_card {
  margin: 6px 0 2px !important;
  gap: 8px !important;
}

.produto .cor_dot {
  width: 13px !important;
  height: 13px !important;
}

.produto .cor_dot:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--cn-marrom) !important;
}

.produto .tam_pill {
  background: transparent !important;
  color: var(--cn-cinza) !important;
  border: 1px solid var(--cn-linha) !important;
  border-radius: 0 !important;
  font-family: var(--cn-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  padding: 4px 7px !important;
}

.produto .tam_pill:hover {
  border-color: var(--cn-marrom) !important;
  color: var(--cn-marrom) !important;
}

/* botão "Comprar" abaixo do card: contorno fino, enche no hover */
.box1 {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 14px 0 34px !important;
}

.box1.box1_full a {
  width: 100% !important;
  flex: 1 1 100% !important;
}

.btn_comprar_produto {
  width: 100% !important;
  height: 40px !important;
  background: transparent !important;
  color: var(--cn-marrom) !important;
  border: 1px solid var(--cn-marrom) !important;
  border-radius: 0 !important;
  font-family: var(--cn-sans) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
}

.btn_comprar_produto:hover {
  background: var(--cn-marrom) !important;
  color: #fff !important;
}

@media (max-width: 767px) {
  .card_foto_wrap {
    margin-bottom: 10px !important;
  }

  .produto .t_produto {
    font-size: 10.5px !important;
    letter-spacing: .8px !important;
  }

  .produto .t_valor {
    font-size: 13.5px !important;
  }

  .produto .t_parcela {
    font-size: 10px !important;
  }

  .box1 {
    margin: 10px 0 24px !important;
  }

  .btn_comprar_produto {
    height: 36px !important;
    font-size: 9.5px !important;
    letter-spacing: 1.4px !important;
  }
}

/* =====================================================================
   MODAL DE COMPRA RÁPIDA, CARRINHO LATERAL E BOTÕES GERAIS
   ===================================================================== */
.cr_box {
  border-radius: 0 !important;
  font-family: var(--cn-sans) !important;
}

.cr_foto {
  border-radius: 0 !important;
}

.cr_nome {
  font-family: var(--cn-serif);
  font-weight: 500 !important;
  font-size: 24px !important;
  color: var(--cn-marrom);
}

.cr_tam,
.cr_cor,
.cr_qtd,
.cr_add {
  border-radius: 0 !important;
}

.cr_tam.ativo,
.cr_add {
  background: var(--cn-marrom) !important;
  border-color: var(--cn-marrom) !important;
}

.cr_add {
  letter-spacing: 2px !important;
  text-transform: uppercase;
  font-size: 11.5px !important;
}

.cr_cor.ativo {
  border-color: var(--cn-marrom) !important;
  background: var(--cn-rose-claro) !important;
}

.cr_link a,
.cr_qtd button {
  color: var(--cn-marrom) !important;
}

.topinho_carrinho {
  background: var(--cn-marrom) !important;
}

.topinho_carrinho h4 {
  font-family: var(--cn-serif);
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: .5px;
}

.btn_comprar_flutuante,
.btn_comprar1 {
  background: var(--cn-marrom) !important;
  letter-spacing: 2px !important;
  font-size: 11.5px !important;
}

.btn_comprar_flutuante:hover,
.btn_comprar1:hover {
  background: var(--cn-marrom-2) !important;
}

.btn_continuar_comprando {
  border-color: var(--cn-marrom) !important;
  color: var(--cn-marrom) !important;
  letter-spacing: 2px !important;
  font-size: 11px !important;
}

.car_item_foto,
.foto_carrinho,
.car_frete,
.car_aviso_ok {
  border-radius: 0 !important;
}

/* paginação das listagens. Atenção: o jquery.paginate põe a classe
   .paginate na PRÓPRIA grade de produtos — por isso os seletores miram só
   .paginate-pagination (os botões), nunca .paginate */
.paginate-pagination ul > li > a.page,
.pagination > li > a,
.pagination > li > span {
  color: var(--cn-marrom) !important;
  border-color: var(--cn-linha) !important;
  border-radius: 0 !important;
  font-size: 12px;
  font-weight: 500;
}

.paginate-pagination ul > li > a.page:hover,
.paginate-pagination ul > li > a.page.active,
.pagination > .active > a,
.pagination > .active > span {
  background: var(--cn-marrom) !important;
  border-color: var(--cn-marrom) !important;
  color: #fff !important;
}

/* WhatsApp flutuante */
.cn-whats {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  z-index: 99990;
  transition: transform .2s;
}

.cn-whats:hover {
  transform: scale(1.07);
}

@media (max-width: 767px) {
  .cn-whats {
    width: 48px;
    height: 48px;
    font-size: 24px;
    right: 14px;
    bottom: 14px;
  }
}