/*
Theme Name: Eu Amo Aprender
Theme URI: https://euamoaprender.com.br
Author: Eu Amo Aprender
Author URI: https://euamoaprender.com.br
Description: Tema WordPress lúdico e afetivo para a loja de infoprodutos pedagógicos "Eu Amo Aprender", com suporte a WooCommerce. Feito para professores, psicopedagogos, terapeutas e famílias que buscam materiais alinhados à BNCC de um jeito divertido.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: eu-amo-aprender
Tags: e-commerce, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root{
  /* Paleta da marca */
  --cor-roxo: #503E75;
  --cor-roxo-escuro: #3B2D57;
  --cor-amarelo: #F4B14D;
  --cor-verde: #45BCAC;
  --cor-verde-escuro: #349488;
  --cor-coral: #F36273;
  --cor-coral-escuro: #DE4658;

  /* Fundos */
  --cor-fundo: #FFF9F2;
  --cor-fundo-alt: #FCEFDD;
  --cor-branco: #FFFFFF;

  /* Texto */
  --cor-texto: #3B2D57;
  --cor-texto-suave: #6C5E87;

  /* Tipografia */
  --fonte-titulo: 'Baloo 2', system-ui, sans-serif;
  --fonte-corpo: 'Quicksand', system-ui, sans-serif;
  --fonte-script: 'Caveat', cursive;

  /* Layout */
  --largura-max: 1200px;
  --raio: 20px;
  --raio-pequeno: 12px;
  --sombra: 0 10px 30px rgba(80, 62, 117, 0.12);
  --sombra-forte: 0 16px 40px rgba(80, 62, 117, 0.20);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a{ color: var(--cor-verde-escuro); text-decoration: none; transition: color .2s ease; }
a:hover{ color: var(--cor-coral); }

h1, h2, h3, h4, h5, h6{
  font-family: var(--fonte-titulo);
  color: var(--cor-roxo);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5em;
}

h1{ font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; }
h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; }
h3{ font-size: 1.4rem; }

p{ margin: 0 0 1em; }

.container{
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Foco visível para acessibilidade */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--cor-amarelo);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Frase manuscrita de destaque (assinatura tipográfica da marca) */
.destaque-script{
  font-family: var(--fonte-script);
  color: var(--cor-coral);
  font-size: 1.6em;
  font-weight: 600;
  display: inline-block;
}

/* Marcador coração — usado em listas afetivas (o que o material traz, benefícios etc.) */
.lista-coracao{ list-style: none; margin: 0; padding: 0; }
.lista-coracao li{
  position: relative;
  padding-left: 34px;
  margin-bottom: .7em;
}
.lista-coracao li::before{
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  background-color: var(--cor-coral);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10.2-9.3C.3 8.9 1.6 5 5.3 4.1 8 3.5 10.3 5 12 7.2 13.7 5 16 3.5 18.7 4.1c3.7.9 5 4.8 3.5 7.6C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10.2-9.3C.3 8.9 1.6 5 5.3 4.1 8 3.5 10.3 5 12 7.2 13.7 5 16 3.5 18.7 4.1c3.7.9 5 4.8 3.5 7.6C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
  mask-size: contain; -webkit-mask-size: contain;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}

/* Divisória "recorte de papel" entre seções — elemento assinatura do tema */
.onda-divisoria{
  width: 100%;
  height: 60px;
  display: block;
  line-height: 0;
}
.onda-divisoria svg{ width: 100%; height: 100%; display: block; }

/* ==========================================================================
   3. BOTÕES
   ========================================================================== */

.botao{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.botao:hover{ transform: translateY(-2px) scale(1.02); }

.botao-primario{
  background: var(--cor-verde);
  color: var(--cor-branco);
  box-shadow: 0 8px 20px rgba(69, 188, 172, .35);
}
.botao-primario:hover{ background: var(--cor-verde-escuro); color: var(--cor-branco); }

.botao-secundario{
  background: var(--cor-amarelo);
  color: var(--cor-roxo-escuro);
  box-shadow: 0 8px 20px rgba(244, 177, 77, .35);
}
.botao-secundario:hover{ background: #e89f34; color: var(--cor-roxo-escuro); }

.botao-fantasma{
  background: transparent;
  color: var(--cor-branco);
  border: 2px solid var(--cor-branco);
}
.botao-fantasma:hover{ background: rgba(255,255,255,.15); color: var(--cor-branco); }

/* ==========================================================================
   4. HEADER / NAVEGAÇÃO
   ========================================================================== */

.site-header{
  background: var(--cor-fundo);
}

.site-header-principal{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cor-fundo);
  border-bottom: 3px dashed rgba(80, 62, 117, .15);
}

.topo-contato{
  background: var(--cor-roxo);
  color: rgba(255,255,255,.9);
  font-size: .82rem;
}
.topo-contato .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topo-contato-info{ display: flex; align-items: center; gap: 24px; }
.topo-item{ display: inline-flex; align-items: center; gap: 6px; }
.topo-item a{ color: rgba(255,255,255,.9); }
.topo-item a:hover{ color: var(--cor-amarelo); }
.topo-item svg{ flex-shrink: 0; opacity: .85; }

.topo-contato-social{ display: flex; align-items: center; gap: 14px; }
.icone-social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}
.icone-social-link:hover{ opacity: 1; transform: translateY(-2px); }
.icone-social-link img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

@media (max-width: 760px){
  .topo-contato-info{ gap: 14px; }
  .topo-item span, .topo-item a{ font-size: .75rem; }
}
@media (max-width: 560px){
  .topo-contato .container{ flex-direction: column; gap: 4px; padding: 6px 24px; }
  .topo-contato-info{ gap: 14px; flex-wrap: wrap; justify-content: center; }
}

.site-header-principal .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.site-branding{ display: flex; align-items: center; }
.site-branding img{ max-height: 56px; width: auto; }
.site-branding .site-title{
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--cor-roxo);
  margin: 0;
}
.site-branding .site-title a{ color: inherit; }

.main-navigation{ flex: 1; display: flex; justify-content: center; }
.main-navigation ul{
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-navigation a{
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--cor-roxo);
  padding: 6px 2px;
  position: relative;
}
.main-navigation a::after{
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0%; height: 3px;
  background: var(--cor-coral);
  border-radius: 3px;
  transition: width .2s ease;
}
.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after{ width: 100%; }
.main-navigation a:hover{ color: var(--cor-coral); }

.header-actions{ display: flex; align-items: center; gap: 18px; }

/* Força a cor roxa da marca em todos os ícones do cabeçalho — com
   !important porque plugins como o Elementor injetam CSS global que às
   vezes ganha a disputa de especificidade contra o CSS do tema. */
.header-actions .header-busca-toggle,
.header-actions .header-cart,
.header-actions .menu-toggle{
  color: var(--cor-roxo) !important;
}
.header-actions svg{
  stroke: currentColor !important;
}

.header-cart{
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 1.4rem;
}
.header-cart .contador{
  position: absolute;
  top: -8px; right: -10px;
  background: var(--cor-coral);
  color: var(--cor-branco);
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: .7rem;
  min-width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   BUSCA DE PRODUTOS — ícone que expande um campo de texto
   (shortcode [euamoaprender_busca], usável em qualquer widget do Elementor)
   ========================================================================== */

.euamoaprender-busca-inline{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.euamoaprender-busca-inline .busca-inline-toggle{
  background: none !important;
  border: none !important;
  color: var(--cor-roxo) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px;
  transition: color .2s ease;
}
.euamoaprender-busca-inline .busca-inline-toggle svg{ stroke: currentColor !important; }
.euamoaprender-busca-inline .busca-inline-toggle:hover{ color: var(--cor-coral) !important; }
.euamoaprender-busca-inline.aberta .busca-inline-toggle{ color: var(--cor-coral) !important; }

.euamoaprender-busca-inline .busca-inline-form{
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) scaleX(0) !important;
  transform-origin: right center !important;
  width: 0 !important;
  max-width: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  margin: 0 !important;
  z-index: 200;
  transition: width .25s ease, opacity .2s ease, transform .25s ease;
}
.euamoaprender-busca-inline.aberta .busca-inline-form{
  width: 230px !important;
  opacity: 1 !important;
  transform: translateY(-50%) scaleX(1) !important;
  pointer-events: auto !important;
  right: 34px !important;
}

.euamoaprender-busca-inline .busca-inline-input{
  width: 100% !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  border: 2px solid var(--cor-fundo-alt) !important;
  background: var(--cor-branco) !important;
  font-family: var(--fonte-corpo) !important;
  font-weight: 600 !important;
  font-size: .92rem !important;
  color: var(--cor-texto) !important;
  box-sizing: border-box !important;
  box-shadow: 0 6px 16px rgba(80,62,117,.14);
}
.euamoaprender-busca-inline .busca-inline-input:focus{ outline: none !important; border-color: var(--cor-verde) !important; }

@media (max-width: 560px){
  .euamoaprender-busca-inline.aberta .busca-inline-form{
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    background: var(--cor-fundo) !important;
    padding: 14px 20px !important;
    box-shadow: 0 -6px 20px rgba(80,62,117,.12);
    box-sizing: border-box !important;
  }
}

.menu-toggle{
  display: none;
  background: none; border: none;
  font-size: 1.8rem;
  color: var(--cor-roxo);
  cursor: pointer;
}

@media (max-width: 860px){
  .main-navigation{ display: none; }
  .menu-toggle{ display: block; }
  .main-navigation.nav-aberta ul{ flex-direction: column; gap: 14px; }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */

.hero{
  position: relative;
  background: linear-gradient(155deg, var(--cor-roxo) 0%, var(--cor-roxo-escuro) 100%);
  color: var(--cor-branco);
  overflow: hidden;
  padding-top: 70px;
}

.hero .container{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 40px;
  padding-bottom: 90px;
  position: relative;
  z-index: 2;
}

.hero-eyebrow{
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(255,255,255,.12);
  color: var(--cor-amarelo);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero h1{ color: var(--cor-branco); margin-bottom: .3em; }
.hero h1 span{ color: var(--cor-amarelo); }

.hero p.hero-subtitulo{
  font-size: 1.15rem;
  color: rgba(255,255,255,.85);
  max-width: 46ch;
  margin-bottom: 1.6em;
}

.hero-acoes{ display: flex; gap: 16px; flex-wrap: wrap; }

.hero-visual{ position: relative; }
.hero-visual .figura-principal{
  border-radius: var(--raio);
  box-shadow: var(--sombra-forte);
  transform: rotate(2deg);
}
.hero-visual .coracao-flutuante{
  position: absolute;
  color: var(--cor-coral);
  opacity: .9;
  animation: flutuar 4s ease-in-out infinite;
}
.hero-visual .coracao-flutuante.c1{ top: -18px; right: 20px; width: 46px; }
.hero-visual .coracao-flutuante.c2{ bottom: 30px; left: -22px; width: 32px; color: var(--cor-amarelo); animation-delay: 1s; }

@keyframes flutuar{
  0%, 100%{ transform: translateY(0) rotate(-6deg); }
  50%{ transform: translateY(-14px) rotate(6deg); }
}

.hero .onda-divisoria{ position: absolute; bottom: -2px; left: 0; z-index: 1; }

@media (max-width: 860px){
  .hero .container{ grid-template-columns: 1fr; text-align: center; }
  .hero-acoes{ justify-content: center; }
  .hero-visual{ order: -1; max-width: 340px; margin: 0 auto; }
}

/* ==========================================================================
   6. SEÇÃO PADRÃO / TÍTULOS DE SEÇÃO
   ========================================================================== */

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

.titulo-secao{ text-align: center; max-width: 640px; margin: 0 auto 50px; }
.titulo-secao .eyebrow{
  font-family: var(--fonte-script);
  font-size: 1.5rem;
  color: var(--cor-coral);
  display: block;
  margin-bottom: -6px;
}

/* ==========================================================================
   7. CATEGORIAS (blobs coloridos)
   ========================================================================== */

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

.categoria-card{
  text-align: center;
  padding: 34px 18px;
  border-radius: var(--raio);
  color: var(--cor-branco);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--sombra);
}
.categoria-card:hover{ transform: translateY(-6px) rotate(-1deg); }
.categoria-card .icone{ font-size: 2.4rem; margin-bottom: 10px; }
.categoria-card h3{ color: var(--cor-branco); margin-bottom: 4px; }
.categoria-card p{ font-size: .9rem; opacity: .9; margin: 0; }

.categoria-card:nth-child(4n+1){ background: var(--cor-verde); }
.categoria-card:nth-child(4n+2){ background: var(--cor-coral); }
.categoria-card:nth-child(4n+3){ background: var(--cor-amarelo); color: var(--cor-roxo-escuro); }
.categoria-card:nth-child(4n+3) h3{ color: var(--cor-roxo-escuro); }
.categoria-card:nth-child(4n+4){ background: var(--cor-roxo); }

@media (max-width: 860px){
  .grade-categorias{ grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   8. PRODUTOS (grid + card) — compatível com WooCommerce
   ========================================================================== */

ul.products, .grade-produtos{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  list-style: none;
  margin: 0; padding: 0;
}

/* O WooCommerce aplica width/float por padrão nos itens (ex: 30.75%, float:left)
   pensando num layout clássico de 3 colunas. Isso conflita com o nosso grid de
   4 colunas e faz os cards encolherem. Anulamos tudo isso aqui. */
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: var(--cor-branco);
  border-radius: var(--raio);
  padding: 18px;
  box-shadow: var(--sombra);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
ul.products li.product:hover, .produto-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--sombra-forte);
}

.produto-card{
  background: var(--cor-branco);
  border-radius: var(--raio);
  padding: 18px;
  box-shadow: var(--sombra);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}

ul.products li.product img{
  width: 100% !important;
  height: auto !important;
  border-radius: var(--raio-pequeno);
  margin-bottom: 14px;
  aspect-ratio: 4/3;
  object-fit: cover;
}

ul.products li.product .woocommerce-loop-product__title,
.produto-card h3{
  font-size: 1.05rem;
  color: var(--cor-roxo);
  margin: 0 0 6px;
}

ul.products li.product .price, .produto-card .preco{
  font-family: var(--fonte-titulo);
  font-weight: 800;
  color: var(--cor-verde-escuro);
  font-size: 1.15rem;
}
ul.products li.product .price del{ color: var(--cor-texto-suave); opacity: .6; font-weight: 500; }
ul.products li.product .price ins{ text-decoration: none; }

.selo{
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 6px 6px 0;
}
.selo-bncc{ background: rgba(69, 188, 172, .15); color: var(--cor-verde-escuro); }
.selo-idade{ background: rgba(244, 177, 77, .2); color: #a06b1a; }

/* Botão "adicionar ao carrinho" do WooCommerce */
a.add_to_cart_button, a.ajax_add_to_cart, .produto-card .botao{
  display: inline-flex !important;
  margin-top: 12px;
  font-family: var(--fonte-titulo) !important;
  font-weight: 700 !important;
  background: var(--cor-roxo) !important;
  color: var(--cor-branco) !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  border: none !important;
  transition: background .2s ease !important;
}
a.add_to_cart_button:hover{ background: var(--cor-coral) !important; }

.onsale{
  font-family: var(--fonte-titulo) !important;
  background: var(--cor-coral) !important;
  color: var(--cor-branco) !important;
  border-radius: 50% !important;
  font-weight: 800 !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (max-width: 1000px){
  ul.products, .grade-produtos{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px){
  ul.products, .grade-produtos{ grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   9. DEPOIMENTOS
   ========================================================================== */

.grade-depoimentos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.depoimento-card{
  background: var(--cor-branco);
  border-radius: var(--raio);
  padding: 30px;
  box-shadow: var(--sombra);
  position: relative;
}
.depoimento-card::before{
  content: "“";
  font-family: var(--fonte-script);
  font-size: 4rem;
  color: var(--cor-coral);
  opacity: .35;
  position: absolute;
  top: 4px; left: 18px;
  line-height: 1;
}
.depoimento-card p{ margin-top: 20px; color: var(--cor-texto-suave); font-style: normal; }
.depoimento-autor{ display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.depoimento-autor img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.depoimento-autor strong{ display: block; color: var(--cor-roxo); font-family: var(--fonte-titulo); }
.depoimento-autor span{ font-size: .85rem; color: var(--cor-texto-suave); }

@media (max-width: 860px){
  .grade-depoimentos{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. CTA NEWSLETTER
   ========================================================================== */

.cta-newsletter{
  background: var(--cor-verde);
  border-radius: var(--raio);
  padding: 50px 40px;
  text-align: center;
  color: var(--cor-branco);
  margin: 0 24px;
}
.cta-newsletter h2{ color: var(--cor-branco); }
.cta-newsletter form{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.cta-newsletter input[type="email"]{
  padding: 14px 20px;
  border-radius: 999px;
  border: none;
  min-width: 280px;
  font-family: var(--fonte-corpo);
  font-weight: 600;
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.site-footer{
  background: var(--cor-roxo-escuro);
  color: rgba(255,255,255,.85);
  padding-top: 70px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 20px 0 40px;
}
.footer-grid h4{
  font-family: var(--fonte-titulo);
  color: var(--cor-amarelo);
  font-size: 1rem;
  margin-bottom: 16px;
}
.footer-grid ul{ list-style: none; margin: 0; padding: 0; }
.footer-grid li{ margin-bottom: 10px; }
.footer-grid a{ color: rgba(255,255,255,.75); }
.footer-grid a:hover{ color: var(--cor-amarelo); }
.footer-brand p{ color: rgba(255,255,255,.7); max-width: 32ch; }
.footer-social{ display: flex; gap: 14px; margin-top: 14px; }
.footer-social a{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--cor-branco);
  opacity: 1;
}
.footer-social a:hover{ background: var(--cor-coral); transform: none; }
.footer-social a img{
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
  padding: 20px 0;
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}

@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
  .footer-grid{ grid-template-columns: 1fr; text-align: center; }
  .footer-social{ justify-content: center; }
  .footer-brand p{ margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   12. PÁGINAS DE CONTEÚDO GERAL (page.php / single.php)
   ========================================================================== */

.conteudo-pagina{
  max-width: 780px;
  margin: 60px auto;
  padding: 0 24px;
}
.conteudo-pagina .entry-title{ margin-bottom: .3em; }
.conteudo-pagina .entry-content h2{ margin-top: 1.4em; }
.conteudo-pagina img{ border-radius: var(--raio); }

.breadcrumb{
  font-size: .85rem;
  color: var(--cor-texto-suave);
  padding: 18px 0 0;
}
.breadcrumb a{ color: var(--cor-verde-escuro); }

/* ==========================================================================
   18. BUSCA DE PRODUTOS (search.php)
   ========================================================================== */

.busca-resultados{ padding-bottom: 90px; }
.busca-resultados .titulo-secao{ text-align: left; max-width: none; margin-bottom: 40px; }
.busca-resultados .titulo-secao h1{ word-break: break-word; }

.grade-busca{ margin-top: 10px; }

.busca-item-link{
  display: block;
  color: inherit;
}
.busca-item-link:hover .woocommerce-loop-product__title{ color: var(--cor-coral); }
.busca-item-link img{
  width: 100%;
  height: auto;
  border-radius: var(--raio-pequeno);
  margin-bottom: 14px;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.busca-descricao-curta{
  font-size: .88rem;
  color: var(--cor-texto-suave);
  margin: 8px 0 12px;
  line-height: 1.5;
}

.busca-vazia{
  text-align: center;
  background: var(--cor-branco);
  border-radius: var(--raio);
  padding: 60px 30px;
  box-shadow: var(--sombra);
  max-width: 560px;
  margin: 0 auto;
}
.busca-vazia p{ color: var(--cor-texto-suave); }
.busca-vazia .botao{ margin-top: 10px; }

@media (max-width: 560px){
  .busca-resultados .titulo-secao h1{ font-size: 1.5rem; }
}

/* ==========================================================================
   13. WOOCOMMERCE — WRAPPER GERAL
   ========================================================================== */

.woocommerce-wrapper{ padding: 40px 0 90px; }

.woocommerce-breadcrumb{
  font-size: .85rem;
  color: var(--cor-texto-suave);
  margin-bottom: 30px;
  display: block;
}
.woocommerce-breadcrumb a{ color: var(--cor-verde-escuro); }

/* Título da loja / categoria */
.woocommerce-products-header{ text-align: center; max-width: 640px; margin: 0 auto 40px; }
.woocommerce-products-header__title{
  font-family: var(--fonte-titulo);
  color: var(--cor-roxo);
}
.term-description{ color: var(--cor-texto-suave); }

/* Barra de resultados + ordenação
   O WooCommerce por padrão usa float:left/float:right nesses dois elementos
   sem "limpar" o float depois — isso deixa um vão vazio antes do grid de
   produtos começar. Neutralizamos o float e garantimos que o grid comece
   exatamente abaixo, sem espaço extra. */
.woocommerce-result-count,
.woocommerce-ordering{
  float: none !important;
  margin: 0 0 20px !important;
}
.woocommerce-result-count{ color: var(--cor-texto-suave); font-size: .9rem; }
.woocommerce-ordering select{
  font-family: var(--fonte-corpo);
  font-weight: 600;
  border: 2px solid var(--cor-fundo-alt);
  border-radius: 999px;
  padding: 8px 16px;
  background: var(--cor-branco);
  color: var(--cor-roxo);
}

/* Linha com o contador de resultados à esquerda e a ordenação à direita */
.woocommerce-result-count{ display: inline-block; }
.woocommerce-ordering{ display: inline-block; }
@media (min-width: 561px){
  .woocommerce-result-count{ float: left !important; }
  .woocommerce-ordering{ float: right !important; }
}

/* Limpa qualquer float pendente antes do grid começar — elimina o vão vazio */
ul.products, .grade-produtos{
  clear: both !important;
  margin-top: 0 !important;
}

.woocommerce-notices-wrapper{ margin-bottom: 20px; }
.woocommerce-info, .woocommerce-message{
  background: var(--cor-fundo-alt);
  border-top-color: var(--cor-verde) !important;
  border-radius: var(--raio-pequeno);
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
}
.woocommerce-info::before, .woocommerce-message::before{ color: var(--cor-verde-escuro) !important; }

/* Paginação da loja */
nav.woocommerce-pagination ul.page-numbers{ border: none; }
nav.woocommerce-pagination ul.page-numbers li{ border: none; margin: 0 4px; }
nav.woocommerce-pagination .page-numbers{
  border-radius: 50% !important;
  font-family: var(--fonte-titulo);
  color: var(--cor-roxo) !important;
}
nav.woocommerce-pagination .page-numbers.current{
  background: var(--cor-verde) !important;
  color: var(--cor-branco) !important;
}

/* Filtros/sidebar da loja (caso ativados via widget) */
.woocommerce-widget-layered-nav ul, .woocommerce-widget-layered-nav-list{ list-style: none; padding: 0; }
.woocommerce-widget-layered-nav-list li a{ color: var(--cor-texto); }
.price_slider_amount .button{
  background: var(--cor-verde) !important;
  border-radius: 999px !important;
  font-family: var(--fonte-titulo) !important;
}

/* ==========================================================================
   14. WOOCOMMERCE — PÁGINA DE PRODUTO ÚNICO
   --------------------------------------------------------------------------
   O layout da página de produto único agora é montado manualmente no
   Elementor Pro (Theme Builder > Produto Único), então o CSS específico
   que existia aqui foi removido — ele foi feito para o template PADRÃO
   do WooCommerce e conflitava com o layout novo (forçava grid de 2
   colunas e estilos fixos em cima da mesma div.product que o Elementor usa).
   Os selos de BNCC/faixa etária (classes .selo, .selo-bncc, .selo-idade)
   continuam definidos lá na seção 8 (Produtos) e funcionam normalmente
   via os shortcodes [euamoaprender_selos] e [euamoaprender_detalhes_pedagogicos].
   ========================================================================== */


/* ==========================================================================
   15. WOOCOMMERCE — CARRINHO
   ========================================================================== */

.woocommerce-cart-form{ background: var(--cor-branco); border-radius: var(--raio); padding: 10px 30px; box-shadow: var(--sombra); }

table.shop_table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fonte-corpo);
}
table.shop_table th{
  font-family: var(--fonte-titulo);
  color: var(--cor-roxo);
  text-align: left;
  padding: 16px 10px;
  border-bottom: 2px solid var(--cor-fundo-alt);
}
table.shop_table td{
  padding: 18px 10px;
  border-bottom: 1px solid var(--cor-fundo-alt);
  vertical-align: middle;
}
table.shop_table .product-thumbnail img{
  border-radius: var(--raio-pequeno);
  width: 72px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
table.shop_table .product-name a{ color: var(--cor-roxo); font-weight: 700; }
table.shop_table .product-price, table.shop_table .product-subtotal{
  font-family: var(--fonte-titulo);
  color: var(--cor-verde-escuro);
  font-weight: 700;
}
table.shop_table .product-remove a{
  color: var(--cor-coral) !important;
  font-size: 1.3rem;
  border: none !important;
}

.woocommerce-cart-form .quantity input.qty{
  width: 60px;
  padding: 8px;
  border-radius: 999px;
  border: 2px solid var(--cor-fundo-alt);
  text-align: center;
}

.woocommerce-cart-form button[name="update_cart"], .coupon .button{
  background: var(--cor-fundo-alt) !important;
  color: var(--cor-roxo) !important;
  font-family: var(--fonte-titulo) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: none !important;
  padding: 12px 24px !important;
}
.coupon input#coupon_code{
  border-radius: 999px;
  border: 2px solid var(--cor-fundo-alt);
  padding: 12px 18px;
  margin-right: 10px;
}

.cart-collaterals{ margin-top: 40px; }
.cart_totals{
  background: var(--cor-fundo-alt);
  border-radius: var(--raio);
  padding: 30px;
  max-width: 420px;
  margin-left: auto;
}
.cart_totals h2{ margin-bottom: 16px; }
.cart_totals table{ width: 100%; }
.cart_totals table th{ font-family: var(--fonte-corpo); font-weight: 700; color: var(--cor-texto); padding: 10px 0; }
.cart_totals table td{ padding: 10px 0; text-align: right; }
.cart_totals .order-total .woocommerce-Price-amount{
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  color: var(--cor-verde-escuro);
}
.wc-proceed-to-checkout .checkout-button{
  display: block !important;
  text-align: center;
  background: var(--cor-verde) !important;
  color: var(--cor-branco) !important;
  font-family: var(--fonte-titulo) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 16px !important;
  margin-top: 16px !important;
}
.wc-proceed-to-checkout .checkout-button:hover{ background: var(--cor-verde-escuro) !important; }

.cart-empty{
  text-align: center;
  background: var(--cor-branco);
  border-radius: var(--raio);
  padding: 60px 30px;
  box-shadow: var(--sombra);
}
.cart-empty::before{ content: "💜"; display: block; font-size: 3rem; margin-bottom: 10px; }
.return-to-shop .button{
  display: inline-block;
  margin-top: 16px;
  background: var(--cor-roxo);
  color: var(--cor-branco) !important;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 28px;
}

@media (max-width: 860px){
  table.shop_table thead{ display: none; }
  table.shop_table, table.shop_table tbody, table.shop_table tr, table.shop_table td{ display: block; width: 100%; }
  table.shop_table tr{ border-bottom: 2px solid var(--cor-fundo-alt); padding: 14px 0; }
  .cart_totals{ margin: 0; max-width: none; }
}

/* ==========================================================================
   16. WOOCOMMERCE — CHECKOUT
   ========================================================================== */

.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.woocommerce-checkout h3{ margin-top: 1.2em; }

.woocommerce-billing-fields .form-row,
.woocommerce-additional-fields .form-row{ margin-bottom: 16px; }

.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea{
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--cor-fundo-alt);
  border-radius: var(--raio-pequeno);
  font-family: var(--fonte-corpo);
  font-weight: 600;
  color: var(--cor-texto);
  background: var(--cor-branco);
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus{
  border-color: var(--cor-verde);
  outline: none;
}
.woocommerce-checkout label{
  font-family: var(--fonte-corpo);
  font-weight: 700;
  color: var(--cor-roxo);
  display: block;
  margin-bottom: 6px;
}

#order_review{
  background: var(--cor-fundo-alt);
  border-radius: var(--raio);
  padding: 30px;
  margin-top: 30px;
}
#order_review table.shop_table{ background: transparent; box-shadow: none; }

/* --------------------------------------------------------------------------
   Correção: nome do produto quebrando letra por letra no resumo do pedido.
   Isso acontece quando a coluna do nome fica espremida numa largura menor
   que o conteúdo — comum quando o checkout é montado com o widget de
   Checkout do Elementor Pro (estrutura HTML um pouco diferente da tabela
   padrão do WooCommerce). As regras abaixo cobrem os dois cenários.
   -------------------------------------------------------------------------- */

body.woocommerce-checkout table.shop_table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table{
  table-layout: auto !important;
  width: 100% !important;
}

body.woocommerce-checkout .product-name,
body.woocommerce-checkout td.product-name,
body.woocommerce-checkout .cart_item .product-name{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  flex: 1 1 auto !important;
  text-align: left !important;
}

/* Caso o Elementor Pro monte cada item como uma linha em div (imagem + nome + preço)
   em vez de <tr>/<td> de tabela, garantimos que a coluna de texto sempre tenha espaço.
   Não mexemos no display de <tr> reais — só dessa classe específica, que só existe
   nessa estrutura em div. */
body.woocommerce-checkout div.cart_item{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
}

body.woocommerce-checkout .cart_item img,
body.woocommerce-checkout .product-name img,
body.woocommerce-checkout .product-thumbnail img{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  object-fit: cover !important;
  border-radius: var(--raio-pequeno) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

body.woocommerce-checkout .product-total,
body.woocommerce-checkout td.product-total{
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin-left: auto !important;
  text-align: right !important;
}

body.woocommerce-checkout .product-quantity{
  white-space: nowrap !important;
}

.woocommerce-checkout-payment{
  background: var(--cor-branco);
  border-radius: var(--raio-pequeno);
  margin-top: 20px;
}
.woocommerce-checkout-payment ul.payment_methods{ list-style: none; padding: 16px; margin: 0; }
.woocommerce-checkout-payment .payment_box{
  background: var(--cor-fundo);
  border-radius: var(--raio-pequeno);
  padding: 14px;
  margin-top: 8px;
  color: var(--cor-texto-suave);
  font-size: .9rem;
}

#place_order{
  width: 100%;
  background: var(--cor-verde) !important;
  color: var(--cor-branco) !important;
  font-family: var(--fonte-titulo) !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  border-radius: 999px !important;
  padding: 18px !important;
  border: none !important;
  margin-top: 20px !important;
  transition: background .2s ease !important;
}
#place_order:hover{ background: var(--cor-verde-escuro) !important; }

.woocommerce-checkout .required{ color: var(--cor-coral); }

/* ==========================================================================
   17. WOOCOMMERCE — MINHA CONTA
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style: none; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li{
  margin-bottom: 6px;
}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display: block;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--cor-roxo);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background: var(--cor-verde);
  color: var(--cor-branco);
}
.woocommerce-account .woocommerce-MyAccount-content{
  background: var(--cor-branco);
  border-radius: var(--raio);
  padding: 30px;
  box-shadow: var(--sombra);
}
.woocommerce-account form .button, .woocommerce-account button{
  background: var(--cor-roxo) !important;
  color: var(--cor-branco) !important;
  font-family: var(--fonte-titulo) !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  border: none !important;
}
.woocommerce-MyAccount-navigation{ margin-bottom: 30px; }

@media (min-width: 860px){
  .woocommerce-account .woocommerce-MyAccount-navigation{
    float: left; width: 220px; margin-right: 30px;
  }
  .woocommerce-account .woocommerce-MyAccount-content{
    overflow: hidden;
  }
}

/* Ícones nos itens do menu da conta */
.woocommerce-MyAccount-navigation-link--dashboard a::before{ content: "🏠 "; }
.woocommerce-MyAccount-navigation-link--orders a::before{ content: "📦 "; }
.woocommerce-MyAccount-navigation-link--downloads a::before{ content: "💜 "; }
.woocommerce-MyAccount-navigation-link--edit-address a::before{ content: "📍 "; }
.woocommerce-MyAccount-navigation-link--edit-account a::before{ content: "⚙️ "; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before{ content: "👋 "; }

.conta-titulo-secao{
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px dashed var(--cor-fundo-alt);
}

.conta-estado-vazio{
  text-align: center;
  padding: 50px 20px;
  color: var(--cor-texto-suave);
}
.conta-estado-vazio p{ margin-bottom: 8px; }
.conta-estado-vazio .botao{ margin-top: 14px; }

/* Cards de "Meus Produtos" (materiais comprados / downloads) */
.grade-meus-produtos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.produto-comprado-card{
  background: var(--cor-fundo);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra);
}
.produto-comprado-thumb{ display: block; margin-bottom: 12px; }
.produto-comprado-thumb img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--raio-pequeno);
}
.produto-comprado-titulo{ font-size: 1rem; margin-bottom: 12px; }
.produto-comprado-titulo a{ color: var(--cor-roxo); }
.produto-comprado-arquivos{ display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.botao-download{ width: 100%; justify-content: center; padding: 12px 20px !important; }
.produto-comprado-meta{ font-size: .78rem; color: var(--cor-texto-suave); }

@media (max-width: 760px){
  .grade-meus-produtos{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .grade-meus-produtos{ grid-template-columns: 1fr; }
}