/* ==========================================================================
   CESTA & LAR — FOLHA DE ESTILOS PRINCIPAL
   Organização:
   1.  Fontes e Variáveis (Design Tokens)
   2.  Reset Básico
   3.  Tipografia Global
   4.  Utilitários
   5.  Cabeçalho e Navegação
   6.  Menu Mobile (Drawer)
   7.  Hero / Banner Principal
   8.  Faixa de Confiança (frete, qualidade, whatsapp)
   9.  Seção de Produtos
   10. Seção Sobre
   11. Rodapé
   12. Carrinho (Drawer lateral)
   13. Toast de Notificação
   14. Botão Flutuante do WhatsApp
   15. Animações
   16. Responsividade
   ========================================================================== */

/* ==========================================================================
   1. FONTES E VARIÁVEIS (DESIGN TOKENS)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Playfair+Display:ital,wght@1,500;1,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Paleta — identidade Cellie Artesanal: branco, bege, rosé claro e dourado discreto */
  --cor-primaria:        #7C6455; /* marrom-terroso suave — títulos e marca */
  --cor-primaria-clara:  #9C8271;
  --cor-acento:          #C9A66B; /* dourado discreto */
  --cor-acento-escuro:   #AD8850;
  --cor-sage:            #C79E8E; /* rosé/terracota suave — apoio (categorias) */
  --cor-fundo:           #FDF8F5; /* branco levemente rosado */
  --cor-fundo-alt:       #F3E7E0; /* bege rosé p/ contraste de seção */
  --cor-texto:           #4A3D35; /* marrom quente, quase-preto */
  --cor-texto-suave:     #8A7A6F;
  --cor-borda:           rgba(124, 100, 85, 0.16);
  --cor-branco:          #FFFFFF;
  --cor-erro:            #B3452C;
  --cor-sucesso:         #3F7D5C;
  --cor-cta:             #A8B7A2; /* verde sálvia do botão "Solicitar orçamento" */
  --cor-cta-escuro:      #7E8E79;

  /* Tipografia */
  --fonte-display: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  --fonte-script:  'Playfair Display', 'Fraunces', Georgia, serif;
  --fonte-corpo:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espaçamento e camadas */
  --raio:        14px;
  --raio-peq:    8px;
  --sombra:      0 12px 32px rgba(15, 61, 62, 0.10);
  --sombra-forte:0 20px 48px rgba(15, 61, 62, 0.20);
  --transicao:   0.25s ease;
  --largura-max: 1240px;

  --z-header: 100;
  --z-drawer: 200;
  --z-quickview: 250;
  --z-toast:  300;
}

/* ==========================================================================
   2. RESET BÁSICO
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body, h1, h2, h3, h4, p, ul, figure{ margin: 0; }

ul{ list-style: none; padding: 0; }

a{ color: inherit; text-decoration: none; }

img{ max-width: 100%; display: block; }

button, input{ font-family: inherit; font-size: inherit; color: inherit; }

button{ cursor: pointer; background: none; border: none; }

input:focus-visible,
button:focus-visible,
a:focus-visible{
  outline: 2px solid var(--cor-acento);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. TIPOGRAFIA GLOBAL
   ========================================================================== */
body{
  font-family: var(--fonte-corpo);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--cor-primaria);
}

h1{ font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 700; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3{ font-size: 1.3rem; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #CFA39E;
}

.eyebrow::before{
  content: none;
}

/* ==========================================================================
   4. UTILITÁRIOS
   ========================================================================== */
.container{
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 24px;
}

.secao{ padding: 88px 0; }
.secao--alt{ background: var(--cor-fundo-alt); }

.secao__cabecalho{
  max-width: 640px;
  margin: 0 0 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.secao__cabecalho p{ color: var(--cor-texto-suave); font-size: 1.02rem; }
.secao__cabecalho--centro{ margin-inline: auto; text-align: center; align-items: center; }

.botao{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
  white-space: nowrap;
}
.botao--primario{
  background: var(--cor-acento);
  color: var(--cor-primaria);
}
.botao--primario:hover{ background: var(--cor-acento-escuro); transform: translateY(-2px); box-shadow: var(--sombra); }

.botao--contorno{
  background: transparent;
  color: var(--cor-primaria);
  border: 1.5px solid var(--cor-primaria);
}
.botao--contorno:hover{ background: var(--cor-primaria); color: var(--cor-fundo); }

.botao--escuro{
  background: var(--cor-primaria);
  color: var(--cor-fundo);
}
.botao--escuro:hover{ background: var(--cor-primaria-clara); transform: translateY(-2px); box-shadow: var(--sombra); }

.botao--bloco{ width: 100%; }

.botao:disabled{ opacity: 0.55; cursor: not-allowed; transform: none !important; }

.icone{ width: 22px; height: 22px; }

/* ==========================================================================
   5. CABEÇALHO E NAVEGAÇÃO
   ========================================================================== */
.cabecalho{
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cor-borda);
}

.cabecalho__conteudo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
}

.cabecalho__logo-texto{
  display: inline-block;
  font-family: 'Cinzel', var(--fonte-display), serif;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  color: #D8B5B1;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.nav-principal{ display: flex; }
.nav-principal__lista{ display: flex; gap: 34px; }

.nav-principal__link{
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  padding: 6px 0;
}
.nav-principal__link::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 2px;
  background: var(--cor-acento);
  transition: width var(--transicao);
}
.nav-principal__link:hover::after{ width: 100%; }

.cabecalho__acoes{ display: flex; align-items: center; gap: 10px; }

.botao-icone{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--cor-primaria);
  transition: background var(--transicao);
}
.botao-icone:hover{ background: var(--cor-fundo-alt); }

.contador-carrinho{
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--cor-erro);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.botao-menu-mobile{
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--cor-primaria);
}


/* ==========================================================================
   6. MENU MOBILE (DRAWER)
   ========================================================================== */
.menu-mobile{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(84vw, 340px);
  background: var(--cor-primaria);
  color: var(--cor-fundo);
  z-index: var(--z-drawer);
  padding: 26px 26px 40px;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.menu-mobile.aberto{ transform: translateX(0); }

.menu-mobile__topo{ display: flex; justify-content: flex-end; }
.menu-mobile__topo button{ color: var(--cor-fundo); }

.menu-mobile__lista{ display: flex; flex-direction: column; gap: 22px; }
.menu-mobile__lista a{ font-family: var(--fonte-display); font-size: 1.4rem; }

.menu-mobile__contato{ margin-top: auto; display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; opacity: 0.85; }

.sobreposicao{
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 25, 0.55);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao);
}
.sobreposicao.ativa{ opacity: 1; visibility: visible; }

/* ==========================================================================
   7. HERO / BANNER PRINCIPAL
   ========================================================================== */
.hero{
  position: relative;
  overflow: hidden;
  background: var(--cor-fundo);
}

.hero::before{
  /* Círculo decorativo dourado, sutil, atrás da imagem */
  content: "";
  position: absolute;
  top: 8%;
  right: 18%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1.5px solid var(--cor-acento);
  opacity: 0.35;
}

.hero__container{
  position: relative;
  z-index: 2;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 108px 24px 96px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.hero__conteudo{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero__conteudo .eyebrow{ color: #CFA39E; }

.hero h1{ color: var(--cor-primaria); }
.hero h1 em{ font-style: italic; font-family: var(--fonte-script); color: var(--cor-acento-escuro); }

.hero p{ font-size: 1.1rem; color: var(--cor-texto-suave); max-width: 46ch; }

.hero__acoes{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }

.hero__figura{
  position: relative;
  aspect-ratio: 5 / 5;
  border-radius: 50% 50% 46% 54% / 55% 48% 52% 45%;
  overflow: hidden;
  box-shadow: var(--sombra-forte);
}
.hero__figura img{ width: 100%; height: 100%; ; }

.botao--cta{
  background: var(--cor-cta);
  color: var(--cor-texto);
}
.botao--cta:hover{ background: var(--cor-cta-escuro); color: #fff; transform: translateY(-2px); box-shadow: var(--sombra); }

/* ==========================================================================
   8. FAIXA DE CONFIANÇA
   ========================================================================== */
.faixa-confianca{
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
}
.faixa-confianca__lista{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 30px 0;
}
.faixa-confianca__item{
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  text-align: left;
}
.faixa-confianca__item .icone{ color: var(--cor-acento-escuro); flex-shrink: 0; }
.faixa-confianca__item strong{ display: block; font-size: 0.95rem; }
.faixa-confianca__item span{ font-size: 0.82rem; color: var(--cor-texto-suave); }

/* ==========================================================================
   9. SEÇÃO DE PRODUTOS
   ========================================================================== */
.filtros-categoria{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.filtro-categoria{
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--cor-borda);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
  transition: all var(--transicao);
}
.filtro-categoria:hover{ border-color: var(--cor-acento); color: var(--cor-primaria); }
.filtro-categoria.ativo{
  background: #D8B5B1;
  border-color: #D8B5B1;
  color: var(--cor-texto);
}

.grade-produtos{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.cartao-produto{
  position: relative;
  background: var(--cor-branco);
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  transition: transform var(--transicao), box-shadow var(--transicao);
  display: flex;
  flex-direction: column;
}
.cartao-produto:hover{ transform: translateY(-6px); box-shadow: var(--sombra); }

.cartao-produto__figura{
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cor-fundo-alt);
  overflow: hidden;
}
.cartao-produto__figura img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.cartao-produto:hover .cartao-produto__figura img{ transform: scale(1.06); }

.cartao-produto__etiqueta{
  position: absolute;
  top: 14px;
  left: 14px;
  background: #D8B5B1;
  color: var(--cor-texto);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.cartao-produto__corpo{
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cartao-produto__categoria{
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-sage);
}

.cartao-produto__titulo{ font-size: 1.08rem; }
.cartao-produto__descricao{ font-size: 0.88rem; color: var(--cor-texto-suave); flex: 1; }

.cartao-produto__rodape{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.cartao-produto__preco{  font-size: 1.0rem; color: var(--cor-primaria); font-weight: 600; }
.cartao-produto__preco small{ display: block; font-family: var(--fonte-corpo); font-size: 0.72rem; font-weight: 500; color: var(--cor-texto-suave); }

.botao-adicionar{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cor-primaria);
  color: var(--cor-fundo);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.84rem;
  transition: background var(--transicao), transform var(--transicao);
}
.botao-adicionar:hover{ background: var(--cor-acento-escuro); color: var(--cor-primaria); transform: translateY(-2px); }

.secao-produtos__rodape{ display: flex; justify-content: center; margin-top: 48px; }

/* ==========================================================================
   9.1 DIFERENCIAIS (produção artesanal, feito à mão etc.)
   ========================================================================== */
.diferenciais{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.diferenciais__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 30px 18px;
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.diferenciais__item:hover{ transform: translateY(-4px); box-shadow: var(--sombra); }
.diferenciais__icone{
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cor-fundo-alt);
  display: flex; align-items: center; justify-content: center;
}
.diferenciais__icone .icone{ width: 24px; height: 24px; color: var(--cor-acento-escuro); }
.diferenciais__item strong{ font-size: 0.95rem; color: var(--cor-primaria); }
.diferenciais__item span{ font-size: 0.82rem; color: var(--cor-texto-suave); }

/* ==========================================================================
   9.2 CARROSSEL DE FOTOS DO PRODUTO (quando há mais de uma foto)
   ========================================================================== */
.carrossel-produto{
  position: relative;
  width: 100%;
  height: 100%;
}
.carrossel-produto__trilha{
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrossel-produto__trilha::-webkit-scrollbar{ display: none; }
.carrossel-produto__trilha img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
}
.carrossel-produto__pontos{
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.carrossel-produto__pontos .ponto{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all var(--transicao);
  padding: 0;
}
.carrossel-produto__pontos .ponto.ativo{
  background: var(--cor-branco);
  width: 16px;
}

/* Setas discretas para trocar de foto (cartão e quick view) */
.carrossel-produto__seta{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: var(--cor-primaria);
  z-index: 3;
  transition: background var(--transicao), transform var(--transicao);
}
.carrossel-produto__seta:hover{
  background: var(--cor-branco);
  transform: translateY(-50%) scale(1.06);
}
.carrossel-produto__seta svg{ width: 15px; height: 15px; }
.carrossel-produto__seta--anterior{ left: 10px; }
.carrossel-produto__seta--proxima{ right: 10px; }

@media (max-width: 560px){
  .carrossel-produto__seta{ width: 28px; height: 28px; }
  .carrossel-produto__seta svg{ width: 13px; height: 13px; }
}

/* Placeholder de produto ainda sem foto real */
.cartao-produto__figura--vazio{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  color: var(--cor-texto-suave);
  background: var(--cor-fundo-alt);
}
.cartao-produto__figura--vazio .icone{ width: 30px; height: 30px; color: var(--cor-primaria-clara); opacity: 0.7; }
.cartao-produto__figura--vazio span{ font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }

/* ==========================================================================
   10. SEÇÃO SOBRE
   ========================================================================== */
.sobre{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.sobre__figura{
  border-radius: var(--raio);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.sobre__conteudo{ display: flex; flex-direction: column; gap: 18px; }
.sobre__conteudo p{ color: var(--cor-texto-suave); }

.sobre__lista{ display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.sobre__lista li{ display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; }
.sobre__lista li::before{
  content: "";
  flex-shrink: 0;
  margin-top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #9B7A72;
}

/* ==========================================================================
   11. RODAPÉ
   ========================================================================== */
.rodape{
  background: #E9DDD2;
  color: var(--cor-texto);
  padding: 72px 0 28px;
}

.rodape__grade{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(74,61,53,0.16);
}

.rodape__logo img{ height: 34px; margin-bottom: 16px;  }
.rodape__coluna h4{ color: var(--cor-primaria); font-size: 1rem; margin-bottom: 18px; }
.rodape__coluna p{ font-size: 0.9rem; line-height: 1.7; }
.rodape__coluna ul{ display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; }
.rodape__coluna a:hover{ color: var(--cor-acento); }

.rodape__contato-item{ display: flex; align-items: center; gap: 10px; }
.rodape__contato-item .icone{ width: 18px; height: 18px; color: var(--cor-acento); flex-shrink: 0; }

.rodape__redes{ display: flex; gap: 12px; margin-top: 16px; }
.rodape__redes a{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(74,61,53,0.22);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transicao);
}
.rodape__redes a:hover{ background: var(--cor-acento); border-color: var(--cor-acento); color: var(--cor-primaria); }

.rodape__base{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 24px;
  font-size: 0.82rem;
}

/* ==========================================================================
   12. CARRINHO (DRAWER LATERAL)
   ========================================================================== */
.carrinho{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(92vw, 420px);
  background: var(--cor-fundo);
  z-index: var(--z-drawer);
  transform: translateX(100%);
  transition: transform 0.35s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-forte);
}
.carrinho.aberto{ transform: translateX(0); }

.carrinho__topo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--cor-borda);
}
.carrinho__topo h2{ font-size: 1.3rem; }
.carrinho__topo button{ color: var(--cor-primaria); }

.carrinho__corpo{
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.carrinho__vazio{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 60px 10px;
  color: var(--cor-texto-suave);
}
.carrinho__vazio .icone{ width: 46px; height: 46px; color: var(--cor-borda); }

.item-carrinho{
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 14px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cor-borda);
}

.item-carrinho__figura{
  width: 66px; height: 66px;
  border-radius: var(--raio-peq);
  overflow: hidden;
  background: var(--cor-fundo-alt);
}
.item-carrinho__figura img{ width: 100%; height: 100%; object-fit: cover; }

.item-carrinho__info{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item-carrinho__titulo{ font-size: 0.92rem; font-weight: 700; }
.item-carrinho__preco-unit{ font-size: 0.8rem; color: var(--cor-texto-suave); }

.seletor-quantidade{
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  width: fit-content;
}
.seletor-quantidade button{
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cor-primaria);
}
.seletor-quantidade button .icone{ width: 14px; height: 14px; }
.seletor-quantidade span{ min-width: 22px; text-align: center; font-size: 0.85rem; font-weight: 700; }

.item-carrinho__acoes{ display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.item-carrinho__subtotal{ font-weight: 800; font-size: 0.92rem; color: var(--cor-primaria); }
.item-carrinho__remover{ color: var(--cor-erro); }
.item-carrinho__remover .icone{ width: 17px; height: 17px; }

.carrinho__rodape{
  border-top: 1px solid var(--cor-borda);
  padding: 20px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--cor-fundo-alt);
}

.linha-resumo{
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  color: var(--cor-texto-suave);
}
.linha-resumo strong{ color: var(--cor-texto); }
.linha-resumo--total{
  font-size: 1.15rem;
  padding-top: 10px;
  border-top: 1px dashed var(--cor-borda);
}
.linha-resumo--total strong{  color: var(--cor-primaria); font-size: 1.0rem; }

.bloco-frete{ display: flex; flex-direction: column; gap: 10px; }
.bloco-frete label{ font-size: 0.82rem; font-weight: 700; color: var(--cor-texto-suave); }
.linha-cep{ display: flex; gap: 8px; }
.linha-cep input{
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--raio-peq);
  border: 1.5px solid var(--cor-borda);
  background: var(--cor-branco);
}
.linha-cep input:focus{ border-color: var(--cor-acento); }

.resultado-frete{
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--raio-peq);
  background: rgba(127,162,148,0.16);
  color: var(--cor-primaria);
  font-size: 0.85rem;
}
.resultado-frete.mostrar{ display: flex; }
.resultado-frete.erro{ background: rgba(179,69,44,0.12); color: var(--cor-erro); }
.resultado-frete .icone{ width: 20px; height: 20px; flex-shrink: 0; }

.carrinho__acoes-finais{ display: flex; flex-direction: column; gap: 10px; }
.botao--whatsapp{ background: #25D366; color: #063d1c; }
.botao--whatsapp:hover{ background: #1ebe57; }

/* ==========================================================================
   13. TOAST DE NOTIFICAÇÃO
   ========================================================================== */
.toast{
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 140%);
  background: var(--cor-primaria);
  color: var(--cor-fundo);
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--sombra-forte);
  z-index: var(--z-toast);
  transition: transform 0.35s ease;
}
.toast.mostrar{ transform: translate(-50%, 0); }
.toast .icone{ width: 18px; height: 18px; color: var(--cor-acento); }

/* ==========================================================================
   14. BOTÃO FLUTUANTE DO WHATSAPP
   ========================================================================== */
.whatsapp-flutuante{
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-forte);
  z-index: 90;
  transition: transform var(--transicao);
}
.whatsapp-flutuante:hover{ transform: scale(1.08); }
.whatsapp-flutuante .icone{ width: 28px; height: 28px; }

/* ==========================================================================
   15. ANIMAÇÕES
   ========================================================================== */
@keyframes surgir{
  from{ opacity: 0; transform: translateY(24px); }
  to{ opacity: 1; transform: translateY(0); }
}

.surgir-ao-rolar{
  opacity: 0;
}
.surgir-ao-rolar.visivel{
  animation: surgir 0.7s ease forwards;
}

/* ==========================================================================
   16. RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 1080px){
  .grade-produtos{ grid-template-columns: repeat(3, 1fr); }
  .rodape__grade{ grid-template-columns: 1.2fr 1fr 1fr; }
  .rodape__coluna:nth-child(4){ grid-column: 1 / -1; }
  .diferenciais{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
  .nav-principal{ display: none; }
  .botao-menu-mobile{ display: flex; }
  .hero__container{ grid-template-columns: 1fr; padding: 70px 24px 60px; gap: 40px; }
  .hero__figura{ order: -1; max-width: 380px; margin: 0 auto; aspect-ratio: 1 / 1; }
  .hero::before{ width: 320px; height: 320px; top: 4%; }
  .faixa-confianca__lista{ grid-template-columns: 1fr; gap: 16px; }
  .sobre{ grid-template-columns: 1fr; }
  .sobre__figura{ aspect-ratio: 16/10; order: -1; }
  .grade-produtos{ grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .rodape__grade{ grid-template-columns: 1fr 1fr; }
  .secao{ padding: 64px 0; }
}

@media (max-width: 560px){
  .cabecalho__conteudo{ padding: 14px 16px; gap: 8px; }
  .cabecalho__logo-texto{ font-size: 1.15rem; letter-spacing: 0.03em; }
  .cabecalho__acoes{ gap: 2px; }
  .botao-icone{ width: 38px; height: 38px; }
  .botao-menu-mobile{ width: 38px; height: 38px; }
  .hero__container{ padding: 64px 20px 56px; }
  .hero__acoes{ flex-direction: column; align-items: stretch; }
  .diferenciais{ grid-template-columns: 1fr; }
  .grade-produtos{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .cartao-produto__corpo{ padding: 14px; gap: 6px; }
  .cartao-produto__titulo{ font-size: 0.95rem; }
  .cartao-produto__rodape{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .botao-adicionar{ width: 100%; justify-content: center; }
  .rodape__grade{ grid-template-columns: 1fr; }
  .rodape__base{ flex-direction: column; text-align: center; }
  .carrinho{ width: 100vw; }
  .item-carrinho{ grid-template-columns: 56px 1fr; }
  .item-carrinho__acoes{ grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .whatsapp-flutuante{ width: 52px; height: 52px; bottom: 18px; right: 18px; }
}




  /* ==========================================
   17. ESTILOS ADICIONAIS (opcional)
   ========================================== */

/* --------------------------------------------------------------------
   17.1 Prévia do cartão: descrição resumida + link "Ver mais"
   O texto completo continua no HTML, só fica visualmente truncado aqui.
   A versão completa aparece no Quick View ao clicar na foto ou no link.
   -------------------------------------------------------------------- */
.cartao-produto__descricao{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cartao-produto__figura{ cursor: pointer; }

.cartao-produto__ver-mais{
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 700;
  color: #9B7A72;
  border-bottom: 1px solid #9B7A72;
  padding-bottom: 1px;
  transition: color var(--transicao), border-color var(--transicao);
}
.cartao-produto__ver-mais:hover{
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

/* --------------------------------------------------------------------
   17.2 Quick View — foto ampliada + informações completas do produto
   -------------------------------------------------------------------- */
.quickview-overlay{
  position: fixed;
  inset: 0;
  background: rgba(74,61,53,0.001);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: var(--z-quickview);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, background 0.35s ease, backdrop-filter 0.35s ease;
}
.quickview-overlay.aberto{
  opacity: 1;
  pointer-events: auto;
  background: rgba(74,61,53,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.quickview{
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  background: var(--cor-fundo);
  border-radius: 26px 26px 0 0;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(.32,.72,0,1);
  position: relative;
  box-shadow: var(--sombra-forte);
}
.quickview-overlay.aberto .quickview{ transform: translateY(0); }

@media (min-width: 700px){
  .quickview-overlay{ align-items: center; }
  .quickview{
    border-radius: var(--raio);
    max-height: 88vh;
    transform: translateY(24px) scale(0.97);
    opacity: 0;
  }
  .quickview-overlay.aberto .quickview{
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.quickview__handle{
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
  background: var(--cor-fundo);
  z-index: 2;
}
.quickview__handle span{
  width: 38px; height: 4px;
  border-radius: 4px;
  background: var(--cor-borda);
}
@media (min-width: 700px){ .quickview__handle{ display: none; } }

.quickview__fechar{
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  box-shadow: var(--sombra);
}
.quickview__fechar .icone{ width: 16px; height: 16px; }

.quickview__figura{
  aspect-ratio: 1 / 1;
  background: var(--cor-fundo-alt);
  overflow: hidden;
  position: relative;
}

.quickview__corpo{ padding: 18px 22px 26px; }

.quickview__categoria{
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-sage);
}

.quickview__titulo{ font-size: 1.5rem; margin: 4px 0 10px; }

.quickview__preco{
  font-family: var(--fonte-display);
  font-size: 1.6rem;
  color: var(--cor-primaria);
  font-weight: 600;
  margin-bottom: 14px;
  display: block;
}
.quickview__preco small{
  display: block;
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--cor-texto-suave);
  margin-top: 2px;
}

.quickview__descricao{
  font-size: 0.92rem;
  color: var(--cor-texto-suave);
  margin-bottom: 20px;
}

.quickview__linha-acao{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.quickview__adicionar{ flex: 1; justify-content: center; }

@media (max-width: 420px){
  .quickview__linha-acao{ flex-direction: column; align-items: stretch; }
  .quickview__linha-acao .seletor-quantidade{ align-self: center; }
}