/*
	Theme Name: Eclat Gold
	Theme URI: https://github.com/eclatgold/tema
	Description: Tema da marca Eclat Gold — Design System v1.2 (Verde Esmeralda + neutros). Header, footer e home customizados sobre a base Hello Elementor, com WooCommerce. Fonte Inter.
	Author: Eclat Gold
	Template: hello-elementor
	Version: 3.46.0
	Text Domain: hello-elementor-child
	License: GNU General Public License v3 or later.
*/

/* =========================================================
   ECLAT GOLD — DESIGN TOKENS (v1.1 · Verde + Neutros)
   ========================================================= */
:root{
  /* Escala Verde Esmeralda */
  --eg-g50:#e6f2ee; --eg-g100:#bfe0d6; --eg-g200:#8fcab8; --eg-g300:#5cae9b;
  --eg-g400:#2f8b76; --eg-g500:#0E6E5C; --eg-g600:#0c5f50; --eg-g700:#0a5548;
  --eg-g800:#083f36; --eg-g900:#063a31;
  /* Papéis / semânticas — SEM dourado. Acento = verde escuro. */
  --eg-brand:#0E6E5C; --eg-brand-dark:#0a5548; --eg-accent:#0a5548;
  --eg-ink:#161616; --eg-ink2:#3f3f3d; --eg-muted:#8a8a88;
  --eg-sand:#f6f6f4; --eg-line:#e6e6e3; --eg-white:#fff;
  --eg-success:#1E9E5A; --eg-danger:#D9382C;
  /* Única exceção ao "sem dourado": a estrela. É a convenção que todo mundo
     lê sem pensar, e verde em estrela vira ruído. Não usar fora daqui. */
  --eg-star:#E0A82E; --eg-star-off:#E3E1DA;
  /* Tipografia */
  --eg-display:'Sofia Sans','Segoe UI',system-ui,sans-serif;
  --eg-body:'Sofia Sans','Segoe UI',system-ui,sans-serif;
  /* Raios (8/10/16/24) */
  --eg-r-input:8px; --eg-r-btn:10px; --eg-r-card:16px; --eg-r-pill:24px;
  --eg-shadow:0 6px 24px rgba(6,58,49,.06);
}

/* =========================================================
   BASE — Tipografia
   ========================================================= */
body{
  font-family:var(--eg-body);
  color:var(--eg-ink);
  background:var(--eg-sand);
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--eg-display);
  font-weight:600;
  color:var(--eg-ink);
}
a{ color:var(--eg-brand); }
a:hover{ color:var(--eg-brand-dark); }

/* =========================================================
   BOTÕES — WooCommerce + genéricos (verde)
   ========================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link,
.eg-btn{
  font-family:var(--eg-body);
  font-weight:600;
  font-size:14.5px;
  line-height:1;
  background:var(--eg-brand);
  color:#fff;
  border:none;
  border-radius:var(--eg-r-btn);
  padding:13px 22px;
  transition:.15s ease;
  text-transform:none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover,
.eg-btn:hover{
  background:var(--eg-brand-dark);
  color:#fff;
}

/* Botão principal (add ao carrinho / finalizar) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order{
  background:var(--eg-brand);
  color:#fff;
  border-radius:var(--eg-r-btn);
  padding:15px 26px;
  font-size:15.5px;
  font-weight:700;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover{
  background:var(--eg-brand-dark);
}

/* Variante escura (CTA secundário — verde escuro, sem dourado) */
.eg-btn--dark{ background:var(--eg-brand-dark); color:#fff; }
.eg-btn--dark:hover{ background:#063a31; color:#fff; }

/* Variante contorno */
.eg-btn--outline{
  background:#fff; color:var(--eg-brand);
  border:1.5px solid var(--eg-brand);
}
.eg-btn--outline:hover{ background:var(--eg-g50); color:var(--eg-brand-dark); }

/* Desabilitado */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.eg-btn:disabled{
  background:var(--eg-line); color:#a9a9a6; cursor:not-allowed;
}

/* =========================================================
   PREÇOS
   ========================================================= */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price,
.woocommerce-Price-amount{
  font-family:var(--eg-display);
  font-weight:700;
  color:var(--eg-g700);
}
.woocommerce div.product p.price{ font-size:2rem; }
/* Preço antigo em cinza claro — contexto, não concorrente do preço de venda. */
.woocommerce del,
.woocommerce del .woocommerce-Price-amount{
  color:#a8aaa6;
  font-family:var(--eg-body);
  font-weight:400;
}

/* =========================================================
   BADGE DE PROMOÇÃO (onsale) + selos
   ========================================================= */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
  background:var(--eg-danger);
  color:#fff;
  font-family:var(--eg-body);
  font-weight:800;
  font-size:13px;
  border-radius:var(--eg-r-pill);
  padding:6px 12px;
  min-height:auto;
  min-width:auto;
  line-height:1.1;
}
.eg-badge{
  display:inline-block;
  font-family:var(--eg-body);
  font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:20px;
}
.eg-badge--danger{ background:var(--eg-danger); color:#fff; }
.eg-badge--brand{ background:var(--eg-brand); color:#fff; }
.eg-badge--dark{ background:var(--eg-ink); color:#fff; }
.eg-badge--success{ background:var(--eg-success); color:#fff; }
.eg-badge--new{ background:var(--eg-g50); color:var(--eg-g700); }

/* =========================================================
   CARDS DE PRODUTO
   ========================================================= */
.woocommerce ul.products li.product{
  background:#fff;
  border:1px solid var(--eg-line);
  border-radius:var(--eg-r-card);
  box-shadow:var(--eg-shadow);
  padding:16px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(6,58,49,.10);
}
.woocommerce ul.products li.product a img{ border-radius:12px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--eg-body);
  font-weight:600;
  font-size:15px;
  color:var(--eg-ink);
}

/* =========================================================
   FORMULÁRIOS / INPUTS
   ========================================================= */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .form-row select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], textarea, select{
  border:1.5px solid var(--eg-line);
  border-radius:var(--eg-r-input);
  padding:12px 14px;
  font-family:var(--eg-body);
  font-size:14px;
}
.woocommerce form .form-row input.input-text:focus,
input[type="text"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, textarea:focus, select:focus{
  border-color:var(--eg-brand);
  box-shadow:0 0 0 3px var(--eg-g50);
  outline:none;
}

/* =========================================================
   AVALIAÇÕES (estrelas) — verde da marca (sem dourado)
   ========================================================= */
/* As estrelas são duas camadas sobrepostas: `::before` desenha as cinco
   vazias e `span::before` desenha por cima as cheias, recortadas pela nota.
   Pintar as duas de verde fazia 3 de 5 parecer 5 de 5. */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before{ color:var(--eg-star); }
.woocommerce .star-rating::before{ color:var(--eg-star-off); }

/* =========================================================
   DIVERSOS
   ========================================================= */
.woocommerce-message,
.woocommerce-info{ border-top-color:var(--eg-brand); }
.woocommerce-message::before,
.woocommerce-info::before{ color:var(--eg-brand); }
.woocommerce nav.woocommerce-pagination ul li a{ color:var(--eg-brand); }

/* =========================================================
   LARGURA PADRÃO DO SITE (aplica --eg-site-width a tudo)
   ========================================================= */

/* O Hello Elementor limita `.site-main` a 500/600/800/1140px por breakpoint,
   com a regra `body:not([class*=elementor-page-])`. Enquanto o Elementor
   existia, as páginas dele escapavam; sem o plugin a regra passou a valer em
   todo o site e apertava loja e produto a 1140px, enquanto header e rodapé
   iam a 1280. A regra abaixo (`main#content.site-main`) tem especificidade
   maior e devolve a largura do site. */

/* Neutraliza o teto do tema pai com o MESMO seletor dele — especificidade
   igual (0,2,1), e o CSS do filho carrega depois, então ganha por ordem.
   Precisa ser este seletor e não `.site-main`: na loja e no produto o <main>
   não tem id="content", então a regra abaixo (1,1,1) não os alcança e eles
   ficavam presos nos 1140px do Hello Elementor. */
body:not([class*="elementor-page-"]) .site-main{max-width:100%;padding-left:0;padding-right:0}

/* ---- respiro lateral no celular: um valor só para o site inteiro ----
   O header foi para 16px quando o carrinho não cabia em telas de 320px, mas
   home, loja, produto e carrinho ficaram nos 24px antigos — o conteúdo nascia
   8 a 18px mais para dentro que o cabeçalho em toda página.
   O prefixo `body` sobe a especificidade para (0,2,1): sem ele estas regras
   empatam com as dos arquivos de cada página, que carregam depois e venceriam
   por ordem. A faixa do banner continua sangrando de ponta a ponta. */
@media(max-width:600px){
  body .eg-hdr .eg-wrap,
  body .eg-footer .eg-wrap,
  body .eg-home .eg-h-wrap,
  body .eg-loja-wrap,
  body .eg-prod,
  body .eg-car,
  body .eg-ck,
  body .eg-ct-wrap,
  body .eg-rt-wrap,
  body .eg-404-wrap,
  body.woocommerce-account .site-main > .woocommerce,
  body.woocommerce-account .site-main > .page-content > .woocommerce{padding-left:16px;padding-right:16px}

  body .eg-h-slider-sec .eg-h-wrap{padding-left:0;padding-right:0}
}

/* Páginas renderizadas pelo tema (minha conta, páginas simples, blog, busca, 404) */
main#content.site-main{
  max-width:var(--eg-site-width,1200px);
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
  width:100%;
  box-sizing:border-box;
}
/* Um modelo só para o respiro lateral: `.site-main` cuida da largura, e quem
   paga os 24px é sempre o wrapper da página. Antes estava invertido em parte
   do site — o `.site-main` pagava 24px nas páginas e 10px nas listagens (regra
   do tema pai), e o wrapper somava os seus por cima. Resultado: cada página
   começava num ponto diferente. */
main#content.site-main .eg-car,
main#content.site-main .eg-ck,
main#content.site-main .eg-conta{
  max-width:100%;
}
/* Minha conta e afins não têm wrapper próprio: o respiro vem daqui. */
.woocommerce-account .site-main > .woocommerce,
.woocommerce-account .site-main > .page-content > .woocommerce{
  padding-left:24px;
  padding-right:24px;
  box-sizing:border-box;
}

/* Páginas de WooCommerce boxed (carrinho, checkout, minha conta) */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce{
  max-width:var(--eg-site-width,1200px);
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   AVISOS DO WOOCOMMERCE (adicionado ao carrinho, erros, info)
   Markup em woocommerce/notices/*.php.
   Seletor duplo (.woocommerce-message.eg-aviso) para vencer as regras
   do woocommerce.css, que são de classe única.
   ========================================================= */
/* prefixo `body` para vencer o CSS do Royal, que tem
   `.woocommerce-notices-wrapper .woocommerce-message{flex-direction:row-reverse;margin:0}`
   com especificidade (0,2,0) — a minha empatava e perdia por ordem de carga.
   flex-direction precisa ser declarado: sem isso o row-reverse dele invertia
   ícone e botão, mesmo com a especificidade resolvida. */
body .woocommerce-message.eg-aviso,
body .woocommerce-error.eg-aviso,
body .woocommerce-info.eg-aviso{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  max-width:var(--eg-site-width,1200px);
  margin:20px auto;
  padding:16px 20px;
  border:1px solid transparent;
  border-radius:14px;
  font-family:var(--eg-body);
  font-size:14.5px;
  line-height:1.5;
  list-style:none;
}
/* o WooCommerce injeta um ícone via ::before; o nosso é um SVG de verdade */
body .woocommerce-message.eg-aviso::before,
body .woocommerce-error.eg-aviso::before,
body .woocommerce-info.eg-aviso::before{content:none;display:none}

.eg-aviso .eg-aviso-ic{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
}
.eg-aviso .eg-aviso-ic svg{width:18px;height:18px}
.eg-aviso .eg-aviso-txt{flex:1 1 auto;min-width:0}
.eg-aviso .eg-aviso-txt p{margin:0}
.eg-aviso .eg-aviso-acao{flex:0 0 auto;margin-left:auto}

/* o botão dentro do aviso não pode flutuar: aqui o lugar dele é o flex */
.eg-aviso .eg-aviso-acao a.button,
.eg-aviso a.button{
  float:none;margin:0;
  display:inline-block;
  background:var(--eg-brand);color:#fff;
  border-radius:var(--eg-r-btn);
  padding:11px 20px;
  font-family:var(--eg-body);font-size:14px;font-weight:650;
  text-decoration:none;white-space:nowrap;
}
.eg-aviso .eg-aviso-acao a.button:hover,
.eg-aviso a.button:hover{background:var(--eg-brand-dark);color:#fff}

/* variações */
body .woocommerce-message.eg-aviso--ok{background:var(--eg-g50);border-color:#c8e2d8;color:#08322b}
.eg-aviso--ok .eg-aviso-ic{background:var(--eg-brand);color:#fff}

body .woocommerce-info.eg-aviso--info{background:var(--eg-sand);border-color:var(--eg-line);color:var(--eg-ink2)}
.eg-aviso--info .eg-aviso-ic{background:var(--eg-g100);color:var(--eg-brand-dark)}

body .woocommerce-error.eg-aviso--erro{background:#fdeeeb;border-color:#f3cfc7;color:#7d2417;flex-direction:row;padding:16px 20px}
.eg-aviso--erro .eg-aviso-ic{background:var(--eg-danger);color:#fff}
.eg-aviso--erro .eg-aviso-linha{display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:0;list-style:none}
.eg-aviso--erro .eg-aviso-item{display:block}
.eg-aviso--erro .eg-aviso-item + .eg-aviso-item{margin-top:6px}
.eg-aviso--erro a{color:#7d2417;font-weight:650}

@media(max-width:700px){
  body .woocommerce-message.eg-aviso,
  body .woocommerce-error.eg-aviso,
  body .woocommerce-info.eg-aviso{
    flex-wrap:wrap;margin:16px 16px;padding:14px 16px;font-size:14px;
  }
  .eg-aviso .eg-aviso-acao{margin-left:48px;width:100%}
  .eg-aviso .eg-aviso-acao a.button{display:block;text-align:center}
}

/* =========================================================
   PÁGINAS LEGAIS (termos, privacidade, troca)
   Conteúdo entra pelo editor, então o estilo é do wrapper
   .eg-doc para dentro — nada de estilizar o editor inteiro.
   ========================================================= */
.eg-doc{
  max-width:74ch;            /* linha de leitura confortável */
  margin:0 auto;
  padding:44px 0 72px;
  font-family:var(--eg-body);
  color:var(--eg-ink);
  font-size:15.5px;
  line-height:1.8;
}
.eg-doc-intro{
  font-size:16.5px;
  color:#3a3a38;
  background:var(--eg-sand);
  border-left:3px solid var(--eg-brand);
  border-radius:0 10px 10px 0;
  padding:16px 20px;
  margin:0 0 34px;
}
.eg-doc h2{
  font-family:var(--eg-body);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.2px;
  line-height:1.3;
  margin:38px 0 12px;
  padding-top:26px;
  border-top:1px solid var(--eg-line);
}
.eg-doc h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.eg-doc p{margin:0 0 16px}
.eg-doc ul,.eg-doc ol{margin:0 0 16px;padding-left:22px}
.eg-doc li{margin-bottom:9px}
.eg-doc li::marker{color:var(--eg-brand)}
.eg-doc strong{font-weight:600;color:var(--eg-ink)}
.eg-doc a{color:var(--eg-brand-dark);text-decoration:underline;text-underline-offset:3px}
.eg-doc a:hover{color:var(--eg-brand)}
.eg-doc-data{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--eg-line);
  font-size:13px;
  color:var(--eg-muted)
}
/* o título da página, impresso pelo tema pai */
body.page .eg-doc{padding-top:8px}

@media(max-width:600px){
  .eg-doc{padding:28px 0 52px;font-size:15px;line-height:1.75}
  .eg-doc-intro{font-size:15px;padding:14px 16px;margin-bottom:26px}
  .eg-doc h2{font-size:18px;margin-top:30px;padding-top:22px}
}

/* O título das páginas legais vem do tema pai, fora do .eg-doc — sem isto ele
   nasce na margem do container e o texto fica centrado 170px adiante. */
body.eg-page-doc .page-header,
body.eg-page-doc .entry-header{max-width:74ch;margin-left:auto;margin-right:auto;padding:0}
body.eg-page-doc .entry-title{
  max-width:74ch;
  margin:44px auto 0;
  font-family:var(--eg-body);
  font-size:clamp(26px,3.4vw,34px);
  font-weight:600;
  letter-spacing:-.4px;
  line-height:1.2;
}
body.eg-page-doc .eg-doc{padding-top:26px}
@media(max-width:600px){
  body.eg-page-doc .entry-title{margin-top:28px;font-size:24px}
}