/* ============================================================================
   Fluv Commerce — CSS BASE da vitrine.

   Regra única e inegociável: aqui NÃO existe cor, fonte nem raio literal.
   Tudo sai de var(--ec-*), que o PHP gera a partir da configuração da loja
   (lib/tema.php › ec_tema_css_vars). É isso que faz o seletor de cor do painel
   acertar a loja INTEIRA — botão, link, selo, foco, borda — em vez de acertar
   o botão e esquecer o resto.

   O tema (temas/<slug>/estilo.css) entra DEPOIS deste arquivo e só muda
   personalidade: peso de título, forma do cartão, jeito da animação.
   ========================================================================= */

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

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ec-fundo);
  color:var(--ec-texto);
  font-family:var(--ec-fonte-texto);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;            /* uma seção larga não pode fazer a página inteira rolar de lado */
}
h1,h2,h3,h4{font-family:var(--ec-fonte-titulo);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.5vw,3.25rem);font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}

/* Foco visível sempre. Remover outline sem repor é a forma mais rápida de
   tornar um checkout impossível de usar só com o teclado. */
:focus-visible{outline:3px solid rgba(var(--ec-primaria-rgb),.55);outline-offset:2px;border-radius:4px}

.ec-wrap{width:min(1240px,100% - 32px);margin-inline:auto}
.ec-secao{padding:calc(56px * var(--ec-ritmo)) 0}
.ec-secao--apertada{padding:calc(28px * var(--ec-ritmo)) 0}

.ec-cabecalho-secao{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:calc(28px * var(--ec-ritmo));flex-wrap:wrap}
.ec-cabecalho-secao h2{margin:0}
.ec-cabecalho-secao .ec-sub{color:var(--ec-texto-suave);margin:.25rem 0 0;font-size:.98rem}
.ec-link-todos{color:var(--ec-primaria);font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ec-link-todos i{transition:transform .2s}
.ec-link-todos:hover i{transform:translateX(4px)}

/* ── Botões ─────────────────────────────────────────────────────────────── */
.ec-btn{
  --_bg:var(--ec-primaria);--_fg:var(--ec-sobre-primaria);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border:0;border-radius:var(--ec-raio-sm);
  background:var(--_bg);color:var(--_fg);
  font-weight:700;font-size:.98rem;cursor:pointer;
  transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s,filter .18s;
  text-align:center;line-height:1.2;
}
.ec-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(var(--ec-primaria-rgb),.32);filter:saturate(1.08)}
.ec-btn:active{transform:translateY(0)}
.ec-btn[disabled],.ec-btn.is-carregando{opacity:.6;pointer-events:none}
.ec-btn--fantasma{--_bg:transparent;--_fg:var(--ec-texto);border:1.5px solid var(--ec-borda)}
.ec-btn--fantasma:hover{border-color:var(--ec-primaria);color:var(--ec-primaria);box-shadow:none}
.ec-btn--destaque{--_bg:var(--ec-destaque);--_fg:var(--ec-sobre-destaque)}
.ec-btn--destaque:hover{box-shadow:0 10px 26px rgba(0,0,0,.18)}
.ec-btn--bloco{width:100%}
.ec-btn--grande{padding:18px 34px;font-size:1.05rem}
.ec-btn--pequeno{padding:9px 16px;font-size:.88rem}

/* ── Campos ─────────────────────────────────────────────────────────────── */
.ec-campo{display:block;margin-bottom:16px}
.ec-campo>span{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--ec-texto-suave)}
.ec-input,.ec-select,.ec-textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--ec-borda);
  border-radius:var(--ec-raio-sm);background:var(--ec-superficie);color:var(--ec-texto);
  font:inherit;transition:border-color .18s,box-shadow .18s;
}
.ec-input:focus,.ec-select:focus,.ec-textarea:focus{
  outline:0;border-color:var(--ec-primaria);box-shadow:0 0 0 4px rgba(var(--ec-primaria-rgb),.16)
}
.ec-textarea{min-height:120px;resize:vertical}
.ec-campo--erro .ec-input{border-color:var(--ec-erro)}
.ec-erro-msg{color:var(--ec-erro);font-size:.85rem;margin-top:5px;display:block}

/* ── Cabeçalho da loja ──────────────────────────────────────────────────── */
.ec-aviso{
  background:var(--ec-primaria);color:var(--ec-sobre-primaria);
  text-align:center;padding:9px 16px;font-size:.88rem;font-weight:600;
}
.ec-aviso a{text-decoration:underline}

.ec-topo{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--ec-fundo) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ec-borda);
  transition:box-shadow .25s;
}
.ec-topo.is-rolado{box-shadow:var(--ec-sombra-sm)}
.ec-topo__linha{display:flex;align-items:center;gap:20px;padding:14px 0}
.ec-logo{display:flex;align-items:center;gap:10px;font-family:var(--ec-fonte-titulo);font-weight:800;font-size:1.3rem;letter-spacing:-.03em;flex-shrink:0}
.ec-logo img{height:42px;width:auto;object-fit:contain}

.ec-busca{flex:1;position:relative;max-width:560px}
.ec-busca input{width:100%;padding:12px 44px 12px 16px;border:1.5px solid var(--ec-borda);border-radius:999px;background:var(--ec-suave);color:var(--ec-texto);font:inherit}
.ec-busca input:focus{outline:0;border-color:var(--ec-primaria);background:var(--ec-superficie)}
.ec-busca button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:var(--ec-primaria);color:var(--ec-sobre-primaria);cursor:pointer}
.ec-busca__sugestoes{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70;
  background:var(--ec-superficie);border:1px solid var(--ec-borda);border-radius:var(--ec-raio);
  box-shadow:var(--ec-sombra);overflow:hidden;display:none
}
.ec-busca__sugestoes.is-aberto{display:block}
.ec-busca__item{display:flex;gap:12px;align-items:center;padding:10px 14px;cursor:pointer}
.ec-busca__item:hover,.ec-busca__item.is-ativo{background:var(--ec-suave)}
.ec-busca__item img{width:44px;height:44px;object-fit:contain;border-radius:8px;background:var(--ec-suave)}
.ec-busca__item b{display:block;font-size:.92rem;font-weight:600}
.ec-busca__item span{font-size:.85rem;color:var(--ec-primaria);font-weight:700}

.ec-acoes{display:flex;align-items:center;gap:6px;margin-left:auto}
.ec-acao{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 12px;border-radius:var(--ec-raio-sm);border:0;background:transparent;cursor:pointer;
  font-size:.7rem;font-weight:600;color:var(--ec-texto-suave);transition:background .18s,color .18s
}
.ec-acao i{font-size:1.15rem;color:var(--ec-texto)}
.ec-acao:hover{background:var(--ec-suave);color:var(--ec-primaria)}
.ec-acao:hover i{color:var(--ec-primaria)}
.ec-acao__bolha{
  position:absolute;top:2px;right:6px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--ec-destaque);color:var(--ec-sobre-destaque);
  font-size:.68rem;font-weight:800;display:grid;place-items:center
}
.ec-acao__bolha:empty,.ec-acao__bolha[data-qtd="0"]{display:none}

.ec-menu{border-top:1px solid var(--ec-borda)}
.ec-menu ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.ec-menu ul::-webkit-scrollbar{display:none}
.ec-menu a{
  display:block;padding:12px 16px;font-size:.92rem;font-weight:600;white-space:nowrap;
  color:var(--ec-texto-suave);border-bottom:2px solid transparent;transition:color .18s,border-color .18s
}
.ec-menu a:hover,.ec-menu a.is-ativo{color:var(--ec-primaria);border-bottom-color:var(--ec-primaria)}

.ec-menu-mobile{display:none}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.ec-hero{position:relative;overflow:hidden;background:var(--ec-suave)}
.ec-hero__pista{display:flex;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.ec-hero__slide{
  flex:0 0 100%;position:relative;min-height:var(--_alt,460px);
  display:grid;align-items:center;
}
.ec-hero--baixa{--_alt:340px}
.ec-hero--media{--_alt:480px}
.ec-hero--alta{--_alt:640px}
.ec-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ec-hero__veu{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 60%,transparent 100%)}
.ec-hero__slide--direita .ec-hero__veu{background:linear-gradient(270deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 60%,transparent 100%)}
.ec-hero__slide--centro .ec-hero__veu{background:rgba(0,0,0,.42)}
.ec-hero__sem-foto{position:absolute;inset:0;background:linear-gradient(135deg,var(--ec-primaria) 0%,var(--ec-secundaria) 100%)}
.ec-hero__conteudo{position:relative;z-index:2;max-width:620px;color:#fff;padding:48px 0}
.ec-hero__slide--direita .ec-hero__conteudo{margin-left:auto;text-align:right}
.ec-hero__slide--centro .ec-hero__conteudo{margin-inline:auto;text-align:center}
.ec-hero__conteudo h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.ec-hero__conteudo p{font-size:1.1rem;opacity:.95;margin-bottom:28px;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.ec-hero__selo{
  display:inline-block;padding:6px 14px;border-radius:999px;margin-bottom:16px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;backdrop-filter:blur(6px)
}
.ec-hero__setas{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.ec-hero__seta{
  pointer-events:auto;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:#111;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.2);transition:transform .2s
}
.ec-hero__seta:hover{transform:scale(1.08)}
.ec-hero__pontos{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.ec-hero__ponto{width:9px;height:9px;border-radius:999px;border:0;background:rgba(255,255,255,.5);cursor:pointer;transition:width .3s,background .3s;padding:0}
.ec-hero__ponto.is-ativo{width:28px;background:#fff}

/* ── Cartão de produto ──────────────────────────────────────────────────── */
.ec-grade{display:grid;gap:calc(22px * var(--ec-ritmo));grid-template-columns:repeat(var(--_cols,4),minmax(0,1fr))}
.ec-grade--2{--_cols:2}.ec-grade--3{--_cols:3}.ec-grade--4{--_cols:4}.ec-grade--5{--_cols:5}.ec-grade--6{--_cols:6}

.ec-card{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--ec-superficie);border:1px solid var(--ec-borda);
  border-radius:var(--ec-raio);overflow:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s,border-color .28s
}
.ec-card:hover{transform:translateY(-6px);box-shadow:var(--ec-sombra);border-color:rgba(var(--ec-primaria-rgb),.35)}
.ec-card__foto{position:relative;aspect-ratio:1;background:var(--ec-suave);overflow:hidden}
.ec-card__foto img{width:100%;height:100%;object-fit:contain;padding:10%;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.ec-card:hover .ec-card__foto img{transform:scale(1.07)}
/* A segunda foto só existe no DOM quando o produto tem duas — sem isso o
   hover trocaria para o vazio e o produto "sumiria" ao passar o mouse. */
/* PNG transparente: a 2ª foto herda o fundo do cartão (cobre a 1ª) e a 1ª
   some — antes as duas apareciam uma por cima da outra, parecendo defeito.
   Só em aparelho com mouse: no toque o hover gruda e a foto fica trocada. */
.ec-card__foto img.ec-card__foto2{position:absolute;inset:0;opacity:0;background:inherit;transition:opacity .35s ease,transform .5s cubic-bezier(.4,0,.2,1)}
.ec-card__foto img:not(.ec-card__foto2){transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .35s ease}
@media (hover:hover){
  .ec-card:hover .ec-card__foto2{opacity:1}
  .ec-card:hover .ec-card__foto:has(.ec-card__foto2) img:not(.ec-card__foto2){opacity:0}
}

.ec-card__selos{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.ec-selo{
  padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.02em;
  background:var(--ec-destaque);color:var(--ec-sobre-destaque)
}
.ec-selo--desconto{background:var(--ec-erro);color:#fff}
.ec-selo--novo{background:var(--ec-secundaria);color:var(--ec-sobre-secundaria)}
.ec-selo--esgotado{background:var(--ec-texto);color:var(--ec-fundo)}

.ec-card__favorito{
  position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;
  border:0;background:color-mix(in srgb,var(--ec-superficie) 82%,transparent);backdrop-filter:blur(6px);
  cursor:pointer;display:grid;place-items:center;color:var(--ec-texto-suave);
  opacity:0;transform:scale(.85);transition:opacity .22s,transform .22s,color .22s
}
.ec-card:hover .ec-card__favorito,.ec-card__favorito.is-ativo{opacity:1;transform:scale(1)}
.ec-card__favorito.is-ativo{color:var(--ec-erro)}

.ec-card__corpo{padding:16px;display:flex;flex-direction:column;flex:1;gap:8px}
.ec-card__nome{font-size:.96rem;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.ec-card__notas{display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--ec-texto-suave)}
.ec-card__notas .fa-star{color:var(--ec-destaque)}
.ec-card__precos{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ec-card__de{font-size:.85rem;color:var(--ec-texto-suave);text-decoration:line-through}
.ec-card__por{font-size:1.28rem;font-weight:800;color:var(--ec-texto);letter-spacing:-.02em}
.ec-card__parcela{font-size:.8rem;color:var(--ec-texto-suave)}
/* Pix no card: o menor número que a pessoa pode pagar, em verde de "ganho". */
.ec-card__pix{font-size:.86rem;color:var(--ec-sucesso);font-weight:600;margin-top:-4px}
.ec-card__pix b{font-weight:800}
.ec-card__vendidos{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;color:var(--ec-texto-suave)}
.ec-card__vendidos i{color:var(--ec-sucesso);font-size:.72rem}
.ec-card__acao{margin-top:10px}

.ec-card--esgotado .ec-card__foto img{filter:grayscale(1);opacity:.55}

/* ── Vazio / carregando ─────────────────────────────────────────────────── */
.ec-vazio{text-align:center;padding:72px 20px;color:var(--ec-texto-suave)}
.ec-vazio i{font-size:2.6rem;color:var(--ec-borda);margin-bottom:14px;display:block}
.ec-vazio h3{color:var(--ec-texto)}
.ec-esqueleto{background:linear-gradient(90deg,var(--ec-suave) 25%,var(--ec-borda) 37%,var(--ec-suave) 63%);background-size:400% 100%;animation:ec-brilho 1.4s infinite;border-radius:var(--ec-raio-sm)}
@keyframes ec-brilho{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ── Benefícios / categorias / depoimentos ─────────────────────────────── */
.ec-beneficios{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ec-beneficio{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:var(--ec-raio);background:var(--ec-suave);transition:transform .22s}
.ec-beneficio:hover{transform:translateY(-3px)}
.ec-beneficio i{font-size:1.5rem;color:var(--ec-primaria);flex-shrink:0;margin-top:2px}
.ec-beneficio b{display:block;font-size:.98rem;margin-bottom:2px}
.ec-beneficio span{font-size:.88rem;color:var(--ec-texto-suave)}

.ec-cats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.ec-cat{
  position:relative;display:block;border-radius:var(--ec-raio);overflow:hidden;
  aspect-ratio:4/3;background:var(--ec-suave);transition:transform .25s,box-shadow .25s
}
.ec-cat:hover{transform:translateY(-4px);box-shadow:var(--ec-sombra)}
.ec-cat img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ec-cat:hover img{transform:scale(1.06)}
.ec-cat__rotulo{position:absolute;inset:auto 0 0 0;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-weight:700}
.ec-cat--icone{display:grid;place-items:center;aspect-ratio:auto;padding:28px 16px;text-align:center;gap:10px;border:1px solid var(--ec-borda);background:var(--ec-superficie)}
.ec-cat--icone i{font-size:1.9rem;color:var(--ec-primaria)}
.ec-cat--icone b{font-size:.95rem}

.ec-depoimentos{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ec-depoimento{padding:24px;border-radius:var(--ec-raio);background:var(--ec-superficie);border:1px solid var(--ec-borda)}
.ec-depoimento__estrelas{color:var(--ec-destaque);margin-bottom:10px}
.ec-depoimento p{font-size:.98rem;font-style:italic}
.ec-depoimento footer{display:flex;align-items:center;gap:10px;margin-top:14px}
.ec-depoimento footer img,.ec-depoimento__inicial{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--ec-primaria);color:var(--ec-sobre-primaria);display:grid;place-items:center;font-weight:800}
.ec-depoimento footer b{display:block;font-size:.92rem}
.ec-depoimento footer span{font-size:.82rem;color:var(--ec-texto-suave)}

/* ── Banner / texto+imagem / CTA / FAQ / newsletter ────────────────────── */
.ec-banners{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ec-banner{position:relative;display:block;border-radius:var(--ec-raio);overflow:hidden;min-height:200px;background:var(--ec-suave)}
.ec-banner img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .55s}
.ec-banner:hover img{transform:scale(1.05)}
.ec-banner__txt{position:relative;z-index:2;padding:28px;color:#fff;background:linear-gradient(120deg,rgba(0,0,0,.66),transparent 75%);height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.ec-banner__txt b{font-family:var(--ec-fonte-titulo);font-size:1.35rem;display:block;margin-bottom:6px}

.ec-ti{display:grid;gap:calc(40px * var(--ec-ritmo));grid-template-columns:1fr 1fr;align-items:center}
.ec-ti--invertido .ec-ti__foto{order:2}
.ec-ti__foto img{border-radius:var(--ec-raio);width:100%;aspect-ratio:4/3;object-fit:cover}
.ec-ti__txt h2{margin-bottom:.6em}

.ec-cta{
  border-radius:var(--ec-raio-lg);padding:calc(52px * var(--ec-ritmo)) 32px;text-align:center;
  background:linear-gradient(135deg,var(--ec-primaria) 0%,var(--ec-secundaria) 100%);
  color:var(--ec-sobre-primaria);position:relative;overflow:hidden
}
.ec-cta h2{color:inherit}
.ec-cta p{opacity:.92;max-width:600px;margin-inline:auto;margin-bottom:26px}
.ec-cta .ec-btn{background:var(--ec-sobre-primaria);color:var(--ec-primaria)}

.ec-faq{max-width:820px;margin-inline:auto}
.ec-faq__item{border-bottom:1px solid var(--ec-borda)}
.ec-faq__p{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;background:none;border:0;cursor:pointer;text-align:left;font-weight:600;font-size:1.02rem}
.ec-faq__p i{transition:transform .25s;color:var(--ec-primaria)}
.ec-faq__item.is-aberto .ec-faq__p i{transform:rotate(180deg)}
.ec-faq__r{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1)}
.ec-faq__r>div{padding-bottom:20px;color:var(--ec-texto-suave)}

.ec-news{text-align:center;padding:calc(48px * var(--ec-ritmo)) 24px;border-radius:var(--ec-raio-lg);background:var(--ec-suave)}
.ec-news form{display:flex;gap:10px;max-width:520px;margin:22px auto 0;flex-wrap:wrap}
.ec-news input{flex:1;min-width:220px}

.ec-contadores{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));text-align:center}
.ec-contador b{display:block;font-family:var(--ec-fonte-titulo);font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--ec-primaria);line-height:1}
.ec-contador span{font-size:.92rem;color:var(--ec-texto-suave)}

.ec-video{position:relative;border-radius:var(--ec-raio);overflow:hidden;aspect-ratio:16/9;background:#000}
.ec-video iframe{width:100%;height:100%;border:0}

/* ── Página do produto ──────────────────────────────────────────────────── */
.ec-prod{display:grid;gap:calc(44px * var(--ec-ritmo));grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.ec-galeria__principal{position:relative;border-radius:var(--ec-raio);overflow:hidden;background:var(--ec-suave);aspect-ratio:1}
.ec-galeria__principal img{width:100%;height:100%;object-fit:contain;padding:6%}
.ec-galeria__miniaturas{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.ec-galeria__mini{
  flex:0 0 76px;height:76px;border-radius:var(--ec-raio-sm);border:2px solid var(--ec-borda);
  background:var(--ec-suave);cursor:pointer;overflow:hidden;padding:0;transition:border-color .2s
}
.ec-galeria__mini img{width:100%;height:100%;object-fit:contain;padding:8%}
.ec-galeria__mini.is-ativo{border-color:var(--ec-primaria)}

.ec-prod__info h1{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-bottom:10px}
.ec-prod__marca{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ec-texto-suave);font-weight:700}
.ec-prod__preco{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:20px 0 6px}
.ec-prod__de{font-size:1.05rem;color:var(--ec-texto-suave);text-decoration:line-through}
.ec-prod__por{font-size:clamp(1.9rem,4vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.ec-prod__economia{font-size:.9rem;font-weight:700;color:var(--ec-sucesso)}
.ec-prod__parcelas{color:var(--ec-texto-suave);font-size:.95rem;margin:0 0 22px}
.ec-prod__parcelas strong{color:var(--ec-texto)}
.ec-prod__pix{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:12px 0 6px;color:var(--ec-sucesso);font-size:1.05rem;font-weight:600}
.ec-prod__pix .fa-pix{font-size:1.1rem}
.ec-prod__pix b{font-size:1.3rem;font-weight:800;letter-spacing:-.01em}
.ec-prod__pix small{padding:3px 9px;border-radius:999px;font-size:.74rem;font-weight:700;background:color-mix(in srgb,var(--ec-sucesso) 12%,transparent)}
/* Prova social logo abaixo do título: nota e quantos levaram no mês. */
.ec-prod__prova{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px;font-size:.88rem}
.ec-prod__prova .ec-card__notas{text-decoration:none}
.ec-prod__vendidos{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ec-texto)}
.ec-prod__vendidos i{color:var(--ec-sucesso)}
/* "Vendido e entregue por" com CNPJ, colado no botão de compra. */
.ec-prod__vendedor{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px;padding:12px 14px;border:1px solid var(--ec-borda);border-radius:var(--ec-raio-sm);font-size:.84rem;color:var(--ec-texto-suave);line-height:1.45}
.ec-prod__vendedor i{color:var(--ec-sucesso);margin-top:2px}
.ec-prod__vendedor b{color:var(--ec-texto)}
.ec-prod__cnpj{white-space:nowrap}

/* Variações: uma linha por eixo; cor com bolinha, cor com foto vira miniatura.
   Animações curtas (≤ .35s) e desligadas em prefers-reduced-motion. */
.ec-variacoes{margin-bottom:22px;display:grid;gap:16px}
.ec-variacoes__eixo>b{display:block;font-size:.88rem;margin-bottom:8px}
.ec-variacoes__escolha{display:inline-block;font-weight:400;color:var(--ec-texto-suave)}
.ec-variacoes__lista{display:flex;flex-wrap:wrap;gap:8px}
.ec-variacao{
  position:relative;padding:10px 16px;border:1.5px solid var(--ec-borda);border-radius:var(--ec-raio-sm);
  background:var(--ec-superficie);color:inherit;cursor:pointer;font-size:.9rem;font-weight:600;
  max-width:100%;transition:border-color .18s,background-color .18s,color .18s,transform .18s,box-shadow .18s
}
.ec-variacao__txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.ec-variacao:hover{border-color:var(--ec-primaria);transform:translateY(-1px)}
.ec-variacao:focus-visible{outline:2px solid var(--ec-primaria);outline-offset:2px}
.ec-variacao.is-ativo{border-color:var(--ec-primaria);background:rgba(var(--ec-primaria-rgb),.1);color:var(--ec-primaria);box-shadow:0 0 0 3px rgba(var(--ec-primaria-rgb),.15)}
.ec-variacao.is-sem{opacity:.45;border-style:dashed}
.ec-variacao.is-sem .ec-variacao__txt{text-decoration:line-through}
.ec-variacao--foto{padding:4px 12px 4px 4px}
.ec-variacao--foto img{width:44px;height:44px;border-radius:calc(var(--ec-raio-sm) - 2px);object-fit:cover;flex-shrink:0;background:#fff}
.ec-variacao--cor .ec-variacao__cor,.ec-variacao .ec-variacao__cor{width:20px;height:20px}
.ec-variacao.is-pulso{animation:ecVarPulso .35s ease-out}
.ec-variacoes__escolha.is-entrando,.ec-estoque-aviso.is-entrando{animation:ecVarEntra .3s ease-out}
#ecPrecoProduto.is-mudou{animation:ecVarPreco .4s ease-out;display:inline-block}
#ecFotoPrincipal{transition:opacity .22s ease,transform .22s ease}
#ecFotoPrincipal.is-trocando{opacity:0;transform:scale(.97)}
.ec-variacoes.is-falta{animation:ecVarFalta .45s ease}
.ec-variacoes.is-falta .ec-variacao:not(.is-ativo){border-color:var(--ec-perigo,#dc2626)}
@keyframes ecVarPulso{0%{transform:scale(1)}40%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes ecVarEntra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ecVarPreco{0%{opacity:.2;transform:translateY(-6px)}60%{opacity:1;color:var(--ec-primaria)}100%{transform:none}}
@keyframes ecVarFalta{0%,100%{transform:none}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){
  .ec-variacao,#ecFotoPrincipal{transition:none}
  .ec-variacao.is-pulso,.ec-variacoes__escolha.is-entrando,.ec-estoque-aviso.is-entrando,#ecPrecoProduto.is-mudou,.ec-variacoes.is-falta{animation:none}
}

.ec-qtd{display:inline-flex;align-items:center;border:1.5px solid var(--ec-borda);border-radius:var(--ec-raio-sm);overflow:hidden}
.ec-qtd button{width:42px;height:46px;border:0;background:var(--ec-suave);cursor:pointer;font-size:1.05rem}
.ec-qtd button:hover{background:var(--ec-borda)}
.ec-qtd input{width:56px;height:46px;border:0;text-align:center;font-weight:700;background:var(--ec-superficie);color:var(--ec-texto)}
.ec-prod__comprar{display:flex;gap:12px;align-items:stretch;margin-bottom:20px;flex-wrap:wrap}
.ec-prod__comprar .ec-btn{flex:1;min-width:200px}

.ec-estoque-aviso{font-size:.88rem;font-weight:600;margin-bottom:14px}
.ec-estoque-aviso--pouco{color:var(--ec-alerta)}
.ec-estoque-aviso--ok{color:var(--ec-sucesso)}
.ec-estoque-aviso--zero{color:var(--ec-erro)}

.ec-frete-box{border:1px solid var(--ec-borda);border-radius:var(--ec-raio);padding:18px;margin-bottom:22px}
.ec-frete-box__linha{display:flex;gap:10px;flex-wrap:wrap}
.ec-frete-box__linha input{flex:1;min-width:150px}
.ec-frete-opcao{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--ec-borda);font-size:.92rem}
.ec-frete-opcao b{color:var(--ec-texto)}
.ec-frete-opcao span{color:var(--ec-texto-suave);font-size:.85rem}

.ec-abas{border-bottom:1px solid var(--ec-borda);display:flex;gap:4px;margin:calc(48px * var(--ec-ritmo)) 0 24px;overflow-x:auto}
.ec-aba{padding:13px 20px;border:0;background:none;cursor:pointer;font-weight:700;font-size:.96rem;color:var(--ec-texto-suave);border-bottom:2px solid transparent;white-space:nowrap}
.ec-aba.is-ativo{color:var(--ec-primaria);border-bottom-color:var(--ec-primaria)}
.ec-aba-painel{display:none}
.ec-aba-painel.is-ativo{display:block;animation:ec-sobe .35s ease both}
.ec-descricao{max-width:820px;line-height:1.75}
.ec-descricao img{border-radius:var(--ec-raio-sm);margin:16px 0}
.ec-descricao h2,.ec-descricao h3{margin-top:1.4em}

/* ── Gaveta do carrinho ─────────────────────────────────────────────────── */
.ec-veu{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .3s;z-index:90}
.ec-veu.is-aberto{opacity:1;pointer-events:auto}
.ec-gaveta{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:100;
  background:var(--ec-fundo);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);box-shadow:var(--ec-sombra)
}
.ec-gaveta.is-aberto{transform:none}
.ec-gaveta__topo{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--ec-borda)}
.ec-gaveta__topo b{font-family:var(--ec-fonte-titulo);font-size:1.1rem}
.ec-gaveta__fechar{width:38px;height:38px;border:0;border-radius:50%;background:var(--ec-suave);cursor:pointer}
.ec-gaveta__itens{flex:1;overflow-y:auto;padding:14px 20px}
.ec-gaveta__rodape{padding:18px 20px;border-top:1px solid var(--ec-borda);background:var(--ec-superficie)}
.ec-gaveta__total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font-weight:800;font-size:1.15rem}

.ec-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--ec-borda)}
.ec-item__foto{width:68px;height:68px;border-radius:var(--ec-raio-sm);background:var(--ec-suave);object-fit:contain;padding:6px;flex-shrink:0}
.ec-item__corpo{flex:1;min-width:0}
.ec-item__nome{font-size:.92rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ec-item__var{font-size:.8rem;color:var(--ec-texto-suave)}
.ec-item__pe{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.ec-item__preco{font-weight:800}
/* Carrinho ao vivo (loja.js pintarPagina): [hidden] vence o display:flex das
   linhas do resumo; item esperando o servidor fica esmaecido; valor que mudou pisca. */
[data-carrinho-pagina] [hidden]{display:none!important}
.ec-item.is-atualizando .ec-item__preco{opacity:.45;transition:opacity .15s}
.ec-item.is-atualizando .ec-item__remover{pointer-events:none;opacity:.5}
[data-carrinho-pagina] .is-mudou,#ecGavetaTotal.is-mudou{animation:ecValorMudou .5s ease-out}
@keyframes ecValorMudou{0%{color:var(--ec-primaria,currentColor)}100%{color:inherit}}
@media (prefers-reduced-motion:reduce){[data-carrinho-pagina] .is-mudou,#ecGavetaTotal.is-mudou{animation:none}}
.ec-item__remover{border:0;background:none;color:var(--ec-texto-suave);cursor:pointer;font-size:.82rem}
.ec-item__remover:hover{color:var(--ec-erro)}
.ec-qtd--mini button{width:30px;height:32px;font-size:.9rem}
.ec-qtd--mini input{width:38px;height:32px;font-size:.88rem}

/* ── Checkout ───────────────────────────────────────────────────────────── */
.ec-checkout{display:grid;gap:32px;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:start}
.ec-passos{display:flex;gap:6px;margin-bottom:28px;flex-wrap:wrap}
.ec-passo{display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;background:var(--ec-suave);font-size:.88rem;font-weight:600;color:var(--ec-texto-suave)}
.ec-passo b{width:23px;height:23px;border-radius:50%;background:var(--ec-borda);color:var(--ec-texto);display:grid;place-items:center;font-size:.76rem}
.ec-passo.is-ativo{background:rgba(var(--ec-primaria-rgb),.12);color:var(--ec-primaria)}
.ec-passo.is-ativo b{background:var(--ec-primaria);color:var(--ec-sobre-primaria)}
.ec-passo.is-feito b{background:var(--ec-sucesso);color:#fff}

.ec-bloco{background:var(--ec-superficie);border:1px solid var(--ec-borda);border-radius:var(--ec-raio);padding:24px;margin-bottom:20px}
.ec-bloco>h3{margin-top:0;display:flex;align-items:center;gap:10px}
.ec-bloco>h3 i{color:var(--ec-primaria)}
.ec-linha{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ec-linha--2{grid-template-columns:repeat(2,minmax(0,1fr))}

.ec-opcao{
  display:flex;align-items:center;gap:13px;padding:15px;border:1.5px solid var(--ec-borda);
  border-radius:var(--ec-raio-sm);cursor:pointer;margin-bottom:10px;transition:all .18s;background:var(--ec-superficie)
}
.ec-opcao:hover{border-color:var(--ec-primaria)}
.ec-opcao.is-ativo{border-color:var(--ec-primaria);background:rgba(var(--ec-primaria-rgb),.07)}
.ec-opcao input{accent-color:var(--ec-primaria);width:18px;height:18px;flex-shrink:0}
.ec-opcao__txt{flex:1}
.ec-opcao__txt b{display:block;font-size:.96rem}
.ec-opcao__txt span{font-size:.85rem;color:var(--ec-texto-suave)}
.ec-opcao__valor{font-weight:800;white-space:nowrap}
.ec-opcao i.ec-opcao__icone{font-size:1.35rem;color:var(--ec-primaria);width:28px;text-align:center}

.ec-resumo{position:sticky;top:96px}
.ec-resumo__linha{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:.94rem}
.ec-resumo__linha--total{border-top:1px solid var(--ec-borda);margin-top:8px;padding-top:14px;font-size:1.2rem;font-weight:800}
.ec-resumo__desconto{color:var(--ec-sucesso)}
.ec-cupom{display:flex;gap:8px;margin:14px 0}
.ec-cupom input{flex:1;text-transform:uppercase}

.ec-pix{text-align:center;padding:24px}
.ec-pix img{width:250px;height:250px;margin-inline:auto;border-radius:var(--ec-raio-sm);background:#fff;padding:10px}
.ec-pix__codigo{
  display:block;width:100%;margin:16px 0 10px;padding:13px;border:1.5px dashed var(--ec-borda);
  border-radius:var(--ec-raio-sm);font-family:ui-monospace,monospace;font-size:.78rem;
  word-break:break-all;background:var(--ec-suave);color:var(--ec-texto);text-align:left;cursor:pointer
}
.ec-pix__relogio{font-size:1.5rem;font-weight:800;color:var(--ec-primaria);font-variant-numeric:tabular-nums}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.ec-rodape{background:var(--ec-suave);border-top:1px solid var(--ec-borda);margin-top:calc(64px * var(--ec-ritmo));padding:calc(52px * var(--ec-ritmo)) 0 0}
/* A 1ª coluna precisa de mínimo FIXO: `1.4fr repeat(auto-fit,…)` é CSS
   inválido (repetição automática não convive com faixa flexível), o
   navegador jogava a regra fora e o rodapé empilhava numa coluna só. */
.ec-rodape__grade{display:grid;gap:36px 48px;grid-template-columns:minmax(240px,1.5fr) repeat(auto-fit,minmax(150px,1fr))}
.ec-rodape h4{font-family:var(--ec-fonte-texto);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ec-texto);margin-bottom:16px}
.ec-rodape ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.ec-rodape a{font-size:.92rem;color:var(--ec-texto-suave);transition:color .18s}
.ec-rodape a:hover{color:var(--ec-primaria)}
.ec-rodape__sobre p{font-size:.92rem;color:var(--ec-texto-suave);max-width:36ch;margin:0 0 12px}
.ec-rodape__marca{display:inline-flex;align-items:center;margin-bottom:14px;font-family:var(--ec-fonte-titulo);font-size:1.4rem!important;font-weight:800;letter-spacing:-.02em;color:var(--ec-texto)!important}
.ec-rodape__marca img{max-height:44px;width:auto}
.ec-rodape__mais{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ec-primaria)!important}
.ec-rodape__mais i{font-size:.75em;transition:transform .2s}
.ec-rodape__mais:hover i{transform:translateX(3px)}
.ec-rodape__contato a,.ec-rodape__end{display:inline-flex;align-items:flex-start;gap:10px}
.ec-rodape__contato i{width:16px;margin-top:.28em;text-align:center;color:var(--ec-primaria);flex-shrink:0}
.ec-rodape__end{font-size:.9rem;color:var(--ec-texto-suave);line-height:1.5}
.ec-rodape__zap{padding:9px 16px;border-radius:999px;border:1px solid var(--ec-borda);background:var(--ec-superficie);color:var(--ec-texto)!important;font-weight:600;align-items:center!important}
.ec-rodape__zap i{margin-top:0!important;color:#25d366!important;font-size:1.1rem}
.ec-rodape__zap:hover{border-color:#25d366}
.ec-social{display:flex;gap:10px;margin-top:16px}
.ec-social a{width:38px;height:38px;border-radius:50%;background:var(--ec-superficie);border:1px solid var(--ec-borda);display:grid;place-items:center;transition:all .2s}
.ec-social a:hover{background:var(--ec-primaria);color:var(--ec-sobre-primaria);border-color:transparent;transform:translateY(-2px)}
.ec-rodape__base{border-top:1px solid var(--ec-borda);margin-top:36px;padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--ec-texto-suave)}
.ec-selos-pg{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ec-selos-pg span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:6px;background:var(--ec-superficie);border:1px solid var(--ec-borda);font-size:.75rem;font-weight:700}

.ec-zap{
  position:fixed;right:18px;bottom:18px;z-index:80;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.6rem;
  box-shadow:0 8px 28px rgba(37,211,102,.42);transition:transform .22s
}
.ec-zap:hover{transform:scale(1.08)}

/* ── Filtros do catálogo ────────────────────────────────────────────────── */
.ec-catalogo{display:grid;gap:32px;grid-template-columns:250px minmax(0,1fr);align-items:start}
.ec-filtros{position:sticky;top:96px}
.ec-filtro{border-bottom:1px solid var(--ec-borda);padding:16px 0}
.ec-filtro>b{display:block;margin-bottom:11px;font-size:.92rem}
.ec-filtro label{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.9rem;cursor:pointer;color:var(--ec-texto-suave)}
.ec-filtro label:hover{color:var(--ec-primaria)}
.ec-filtro input[type=checkbox]{accent-color:var(--ec-primaria);width:16px;height:16px}
.ec-barra-catalogo{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.ec-barra-catalogo .ec-select{width:auto;min-width:200px}
.ec-paginacao{display:flex;gap:6px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.ec-paginacao a,.ec-paginacao span{min-width:42px;height:42px;padding:0 12px;display:grid;place-items:center;border-radius:var(--ec-raio-sm);border:1px solid var(--ec-borda);font-weight:600;font-size:.92rem}
.ec-paginacao .is-ativo{background:var(--ec-primaria);color:var(--ec-sobre-primaria);border-color:transparent}

.ec-migalhas{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.85rem;color:var(--ec-texto-suave);padding:18px 0}
.ec-migalhas a:hover{color:var(--ec-primaria)}

/* ── Avisos e toast ─────────────────────────────────────────────────────── */
.ec-toasts{position:fixed;top:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.ec-toast{
  pointer-events:auto;display:flex;align-items:center;gap:11px;padding:14px 18px;min-width:260px;
  border-radius:var(--ec-raio-sm);background:var(--ec-superficie);border:1px solid var(--ec-borda);
  box-shadow:var(--ec-sombra);font-size:.92rem;font-weight:600;
  animation:ec-entra-dir .32s cubic-bezier(.4,0,.2,1) both
}
.ec-toast i{font-size:1.15rem}
.ec-toast--ok i{color:var(--ec-sucesso)}
.ec-toast--erro i{color:var(--ec-erro)}
.ec-toast--saindo{animation:ec-sai-dir .28s ease both}
@keyframes ec-entra-dir{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes ec-sai-dir{to{opacity:0;transform:translateX(30px)}}

.ec-fita-previa{
  position:fixed;left:0;right:0;bottom:0;z-index:150;padding:9px 16px;text-align:center;
  background:var(--ec-texto);color:var(--ec-fundo);font-size:.84rem;font-weight:700;letter-spacing:.02em
}

/* ── Animação de entrada ────────────────────────────────────────────────── */
@keyframes ec-sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* O `opacity:0` é escopado em `.ec-js`, que só existe depois que o script do
   <head> roda. Sem esse escopo, um erro de JS (ou um navegador sem
   IntersectionObserver) deixaria a vitrine INTEIRA invisível — conteúdo
   presente no HTML e apagado pelo CSS, que é a pior falha possível: o Google
   vê tudo e o cliente vê uma página branca. */
.ec-js .ec-anima{opacity:0}
.ec-js .ec-anima.is-visivel{animation:ec-sobe .6s cubic-bezier(.22,1,.36,1) both}
.ec-js .ec-anima.is-visivel:nth-child(2){animation-delay:.06s}
.ec-js .ec-anima.is-visivel:nth-child(3){animation-delay:.12s}
.ec-js .ec-anima.is-visivel:nth-child(4){animation-delay:.18s}
.ec-js .ec-anima.is-visivel:nth-child(5){animation-delay:.24s}
.ec-js .ec-anima.is-visivel:nth-child(6){animation-delay:.3s}

/* Respeitar quem pediu menos movimento não é detalhe de acessibilidade: em
   quem tem enxaqueca vestibular, carrossel automático dá enjoo de verdade. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ec-js .ec-anima{opacity:1}
}

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .ec-grade--5,.ec-grade--6{--_cols:4}
  .ec-catalogo{grid-template-columns:1fr}
  .ec-filtros{position:static;display:none}
  .ec-filtros.is-aberto{display:block}
  .ec-checkout{grid-template-columns:1fr}
  .ec-resumo{position:static}
}
@media (max-width:860px){
  .ec-grade{--_cols:3}
  .ec-rodape__grade{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ec-rodape__sobre{grid-column:1/-1}
  .ec-prod{grid-template-columns:1fr}
  .ec-ti{grid-template-columns:1fr}
  .ec-ti--invertido .ec-ti__foto{order:0}
  .ec-busca{display:none}
  .ec-menu{display:none}
  .ec-menu-mobile{display:block}
  .ec-hero--alta{--_alt:460px}
  .ec-hero--media{--_alt:380px}
}
@media (max-width:620px){
  .ec-wrap{width:min(1240px,100% - 24px)}
  .ec-grade{--_cols:2;gap:14px}
  .ec-card__corpo{padding:12px}
  .ec-card__por{font-size:1.1rem}
  .ec-secao{padding:calc(36px * var(--ec-ritmo)) 0}
  .ec-hero__conteudo{padding:32px 0;text-align:center;margin-inline:auto}
  .ec-hero__slide--direita .ec-hero__conteudo{text-align:center}
  .ec-hero__veu{background:rgba(0,0,0,.5)}
  .ec-rodape__grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .ec-rodape__sobre,.ec-rodape__contato{grid-column:1/-1}
  .ec-rodape__base{flex-direction:column;align-items:flex-start;padding-bottom:calc(20px + 64px)}
  .ec-linha--2{grid-template-columns:1fr}
  .ec-toasts{left:16px;right:16px;top:auto;bottom:86px}
  .ec-toast{min-width:0}
  .ec-zap{bottom:78px;width:50px;height:50px;font-size:1.4rem}
  .ec-prod__comprar .ec-btn{min-width:0}
}

/* Barra inferior fixa no celular: é lá que o polegar está. Sem ela, "ver
   carrinho" fica no topo da página, fora de alcance no meio de um catálogo. */
.ec-barra-mobile{display:none}
@media (max-width:620px){
  .ec-barra-mobile{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:85;
    background:var(--ec-superficie);border-top:1px solid var(--ec-borda);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .ec-barra-mobile a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;font-size:.66rem;font-weight:700;color:var(--ec-texto-suave);position:relative}
  .ec-barra-mobile a i{font-size:1.18rem}
  .ec-barra-mobile a.is-ativo{color:var(--ec-primaria)}
  body{padding-bottom:64px}
}

/* ============================================================================
   Peças da montagem automática (lib/montagem.php) — 18/10/2026.
   Continuam sem cor literal: tudo var(--ec-*), para o tema e o seletor de cor
   acertarem também o que é novo.
   ========================================================================= */

/* ── Logo: só o logo, logo + nome, ou só o nome ─────────────────────────── */
.ec-logo img{max-width:220px}
.ec-logo--logo_nome img{height:38px;max-width:60px}
.ec-logo__nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch}
.ec-logo--logo .ec-logo__nome{display:none}
@media (max-width:620px){.ec-logo img{height:34px;max-width:150px}.ec-logo--logo_nome .ec-logo__nome{font-size:1.05rem}}

/* ── Hero "vitrine": o produto no palco ─────────────────────────────────── */
.ec-hv{background:var(--ec-fundo);padding-bottom:calc(18px * var(--ec-ritmo))}
.ec-hv .ec-hero__slide{min-height:0;display:block}
.ec-hv__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:calc(32px * var(--ec-ritmo));padding:calc(40px * var(--ec-ritmo)) 0 calc(22px * var(--ec-ritmo));min-height:520px}
.ec-hv__txt{position:relative;z-index:2;max-width:560px}
.ec-hv__selo{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;margin-bottom:18px;
  background:rgba(var(--ec-primaria-rgb),.12);color:var(--ec-primaria);font-size:.82rem;font-weight:800}
.ec-hv__selo::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(var(--ec-primaria-rgb),.18)}
.ec-hv__titulo{font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:.98;margin:0 0 18px;letter-spacing:-.045em}
.ec-hv__txt p{font-size:1.12rem;color:var(--ec-texto-suave);margin:0 0 28px;max-width:44ch}
.ec-hv__palco{position:relative;height:clamp(300px,40vw,520px);width:100%;max-width:560px;justify-self:center}
.ec-hv__aura{position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(var(--ec-secundaria-rgb),.45),transparent 58%),
             radial-gradient(circle at 65% 70%,rgba(var(--ec-primaria-rgb),.55),transparent 62%);
  filter:blur(28px);animation:ec-hv-respira 9s ease-in-out infinite}
.ec-hv__anel{position:absolute;inset:12%;border-radius:50%;border:1.5px dashed rgba(var(--ec-primaria-rgb),.35);animation:ec-hv-gira 60s linear infinite}
.ec-hv__foto{position:absolute;left:11%;top:11%;width:78%;height:78%;object-fit:contain;mix-blend-mode:multiply;
  /* a foto de marketplace quase nunca é branco puro: as bordas esmaecem para o retângulo dela não aparecer no palco */
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 62%,transparent 100%)}
.ec-hv--escuro .ec-hv__foto{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;background:#fff;border-radius:var(--ec-raio-lg);padding:6%;left:15%;top:15%;width:70%;height:70%}
.ec-hv__preco{position:absolute;right:4%;bottom:12%;padding:12px 18px;border-radius:var(--ec-raio);background:var(--ec-superficie);box-shadow:var(--ec-sombra);
  font-size:.86rem;color:var(--ec-texto-suave);font-weight:600}
@keyframes ec-hv-respira{50%{transform:scale(1.08) rotate(8deg)}}
@keyframes ec-hv-gira{to{transform:rotate(360deg)}}

/* Entrada do slide da vez: o texto sobe, a foto pousa. Um movimento só. */
.ec-js .ec-hv__slide .ec-hv__txt>*{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s cubic-bezier(.22,1,.36,1)}
.ec-js .ec-hv__slide .ec-hv__foto{opacity:0;transform:translateY(26px) scale(.94) rotate(-3deg);transition:opacity .7s .12s,transform .9s .12s cubic-bezier(.22,1,.36,1)}
.ec-js .ec-hv__slide .ec-hv__preco{opacity:0;transform:translateY(10px);transition:opacity .5s .5s,transform .5s .5s}
.ec-js .ec-hv__slide.is-atual .ec-hv__txt>*,.ec-js .ec-hv__slide.is-atual .ec-hv__foto,.ec-js .ec-hv__slide.is-atual .ec-hv__preco{opacity:1;transform:none}
.ec-js .ec-hv__slide.is-atual .ec-hv__txt>:nth-child(2){transition-delay:.06s}
.ec-js .ec-hv__slide.is-atual .ec-hv__txt>:nth-child(3){transition-delay:.12s}
.ec-js .ec-hv__slide.is-atual .ec-hv__txt>:nth-child(4){transition-delay:.18s}
.ec-js .ec-hv__slide.is-atual .ec-hv__foto{animation:ec-hv-flutua 6s 1s ease-in-out infinite}
@keyframes ec-hv-flutua{50%{transform:translateY(-12px) rotate(-1.5deg)}}

/* Navegação pelos próprios produtos; a barra fina é o tempo até o próximo. */
.ec-hv__nav{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px}
.ec-hv__nav::-webkit-scrollbar{display:none}
.ec-hv__mini{position:relative;display:flex;align-items:center;gap:12px;min-width:200px;flex:1;padding:10px 14px 12px 10px;border:1px solid var(--ec-borda);
  border-radius:var(--ec-raio);background:var(--ec-superficie);cursor:pointer;text-align:left;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.ec-hv__mini img{width:46px;height:46px;object-fit:contain;flex-shrink:0;border-radius:var(--ec-raio-sm);background:#fff}
.ec-hv__mini span{font-weight:700;font-size:.92rem;line-height:1.2}
.ec-hv__mini i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ec-primaria);transform:scaleX(0);transform-origin:left}
.ec-hv__mini.is-ativo{border-color:rgba(var(--ec-primaria-rgb),.55);box-shadow:var(--ec-sombra-sm)}
.ec-hv[data-auto="1"] .ec-hv__mini.is-ativo i{animation:ec-hv-tempo var(--hv-int,6s) linear forwards}
.ec-hv:hover .ec-hv__mini.is-ativo i{animation-play-state:paused}
@keyframes ec-hv-tempo{to{transform:scaleX(1)}}
@media (max-width:860px){
  .ec-hv__grade{grid-template-columns:1fr;text-align:center;min-height:0;padding-top:24px;gap:6px}
  .ec-hv__txt{margin-inline:auto;order:2}
  .ec-hv__txt p{margin-inline:auto}
  .ec-hv__palco{height:280px;max-width:340px}
  .ec-hv__mini{min-width:150px}
  .ec-hv__mini img{width:36px;height:36px}
}

/* ── Faixa que corre ────────────────────────────────────────────────────── */
.ec-faixa{background:var(--ec-primaria);color:var(--ec-sobre-primaria);overflow:hidden;font-weight:700;font-size:.9rem}
.ec-faixa__trilho{display:flex;width:max-content;animation:ec-faixa-corre 38s linear infinite}
.ec-faixa:hover .ec-faixa__trilho{animation-play-state:paused}
.ec-faixa__lista{display:flex;list-style:none;margin:0;padding:0}
.ec-faixa__lista li{display:flex;align-items:center;gap:10px;padding:13px 30px;white-space:nowrap}
.ec-faixa__lista li i{opacity:.85}
@keyframes ec-faixa-corre{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ec-faixa__trilho{animation:none;width:auto;justify-content:center;flex-wrap:wrap}
  .ec-faixa__lista[aria-hidden]{display:none}
}

/* ── Categorias com o produto campeão ───────────────────────────────────── */
.ec-cats-v{display:grid;gap:calc(16px * var(--ec-ritmo));grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.ec-cat-v{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 14px 18px;border-radius:var(--ec-raio-lg);
  background:var(--ec-superficie);border:1px solid var(--ec-borda);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
.ec-cat-v__foto{width:100%;aspect-ratio:1;border-radius:var(--ec-raio);display:grid;place-items:center;margin-bottom:10px;overflow:hidden;
  background:radial-gradient(circle at 50% 60%,rgba(var(--ec-primaria-rgb),.16),rgba(var(--ec-secundaria-rgb),.06) 60%,transparent 72%)}
.ec-cat-v__foto img{width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.ec-cat-v__foto i{font-size:2.4rem;color:var(--ec-primaria)}
.ec-cat-v b{font-family:var(--ec-fonte-titulo);font-size:1rem;line-height:1.2}
.ec-cat-v small{color:var(--ec-texto-suave);font-size:.82rem}
.ec-cat-v:hover{transform:translateY(-5px);box-shadow:var(--ec-sombra);border-color:rgba(var(--ec-primaria-rgb),.4)}
.ec-cat-v:hover img{transform:scale(1.08) rotate(-3deg)}
[data-escuro="1"] .ec-cat-v__foto img{mix-blend-mode:normal;background:#fff;border-radius:var(--ec-raio-sm);padding:6%}

/* ── Carrossel horizontal ───────────────────────────────────────────────────
   Rolagem nativa com encaixe (scroll-snap); o JS só liga setas, arrastar com
   o mouse e a barrinha. Bordas esmaecem do lado em que ainda há o que ver. */
.ec-cabecalho-secao__acoes{display:flex;align-items:center;gap:18px}
.ec-carrossel{--_gap:calc(16px * var(--ec-ritmo));position:relative}
.ec-carrossel__pista{
  --_fa:0px;--_fp:0px;
  display:grid;grid-auto-flow:column;gap:var(--_gap);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  /* folga para o cartão subir no hover e a sombra não ser cortada */
  padding:10px 2px 22px;margin:-10px -2px -8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--_fa),#000 calc(100% - var(--_fp)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--_fa),#000 calc(100% - var(--_fp)),transparent 100%);
}
.ec-carrossel__pista::-webkit-scrollbar{display:none}
.ec-carrossel__pista>*{scroll-snap-align:start;min-width:0}
.ec-carrossel.tem-ant .ec-carrossel__pista{--_fa:36px}
.ec-carrossel.tem-prox .ec-carrossel__pista{--_fp:64px}
.ec-carrossel.is-arrastando .ec-carrossel__pista{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.ec-carrossel--cats .ec-carrossel__pista{grid-auto-columns:calc((100% - var(--_gap) * 6) / 6.5)}
/* +0,3: os cartões inteiros ficam nítidos e só a pontinha do próximo esmaece */
.ec-carrossel--prod .ec-carrossel__pista{grid-auto-columns:calc((100% - var(--_gap) * var(--_cols)) / (var(--_cols) + .3))}
.ec-carrossel__item>.ec-card{height:100%}

.ec-carrossel__setas{display:flex;gap:8px}
.ec-carrossel__setas[hidden]{display:none}
.ec-carrossel__seta{width:40px;height:40px;border-radius:50%;border:1px solid var(--ec-borda);background:var(--ec-superficie);color:var(--ec-texto);
  display:grid;place-items:center;cursor:pointer;font-size:.85rem;transition:background .2s,color .2s,border-color .2s,opacity .2s,transform .2s}
.ec-carrossel__seta:hover:not(:disabled){background:var(--ec-primaria);color:var(--ec-sobre-primaria);border-color:transparent}
.ec-carrossel__seta:active:not(:disabled){transform:scale(.94)}
.ec-carrossel__seta:disabled{opacity:.35;cursor:default}

.ec-carrossel__progresso{height:3px;max-width:180px;margin:4px auto 0;border-radius:3px;background:var(--ec-borda);overflow:hidden}
.ec-carrossel__progresso span{display:block;height:100%;width:30%;border-radius:inherit;background:var(--ec-primaria);transition:transform .12s linear,width .2s}
.ec-carrossel.is-estatico .ec-carrossel__progresso{visibility:hidden}

/* Entrada: o carrossel sobe e os cartões chegam da direita em cascata. */
@keyframes ec-chega{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.ec-js .ec-carrossel.is-visivel .ec-carrossel__pista>*{animation:ec-chega .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 55ms)}

@media (hover:none),(max-width:620px){.ec-carrossel__setas{display:none!important}}
@media (max-width:1080px){
  .ec-carrossel--cats .ec-carrossel__pista{grid-auto-columns:calc((100% - var(--_gap) * 4) / 4.5)}
  .ec-carrossel--prod .ec-carrossel__pista{grid-auto-columns:calc((100% - var(--_gap) * 3) / 3.4)}
}
@media (max-width:620px){
  /* No celular a fila vai até a borda da tela: o cartão cortado do lado é o
     convite para deslizar. */
  .ec-carrossel{--_gap:12px}
  .ec-carrossel__pista{margin-inline:-12px;padding-inline:12px;scroll-padding-inline:12px;-webkit-mask-image:none;mask-image:none}
  .ec-carrossel--cats .ec-carrossel__pista{grid-auto-columns:calc((100% - var(--_gap) * 2) / 2.6)}
  .ec-carrossel--prod .ec-carrossel__pista{grid-auto-columns:calc((100% - var(--_gap)) / 1.75)}
  .ec-cat-v{padding:12px 10px 14px}
  .ec-cat-v b{font-size:.92rem}
}

/* ── Página do produto ──────────────────────────────────────────────────── */
.ec-galeria__principal{cursor:default}
.ec-galeria__principal.is-lupa{cursor:zoom-in}
.ec-galeria__principal.is-lupa img{transition:transform .25s ease}
.ec-galeria__principal.is-lupa:hover img{transform:scale(1.9)}
.ec-galeria__seta{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid var(--ec-borda);
  background:color-mix(in srgb,var(--ec-superficie) 88%,transparent);backdrop-filter:blur(6px);cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .2s}
.ec-galeria__seta--ant{left:12px}.ec-galeria__seta--prox{right:12px}
.ec-galeria__principal:hover .ec-galeria__seta{opacity:1}
@media (hover:none){.ec-galeria__seta{opacity:1}}
.ec-galeria__conta{position:absolute;right:12px;bottom:12px;z-index:3;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--ec-texto) 75%,transparent);color:var(--ec-fundo);font-size:.75rem;font-weight:700}
.ec-variacao{display:inline-flex;align-items:center;gap:8px}
.ec-variacao__cor{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.18);flex-shrink:0}
.ec-confianca{list-style:none;margin:0 0 22px;padding:14px 0 0;border-top:1px solid var(--ec-borda);display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.86rem;color:var(--ec-texto-suave);font-weight:600}
.ec-confianca i{color:var(--ec-primaria);margin-right:7px}
.ec-ficha{width:100%;max-width:760px;border-collapse:collapse;font-size:.95rem}
.ec-ficha th{text-align:left;padding:12px 18px 12px 14px;font-weight:600;color:var(--ec-texto-suave);width:42%;vertical-align:top}
.ec-ficha td{padding:12px 14px}
.ec-ficha tr:nth-child(odd){background:var(--ec-suave)}
.ec-ficha tr:first-child th{border-top-left-radius:var(--ec-raio-sm)}
.ec-descricao ul{padding-left:1.2em}
.ec-descricao li{margin-bottom:6px}
.ec-descricao h3{font-size:1.1rem}
.ec-politica{padding-bottom:20px}

.ec-barra-compra{position:fixed;left:0;right:0;bottom:0;z-index:84;background:var(--ec-superficie);border-top:1px solid var(--ec-borda);box-shadow:0 -10px 30px rgba(17,24,39,.08);
  transform:translateY(105%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.ec-barra-compra.is-aberta{transform:none}
.ec-barra-compra__linha{display:flex;align-items:center;gap:14px;padding:10px 0}
.ec-barra-compra img{width:48px;height:48px;object-fit:contain;border-radius:var(--ec-raio-sm);background:#fff;border:1px solid var(--ec-borda)}
.ec-barra-compra__txt{flex:1;min-width:0}
.ec-barra-compra__txt b{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-barra-compra__txt span{font-weight:800;font-size:1.05rem}
.ec-barra-compra__pix{margin-left:8px;font-size:.8rem;font-weight:700;color:var(--ec-sucesso)}
.ec-barra-compra__pix span{font-size:inherit}
@media (max-width:620px){.ec-barra-compra{bottom:60px}.ec-barra-compra img{display:none}}

/* Foto de marketplace tem fundo branco: no estilo claro ele se funde com o
   cartão (multiply); no escuro a foto ganha o fundo branco dela de volta. */
.ec-card__foto,.ec-galeria__principal,.ec-galeria__mini{background:var(--ec-superficie)}
.ec-card__foto img,.ec-galeria__principal img,.ec-galeria__mini img{mix-blend-mode:multiply}
[data-escuro="1"] .ec-card__foto,[data-escuro="1"] .ec-galeria__principal,[data-escuro="1"] .ec-galeria__mini{background:#fff}
[data-escuro="1"] .ec-card__foto img,[data-escuro="1"] .ec-galeria__principal img,[data-escuro="1"] .ec-galeria__mini img{mix-blend-mode:normal}

.ec-news__txt{color:var(--ec-texto-suave);max-width:52ch;margin-inline:auto}
.ec-news__aviso{font-size:.8rem;color:var(--ec-texto-suave);margin:14px 0 0}

/* Nome de produto de marketplace é longo: o título da página não pode ocupar meia tela. */
.ec-prod__info h1{font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.2}

/* Busca sem resultado exato: aviso curto + sugestões, nunca tela vazia. */
.ec-busca-nada{display:flex;gap:14px;align-items:center;padding:16px 18px;margin:0 0 20px;border-radius:var(--ec-raio);background:var(--ec-suave)}
.ec-busca-nada>i{font-size:1.3rem;color:var(--ec-primaria)}
.ec-busca-nada b{display:block;font-size:1rem}
.ec-busca-nada span{font-size:.9rem;color:var(--ec-texto-suave)}
.ec-busca-mais{font-size:1.15rem;margin:36px 0 16px}
.ec-busca__aviso{padding:10px 14px;font-size:.84rem;color:var(--ec-texto-suave);border-bottom:1px solid var(--ec-borda)}
.ec-busca__tudo{display:block;padding:11px 14px;font-size:.88rem;font-weight:700;color:var(--ec-primaria);border-top:1px solid var(--ec-borda);text-align:center}
.ec-busca__tudo:hover{background:var(--ec-suave)}

/* ── Checkout em etapas ─────────────────────────────────────────────────── */
.ec-topo--checkout .ec-topo__linha{justify-content:space-between;gap:12px}
.ec-ck-voltar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ec-texto-suave)}
.ec-ck-voltar:hover{background:var(--ec-suave);color:var(--ec-primaria)}
.ec-topo--checkout .ec-logo{margin-right:auto}
.ec-ck-seguro{font-size:.84rem;font-weight:700;color:var(--ec-sucesso);display:flex;gap:7px;align-items:center;white-space:nowrap}
.ec-ck-pagina{padding:calc(26px * var(--ec-ritmo)) 0 48px;max-width:1040px}
.ec-ck{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:28px}
.ec-ck-etapa{background:var(--ec-superficie);border:1px solid var(--ec-borda);border-radius:var(--ec-raio);margin-bottom:12px;transition:border-color .2s,box-shadow .2s}
.ec-ck-etapa.is-aberta{border-color:rgba(var(--ec-primaria-rgb),.45);box-shadow:0 8px 28px rgba(0,0,0,.06)}
.ec-ck-etapa__topo{display:flex;align-items:center;gap:12px;padding:16px 20px}
.ec-ck-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:800;background:var(--ec-suave);color:var(--ec-texto-suave);flex-shrink:0}
.ec-ck-etapa.is-aberta .ec-ck-num{background:var(--ec-primaria);color:var(--ec-sobre-primaria)}
.ec-ck-etapa.is-feita .ec-ck-num{background:var(--ec-sucesso);color:#fff;font-size:0}
.ec-ck-etapa.is-feita .ec-ck-num::before{content:"\2713";font-size:.9rem}
.ec-ck-etapa__titulo{flex:1;min-width:0}
.ec-ck-etapa__titulo b{display:block;font-size:1.02rem}
.ec-ck-feito{display:none;font-size:.85rem;color:var(--ec-texto-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-ck-etapa.is-feita .ec-ck-feito{display:block}
.ec-ck-etapa.is-futura{opacity:.6}
.ec-ck-alterar{display:none;background:none;border:0;color:var(--ec-primaria);font-weight:700;font-size:.88rem;cursor:pointer;padding:6px}
.ec-ck-etapa.is-feita .ec-ck-alterar{display:block}
.ec-ck-etapa__corpo{display:none;padding:0 20px 20px}
.ec-ck-etapa.is-aberta .ec-ck-etapa__corpo{display:block;animation:ecCkAbre .25s ease}
@keyframes ecCkAbre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ec-ck .ec-campo{margin-bottom:12px}
.ec-ck .ec-campo>span small{font-weight:400;opacity:.8}
.ec-ck .ec-btn--grande{margin-top:8px}
.ec-ck-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ec-ck-3{grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) 70px}
.ec-ck-erro{display:block;color:var(--ec-erro);font-size:.8rem;margin-top:5px}
.ec-ck-link{background:none;border:0;padding:0;color:var(--ec-primaria);font-size:.85rem;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ec-ck-cep{position:relative}
.ec-ck-cep .ec-ck-link{position:absolute;right:0;top:0}
.ec-ck-cep .ec-input{max-width:220px}
.ec-ck-endereco{display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:var(--ec-raio-sm);background:var(--ec-suave);font-size:.9rem;margin:0 0 12px}
.ec-ck-endereco i{color:var(--ec-primaria)}
.ec-ck-endereco span{flex:1}
.ec-ck-rotulo{display:block;font-size:.85rem;font-weight:600;color:var(--ec-texto-suave);margin:4px 0 8px}
.ec-ck-fretes .ec-opcao,.ec-ck-formas .ec-opcao{padding:13px 15px;margin-bottom:8px}
.ec-ck-tag{display:inline-block;font-style:normal;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:rgba(var(--ec-primaria-rgb),.12);color:var(--ec-primaria);margin-left:6px;vertical-align:2px}
.ec-ck-tag--rapido{background:rgba(22,163,74,.12);color:var(--ec-sucesso)}
.ec-ck-selo{font-size:.75rem;font-weight:800;padding:4px 9px;border-radius:999px;background:var(--ec-sucesso);color:#fff;white-space:nowrap}
.ec-ck-cartao{padding:4px 0 10px}
.ec-ck-pagar{margin-top:14px;font-size:1.05rem}
.ec-ck-garantia{text-align:center;font-size:.8rem;color:var(--ec-texto-suave);margin:12px 0 0}
.ec-ck-garantia i{color:var(--ec-sucesso)}
.ec-ck-resumo{padding:20px;top:20px}
.ec-ck-itens{max-height:280px;overflow-y:auto;margin-bottom:10px}
.ec-ck-itens .ec-item{padding:8px 0;align-items:center;border:0}
.ec-ck-foto{position:relative;flex-shrink:0}
.ec-ck-foto .ec-item__foto{width:54px;height:54px}
.ec-ck-foto em{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ec-texto-suave);color:#fff;font-style:normal;font-size:.72rem;font-weight:700;display:grid;place-items:center}
.ec-ck-itens .ec-item__nome{font-size:.86rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ec-ck-preco{font-size:.88rem;white-space:nowrap}
.ec-ck-cupom{display:flex;gap:8px;margin:8px 0 4px}
.ec-ck-cupom .ec-btn{padding:10px 14px}
.ec-ck-resumo>.ec-ck-link{display:block;margin:4px 0 10px}
.ec-ck-resumo-barra{display:none}
.ec-ck-rodape{padding:22px 0 34px;font-size:.8rem;color:var(--ec-texto-suave)}
.ec-ck-rodape .ec-wrap{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center}
.ec-ck-rodape a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){
  .ec-ck{grid-template-columns:1fr;gap:0}
  .ec-ck-resumo{display:none;order:-1;position:static;margin-bottom:12px}
  .ec-ck.is-resumo-aberto .ec-ck-resumo{display:block}
  .ec-ck-resumo-barra{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;margin-bottom:12px;border:1px solid var(--ec-borda);border-radius:var(--ec-raio);background:var(--ec-suave);color:var(--ec-texto);font:inherit;font-size:.92rem;cursor:pointer}
  .ec-ck-resumo-barra b{font-size:1.05rem}
  .ec-ck-seta{font-size:.75rem;margin-left:4px;transition:transform .2s}
  .ec-ck-resumo-barra[aria-expanded="true"] .ec-ck-seta{transform:rotate(180deg)}
  .ec-ck-seguro span{display:none}
}
@media (max-width:620px){
  .ec-ck-pagina{padding-top:14px}
  .ec-ck-etapa__topo{padding:14px 16px}
  .ec-ck-etapa__corpo{padding:0 16px 18px}
  .ec-ck-3{grid-template-columns:1fr 1fr}
  .ec-ck-3 .ec-campo:first-child{grid-column:1/-1}
  .ec-ck-cep .ec-input{max-width:none}
  .ec-ck-cep .ec-ck-link{position:static;display:inline-block;margin-top:6px}
}
/* `hidden` tem de vencer o display das classes da loja (campo, linha do
   resumo, cupom): sem isto a observação e "Desconto R$ 0,00" apareciam. */
.ec-ck [hidden],.ec-ck-pagina [hidden]{display:none!important}
/* Coluna que encolhe: o resumo de uma linha ("Rua…, Loggi…") não pode
   alargar a página no celular. */
.ec-ck-etapas,.ec-ck-resumo{min-width:0}
@media (max-width:860px){.ec-ck{grid-template-columns:minmax(0,1fr)}}

/* ══ Avaliações na página do produto (parciais/avaliacoes_produto.php) ═════ */
/* Estrelas fracionadas: 4,3 pinta 86% — "4 cheias" mentiria para menos. */
.ec-estrelas{--nota:0;position:relative;display:inline-block;font-size:1em;line-height:1;letter-spacing:2px;color:var(--ec-borda);font-family:Arial,sans-serif;vertical-align:middle}
.ec-estrelas::before{content:"★★★★★"}
.ec-estrelas::after{content:"★★★★★";position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;color:var(--ec-destaque,#f5b301);width:calc(var(--nota) / 5 * 100%)}
.ec-prod__notas{gap:6px;text-decoration:none;font-size:.9rem}
.ec-prod__notas b{color:var(--ec-texto)}
.ec-prod__notas-mkt{font-size:.8rem;color:var(--ec-texto-suave);text-decoration:none;padding:3px 9px;border:1px solid var(--ec-borda);border-radius:999px;white-space:nowrap}
.ec-prod__notas-mkt:hover{border-color:var(--ec-primaria);color:var(--ec-primaria)}

.ec-aval{margin:44px 0 10px;scroll-margin-top:90px}
.ec-aval__cab{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ec-aval__cab h2{margin:0;font-size:clamp(1.3rem,2.4vw,1.7rem)}
.ec-aval__cab p{margin:6px 0 0;color:var(--ec-texto-suave);font-size:.92rem;max-width:60ch}
.ec-aval__cta{box-shadow:0 8px 24px rgba(var(--ec-primaria-rgb),.25);animation:ec-aval-pulso 2.6s ease-in-out 1.2s 2}
@keyframes ec-aval-pulso{0%,100%{transform:none}50%{transform:translateY(-2px) scale(1.03)}}
.ec-aval__resumos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:22px}
.ec-aval__resumo{display:flex;gap:18px;align-items:center;padding:18px;border:1px solid var(--ec-borda);border-radius:var(--ec-raio);background:var(--ec-superficie)}
.ec-aval__resumo--loja{border-color:rgba(var(--ec-primaria-rgb),.35);background:linear-gradient(180deg,rgba(var(--ec-primaria-rgb),.06),transparent)}
.ec-aval__nota{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:96px}
.ec-aval__nota b{font-size:2.3rem;line-height:1;font-family:var(--ec-fonte-titulo);color:var(--ec-texto)}
.ec-aval__nota .ec-estrelas{font-size:1.05rem}
.ec-aval__nota span{font-size:.78rem;color:var(--ec-texto-suave);line-height:1.3}
.ec-aval__barras{list-style:none;margin:0;padding:0;flex:1;display:grid;gap:4px;font-size:.74rem;color:var(--ec-texto-suave)}
.ec-aval__barras li{display:grid;grid-template-columns:30px 1fr 34px;align-items:center;gap:8px}
.ec-aval__barras i{height:7px;border-radius:9px;background:var(--ec-suave);overflow:hidden;display:block}
.ec-aval__barras em{display:block;height:100%;background:var(--ec-destaque,#f5b301);border-radius:9px}
.ec-aval__galeria{margin-bottom:22px}
.ec-aval__galeria>b{display:block;margin-bottom:10px;font-size:.95rem}
.ec-aval__midias{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.ec-aval__midia{position:relative;flex:0 0 auto;width:96px;height:96px;border-radius:var(--ec-raio-sm);overflow:hidden;border:0;padding:0;cursor:zoom-in;background:var(--ec-suave);scroll-snap-align:start}
.ec-aval__midia img,.ec-aval__midia video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.ec-aval__midia:hover img,.ec-aval__midia:hover video{transform:scale(1.06)}
.ec-aval__midia.is-video>i{position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-size:.8rem}
.ec-aval__midia--mini{width:64px;height:64px}
.ec-aval__filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ec-aval__filtros button{border:1px solid var(--ec-borda);background:var(--ec-fundo);color:var(--ec-texto);padding:7px 13px;border-radius:999px;font:inherit;font-size:.84rem;cursor:pointer}
.ec-aval__filtros button.is-ativo{background:var(--ec-texto);color:var(--ec-fundo);border-color:var(--ec-texto)}
.ec-aval__lista{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.ec-aval__item{padding:18px;border:1px solid var(--ec-borda);border-radius:var(--ec-raio);background:var(--ec-superficie);display:flex;flex-direction:column;gap:10px;animation:ec-aval-entra .4s ease both}
.ec-aval__item.is-oculta,.ec-aval__item.is-filtrada{display:none}
@keyframes ec-aval-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ec-aval__item header{display:flex;align-items:center;gap:10px}
.ec-aval__item header>div{flex:1;min-width:0}
.ec-aval__item header b{display:block;font-size:.92rem}
.ec-aval__item header span{font-size:.78rem;color:var(--ec-texto-suave)}
.ec-aval__avatar{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:800;background:var(--ec-primaria);color:var(--ec-sobre-primaria)}
.ec-aval__avatar--mercadolivre{background:#ffe600;color:#2d3277}
.ec-aval__avatar--shopee{background:#ee4d2d;color:#fff}
.ec-aval__selo{align-self:flex-start;margin-top:auto;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px;display:inline-flex;gap:6px;align-items:center;background:rgba(var(--ec-primaria-rgb),.1);color:var(--ec-primaria)}
.ec-aval__titulo{font-size:.95rem}
.ec-aval__item header .ec-estrelas{font-size:.92rem}
.ec-aval__selo--loja{background:color-mix(in srgb,var(--ec-sucesso) 14%,transparent);color:var(--ec-sucesso)}
.ec-aval__selo--mercadolivre{background:#fff7b3;color:#2d3277}
.ec-aval__selo--shopee{background:#fde3dc;color:#c7381b}
.ec-aval__estrelas{display:flex;align-items:center;gap:8px;font-size:.95rem}
.ec-aval__estrelas b{font-size:.92rem}
.ec-aval__item p{margin:0;font-size:.94rem;line-height:1.55;color:var(--ec-texto)}
.ec-aval__item-midias{display:flex;gap:8px;flex-wrap:wrap}
.ec-aval__mais{display:block;margin:18px auto 0}
.ec-aval__vazio{display:flex;gap:14px;align-items:center;padding:20px;border:1px dashed var(--ec-borda);border-radius:var(--ec-raio);color:var(--ec-texto-suave)}
.ec-aval__vazio>i{font-size:1.8rem;color:var(--ec-destaque,#f5b301)}
.ec-aval__vazio b{display:block;color:var(--ec-texto)}
.ec-aval__luz{position:fixed;inset:0;z-index:9999;background:rgba(10,10,14,.92);display:flex;align-items:center;justify-content:center;padding:16px}
.ec-aval__luz[hidden]{display:none !important}
.ec-aval__luz-palco{max-width:min(92vw,980px);max-height:86vh;display:flex}
.ec-aval__luz-palco img,.ec-aval__luz-palco video{max-width:100%;max-height:86vh;border-radius:12px;object-fit:contain;background:#000}
.ec-aval__luz-fechar,.ec-aval__luz-seta{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.1rem}
.ec-aval__luz-fechar{top:14px;right:14px}
.ec-aval__luz-seta{left:14px;top:50%;transform:translateY(-50%)}
.ec-aval__luz-seta--prox{left:auto;right:14px}
@media (max-width:640px){
  .ec-aval__lista{grid-template-columns:1fr}
  .ec-aval__cta{width:100%;justify-content:center}
  .ec-aval__resumo{flex-direction:column;align-items:stretch}
  .ec-aval__luz-seta{top:auto;bottom:18px;transform:none}
}

/* ══ "Chega até sexta, 14/11" ════════════════════════════════════════════ */
.ec-chega__topo{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ec-chega__icone{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--ec-sucesso) 14%,transparent);color:var(--ec-sucesso)}
.ec-chega__txt{flex:1;min-width:0}
.ec-chega__txt b{display:block;font-size:1.02rem;line-height:1.3;color:var(--ec-texto)}
.ec-chega__txt span{display:block;font-size:.84rem;color:var(--ec-texto-suave)}
.ec-chega.is-com-data .ec-chega__txt b{color:var(--ec-sucesso);font-size:1.12rem}
.ec-chega.is-com-data .ec-chega__txt b::first-letter{text-transform:uppercase}
.ec-chega.is-com-data [data-frete-produto]{display:none}
.ec-chega.is-trocando [data-frete-produto]{display:flex}
.ec-chega__trocar{border:0;background:none;color:var(--ec-primaria);font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;padding:6px;white-space:nowrap}
.ec-chega__naosei{font-size:.8rem;color:var(--ec-texto-suave);display:inline-block;margin-top:8px}
.ec-chega.is-com-data .ec-chega__naosei{display:none}
.ec-chega .ec-frete-opcao small{display:inline-block;margin-left:6px;font-size:.7rem;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--ec-suave);color:var(--ec-texto-suave)}
.ec-chega .ec-frete-opcao.is-melhor b{color:var(--ec-sucesso)}
.ec-chega__carregando{display:flex;align-items:center;gap:8px;color:var(--ec-texto-suave);font-size:.86rem;padding:6px 0}

.ec-chega-curto{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;font-size:.92rem;font-weight:700;color:var(--ec-sucesso)}
.ec-chega-curto[hidden]{display:none}
.ec-chega-curto span::first-letter{text-transform:uppercase}
.ec-chega-curto a{font-weight:600;font-size:.8rem;color:var(--ec-texto-suave);margin-left:auto}
.ec-frete-opcao[hidden]{display:none}

/* Moedas no resumo do checkout */
.ec-ck-moedas{display:flex;align-items:center;gap:10px;margin:8px 0;padding:10px 12px;border-radius:var(--ec-raio-sm);cursor:pointer;
  background:linear-gradient(135deg,rgba(255,229,138,.55),rgba(255,201,60,.35));border:1px solid rgba(255,179,0,.5)}
.ec-ck-moedas input{width:18px;height:18px;accent-color:#b77900;flex:0 0 auto}
.ec-ck-moedas__icone{color:#b77900}
.ec-ck-moedas__txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ec-ck-moedas__txt b{font-size:.88rem}
.ec-ck-moedas__txt small{font-size:.76rem;color:var(--ec-texto-suave)}
.ec-ck-moedas__valor{font-weight:800;color:var(--ec-sucesso);white-space:nowrap}
.ec-ck-moedas input:not(:checked)~.ec-ck-moedas__valor{color:var(--ec-texto-suave);font-weight:600}
.ec-ck-moedas-entrar{display:inline-flex;gap:6px;align-items:center;margin:6px 0}

/* Avaliar a partir do pedido e da conta */
.ec-aval-pedido{display:flex;align-items:center;gap:14px;padding:16px 18px;margin:0 0 18px;border-radius:var(--ec-raio);text-decoration:none;color:#3d2a00;
  background:linear-gradient(135deg,#fff3c4,#ffe08a);border:1px solid rgba(255,179,0,.55);box-shadow:0 8px 24px rgba(255,179,0,.18);transition:transform .2s}
.ec-aval-pedido:hover{transform:translateY(-2px)}
.ec-aval-pedido__estrelas{font-size:1.25rem;letter-spacing:1px;color:#f5a300;flex:0 0 auto}
.ec-aval-pedido>div{flex:1;min-width:0}
.ec-aval-pedido b{display:block;font-size:1rem}
.ec-aval-pedido>div>span{font-size:.82rem;opacity:.8}
.ec-aval-pedido-dica{display:flex;gap:8px;align-items:center;justify-content:center;font-size:.9rem;color:var(--ec-texto-suave);margin:0 0 18px;text-align:center}
.ec-aval-pedido-dica i{color:#f5a300}
.ec-pedido-cartao__avaliar{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:800;padding:5px 11px;border-radius:999px;background:#fff3c4;color:#7a5200;text-decoration:none;border:1px solid rgba(255,179,0,.5)}
.ec-conta__moedas{display:flex;align-items:center;gap:14px;padding:16px 18px;margin:0 0 16px;border-radius:var(--ec-raio);background:linear-gradient(135deg,#ffe58a,#ffb300);color:#3d2a00}
.ec-conta__moedas>i{font-size:1.6rem}
.ec-conta__moedas>div{flex:1}
.ec-conta__moedas b{display:block;font-size:1.25rem}
.ec-conta__moedas span{font-size:.82rem}
@media (max-width:560px){.ec-aval-pedido{flex-wrap:wrap}.ec-aval-pedido .ec-btn{width:100%;justify-content:center}}
.ec-card__notas b{color:var(--ec-texto);font-weight:700}

/* ============================================================================
   Modo Black Friday (lib/black_friday.php) — só com [data-bf] no <body>.
   Preto neutro, linhas finas, tipografia grande e movimento lento. Nada de
   amarelo-gritando: a data se nota pelo contraste, não pelo volume.
   Toda animação some em prefers-reduced-motion e com "Animações" desligada.
   ========================================================================= */
[data-bf]{--bf-linha:rgba(255,255,255,.08);--bf-brilho:rgba(var(--ec-primaria-rgb),.55);font-variant-numeric:tabular-nums}
body[data-bf-visual="escuro"] .ec-topo{background:color-mix(in srgb,#09090b 82%,transparent);border-bottom-color:var(--bf-linha)}

/* Faixa do topo */
.ec-bf-faixa{position:relative;background:#000;color:#f4f4f5;font-size:.82rem;overflow:hidden;border-bottom:1px solid var(--bf-linha)}
.ec-bf-faixa::after{ /* fio de luz que atravessa devagar */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--bf-brilho),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:ecBfFio 6s cubic-bezier(.45,0,.2,1) infinite
}
.ec-bf-faixa__linha{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,28px);padding:9px 0;flex-wrap:wrap}
.ec-bf-faixa__marca{display:inline-flex;align-items:center;gap:10px;min-width:0}
.ec-bf-faixa__marca b{font-family:var(--ec-fonte-titulo);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem}
.ec-bf-faixa__frase{color:rgba(244,244,245,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-bf-faixa__marca:hover .ec-bf-faixa__frase{color:#fff}
.ec-bf-faixa__ponto{width:7px;height:7px;border-radius:50%;background:#f4f4f5;flex-shrink:0;box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:ecBfPulso 2.4s ease-out infinite}
.ec-bf-faixa__relogio{display:inline-flex;align-items:baseline;gap:2px;font-weight:700}
.ec-bf-faixa__relogio>span{color:rgba(244,244,245,.5);font-weight:500;margin-right:6px}
.ec-bf-faixa__relogio b{display:inline-block;min-width:1.35em;text-align:right;font-weight:700}
.ec-bf-faixa__relogio i{font-style:normal;color:rgba(244,244,245,.45);font-weight:500;margin-right:6px}
.ec-bf-faixa__extra{color:rgba(244,244,245,.5);padding-left:clamp(12px,3vw,28px);border-left:1px solid var(--bf-linha)}
@media (max-width:860px){.ec-bf-faixa__extra{display:none}}
@media (max-width:520px){.ec-bf-faixa__frase{display:none}.ec-bf-faixa__relogio>span{display:none}}

/* Abertura na home */
.ec-bf-abre{position:relative;overflow:hidden;isolation:isolate;padding:calc(64px * var(--ec-ritmo)) 0 calc(56px * var(--ec-ritmo));border-bottom:1px solid var(--bf-linha)}
.ec-bf-abre__luz{
  position:absolute;inset:-40% -10% auto;height:140%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(40% 50% at 22% 40%,rgba(var(--ec-primaria-rgb),.22),transparent 70%),
    radial-gradient(36% 46% at 78% 60%,rgba(255,255,255,.07),transparent 70%);
  filter:blur(20px);animation:ecBfLuz 18s ease-in-out infinite alternate
}
.ec-bf-abre__grao{ /* grão finíssimo: tira o aspecto "chapado" do preto */
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}
.ec-bf-abre__grade{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.ec-bf-abre__selo{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--bf-linha);border-radius:999px;background:rgba(255,255,255,.03);backdrop-filter:blur(8px);font-size:.78rem;font-weight:600;letter-spacing:.04em;color:rgba(244,244,245,.8)}
.ec-bf-abre__titulo{margin:18px 0 14px;font-size:clamp(3rem,9vw,7.2rem);font-weight:800;line-height:.92;letter-spacing:-.025em;text-transform:uppercase}
.ec-bf-abre__titulo>span{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.04em}
.ec-bf-abre__titulo>span>span{display:inline-block}
.ec-bf-abre__titulo>span:last-child>span{ /* "Friday" esmaecendo para baixo, com um reflexo que passa */
  color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%),
                   linear-gradient(180deg,rgba(244,244,245,.92) 0%,rgba(244,244,245,.22) 100%);
  background-repeat:no-repeat;background-size:250% 100%,100% 100%;background-position:150% 0,0 0;
  animation:ecBfReflexo 7s 1.6s ease-in-out infinite
}
.ec-bf-abre__frase{font-size:clamp(1rem,1.6vw,1.2rem);color:var(--ec-texto-suave);max-width:46ch;margin-bottom:26px}
.ec-bf-abre__btn{border-radius:999px;padding:15px 28px}
.ec-bf-abre__btn i{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.ec-bf-abre__btn:hover i{transform:translateX(4px)}

.ec-bf-abre__relogio{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:22px;
  border-radius:calc(var(--ec-raio) + 6px);background:rgba(255,255,255,.025);
  border:1px solid var(--bf-linha);backdrop-filter:blur(14px)
}
.ec-bf-abre__relogio::before{ /* borda que acende devagar, girando */
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--bf-giro,0deg),transparent 0 70%,var(--bf-brilho) 85%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:ecBfGiro 8s linear infinite
}
.ec-bf-abre__relogio small{grid-column:1/-1;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,245,.5)}
.ec-bf-abre__cel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 6px;border-radius:var(--ec-raio-sm);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.05)}
.ec-bf-abre__cel b{font-family:var(--ec-fonte-titulo);font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:700;line-height:1;letter-spacing:-.03em}
.ec-bf-abre__cel span{font-size:.72rem;color:rgba(244,244,245,.5);letter-spacing:.06em;text-transform:uppercase}
@media (max-width:820px){
  .ec-bf-abre__grade{grid-template-columns:1fr}
  .ec-bf-abre{padding:calc(44px * var(--ec-ritmo)) 0}
}
@media (max-width:420px){.ec-bf-abre__relogio{padding:14px;gap:6px}.ec-bf-abre__cel{padding:12px 2px}}

/* Dígito que muda: vira de baixo para cima, curto */
[data-bf] .ec-bf-abre__cel b.is-vira,[data-bf] .ec-bf-faixa__relogio b.is-vira{animation:ecBfVira .42s cubic-bezier(.22,1,.36,1)}

/* Entrada da abertura: o título sobe de trás de uma máscara */
.ec-bf-abre__titulo>span>span{animation:ecBfSobe .9s cubic-bezier(.22,1,.36,1) both}
.ec-bf-abre__titulo>span:last-child>span{animation:ecBfSobe .9s .12s cubic-bezier(.22,1,.36,1) both,ecBfReflexo 7s 1.6s ease-in-out infinite}
.ec-bf-abre__selo,.ec-bf-abre__frase,.ec-bf-abre__btn{animation:ecBfSurge .8s cubic-bezier(.22,1,.36,1) both}
.ec-bf-abre__frase{animation-delay:.25s}.ec-bf-abre__btn{animation-delay:.35s}
.ec-bf-abre__relogio{animation:ecBfSurge .9s .3s cubic-bezier(.22,1,.36,1) both}

/* Selo de desconto nos cartões: branco sobre preto, com fio de luz */
[data-bf] .ec-selo--desconto,[data-bf] .ec-selo--relampago{
  position:relative;overflow:hidden;background:#f4f4f5;color:#09090b;font-weight:800;letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(0,0,0,.22)
}
[data-bf] .ec-selo--desconto::after,[data-bf] .ec-selo--relampago::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);
  animation:ecBfSelo 4.5s 1s ease-in-out infinite
}
[data-bf] .ec-card{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
body[data-bf-visual="escuro"] .ec-card:hover{border-color:rgba(255,255,255,.16)}

@property --bf-giro{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes ecBfGiro{to{--bf-giro:360deg}}
@keyframes ecBfFio{0%{background-position:-60% 0}100%{background-position:160% 0}}
@keyframes ecBfPulso{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@keyframes ecBfLuz{0%{transform:translate3d(-3%,0,0) scale(1)}100%{transform:translate3d(4%,3%,0) scale(1.08)}}
@keyframes ecBfReflexo{0%,55%{background-position:150% 0,0 0}85%,100%{background-position:-50% 0,0 0}}
@keyframes ecBfSobe{from{transform:translateY(105%)}to{transform:none}}
@keyframes ecBfSurge{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes ecBfVira{from{opacity:.15;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes ecBfSelo{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

@media (prefers-reduced-motion:reduce){
  .ec-bf-faixa::after,.ec-bf-faixa__ponto,.ec-bf-abre__luz,.ec-bf-abre__relogio::before,
  .ec-bf-abre__titulo>span>span,.ec-bf-abre__selo,.ec-bf-abre__frase,.ec-bf-abre__btn,.ec-bf-abre__relogio,
  [data-bf] .ec-selo--desconto::after,[data-bf] .ec-selo--relampago::after,[data-bf] b.is-vira{animation:none!important}
}
[data-sem-anim] .ec-bf-faixa::after,[data-sem-anim] .ec-bf-faixa__ponto,[data-sem-anim] .ec-bf-abre__luz,
[data-sem-anim] .ec-bf-abre__relogio::before,[data-sem-anim] .ec-bf-abre__titulo>span>span,
[data-sem-anim] .ec-bf-abre__selo,[data-sem-anim] .ec-bf-abre__frase,[data-sem-anim] .ec-bf-abre__btn,
[data-sem-anim] .ec-bf-abre__relogio,[data-sem-anim] .ec-selo--desconto::after,[data-sem-anim] .ec-selo--relampago::after,
[data-sem-anim] b.is-vira{animation:none!important}

/* ── Vídeo do produto (lib/video_produto.php) ───────────────────────────────
   Botão redondo no canto esquerdo da foto: abre o vídeo numa janela por cima
   da página. No mouse ele se abre em pílula com "Assistir vídeo · 0:40". */
.ec-video-btn{position:absolute;left:14px;bottom:14px;z-index:4;display:inline-flex;align-items:center;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:color-mix(in srgb,var(--ec-superficie) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ec-texto);
  box-shadow:0 10px 28px -8px rgba(0,0,0,.35),0 0 0 1px color-mix(in srgb,var(--ec-texto) 8%,transparent);font:inherit;
  animation:ec-video-entra .5s .35s cubic-bezier(.22,1.4,.36,1) both}
.ec-video-btn__bola{position:relative;flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--ec-primaria);color:var(--ec-sobre-primaria);font-size:1.15rem;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.ec-video-btn__bola i{margin-left:3px}
.ec-video-btn__bola::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ec-primaria);animation:ec-video-onda 2.2s 1s ease-out 3;pointer-events:none}
.ec-video-btn__txt{display:inline-flex;align-items:baseline;gap:8px;max-width:0;overflow:hidden;white-space:nowrap;font-weight:700;font-size:.92rem;
  padding:0;opacity:0;transition:max-width .35s cubic-bezier(.22,1,.36,1),padding .35s,opacity .25s}
.ec-video-btn__txt small{font-weight:600;font-size:.8rem;color:var(--ec-texto-suave);font-variant-numeric:tabular-nums}
.ec-video-btn:hover .ec-video-btn__txt,.ec-video-btn:focus-visible .ec-video-btn__txt{max-width:220px;padding:0 18px 0 12px;opacity:1}
.ec-video-btn:hover .ec-video-btn__bola{transform:scale(1.04)}
/* Em cima do botão, a lupa da foto não amplia a imagem de trás. */
.ec-galeria__principal.is-lupa:has(.ec-video-btn:hover) img{transform:none}
.ec-video-btn__bola{transition:transform .2s}
.ec-video-btn:active .ec-video-btn__bola{transform:scale(.95)}
@keyframes ec-video-entra{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes ec-video-onda{from{transform:scale(1);opacity:.75}to{transform:scale(1.7);opacity:0}}

/* Miniatura "Vídeo" no fim da fila de fotos. */
.ec-galeria__vmini{position:relative;flex:0 0 76px;height:76px;border-radius:var(--ec-raio-sm);border:2px solid var(--ec-borda);
  background:var(--ec-superficie);cursor:pointer;overflow:hidden;padding:0;transition:border-color .2s}
.ec-galeria__vmini:hover{border-color:var(--ec-primaria)}
.ec-galeria__vmini img{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.ec-galeria__vmini-play{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--ec-primaria);color:var(--ec-sobre-primaria);font-size:.72rem;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.ec-galeria__vmini-play i{margin-left:2px}
.ec-galeria__vmini-txt{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* Janela do vídeo. */
.ec-video-modal{padding:0;border:0;margin:0;width:100%;max-width:100%;height:100%;max-height:100%;background:transparent;color:var(--ec-texto);overflow:hidden}
.ec-video-modal::backdrop{background:rgba(6,8,14,.84);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ec-video-modal__caixa{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 16px}
.ec-video-modal[open] .ec-video-modal__caixa{animation:ec-video-abre .32s cubic-bezier(.22,1,.36,1)}
.ec-video-modal__tela{border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);line-height:0}
.ec-video-modal__tela video{display:block;width:auto;height:auto;max-width:min(92vw,1100px);max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);background:#000}
.ec-video-modal__fechar{position:fixed;top:16px;right:16px;z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);color:#fff;font-size:1.2rem;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.ec-video-modal__fechar:hover{background:rgba(255,255,255,.24)}
.ec-video-modal__rodape{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(92vw,560px);padding:10px 10px 10px 16px;
  border-radius:14px;background:var(--ec-superficie);box-shadow:0 12px 40px -12px rgba(0,0,0,.5)}
.ec-video-modal__info{min-width:0;display:flex;flex-direction:column;gap:2px}
.ec-video-modal__info b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-video-modal__info span{font-size:.85rem;color:var(--ec-texto-suave)}
.ec-video-modal__info em{font-style:normal;font-weight:700;color:var(--ec-primaria)}
.ec-video-modal__rodape .ec-btn{flex:0 0 auto;white-space:nowrap}
@keyframes ec-video-abre{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .ec-video-btn{left:10px;bottom:10px}
  .ec-video-btn__bola{width:52px;height:52px}
  .ec-video-modal__caixa{padding:62px 10px 12px;justify-content:space-between}
  .ec-video-modal__tela{border-radius:14px}
  .ec-video-modal__tela video{max-width:calc(100vw - 20px);max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px)}
  .ec-video-modal__fechar{top:10px;right:10px}
  .ec-video-modal__rodape{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ec-video-btn,.ec-video-btn__bola::after,.ec-video-modal[open] .ec-video-modal__caixa{animation:none}
}

/* ── Black Friday: o resto da vitrine no mesmo tom ──────────────────────────
   Os temas pintam faixa/newsletter/CTA com var(--ec-texto) ou com a cor da
   marca; na Black Friday o texto é branco e esses blocos viravam placas
   claras no meio do preto. `body[data-bf]` vence o seletor simples do tema. */
body[data-bf]{--bf-sup:#111114;--bf-sup2:#17171b}

/* Botão sólido, sem o degradê do tema (branco → cinza ficava sujo) */
body[data-bf] .ec-btn:not(.ec-btn--fantasma){background:var(--ec-primaria);color:var(--ec-sobre-primaria)}

/* Foto de produto: fundo "estúdio" cinza suave em vez do branco estourado.
   multiply funde o branco do JPG no cinza, e o produto parece fotografado ali. */
body[data-bf-visual="escuro"] .ec-card__foto,
body[data-bf-visual="escuro"] .ec-galeria__principal,body[data-bf-visual="escuro"] .ec-galeria__mini{
  background:radial-gradient(120% 95% at 50% 38%,#e9e9ec 0%,#c9c9cf 100%)
}
body[data-bf-visual="escuro"] .ec-card__foto img,
body[data-bf-visual="escuro"] .ec-galeria__principal img,body[data-bf-visual="escuro"] .ec-galeria__mini img{mix-blend-mode:multiply}
body[data-bf-visual="escuro"] .ec-cat-v__foto{background:radial-gradient(120% 95% at 50% 38%,#e6e6e9 0%,#c6c6cc 100%)}
body[data-bf-visual="escuro"] .ec-cat-v__foto img{mix-blend-mode:multiply;background:none;padding:0;border-radius:0}
body[data-bf-visual="escuro"] .ec-hv--escuro .ec-hv__foto,body[data-bf-visual="escuro"] .ec-hv__foto{background:radial-gradient(120% 95% at 50% 38%,#e9e9ec 0%,#c9c9cf 100%);mix-blend-mode:normal}

/* Oferta relâmpago: placa escura com fio de luz, relógio em vidro */
body[data-bf] .ec-relampago .ec-wrap{background:linear-gradient(160deg,var(--bf-sup2),var(--bf-sup) 60%);color:#f4f4f5;border:1px solid var(--bf-linha)}
body[data-bf] .ec-relampago .ec-wrap::before{background:radial-gradient(circle,rgba(255,255,255,.09),transparent 70%);opacity:1}
body[data-bf] .ec-relampago__raio{background:#f4f4f5;color:#09090b;box-shadow:none}
body[data-bf] .ec-relampago__relogio div{background:rgba(255,255,255,.05);border:1px solid var(--bf-linha)}
body[data-bf] .ec-relampago__selo,body[data-bf] .ec-relampago__acaba{color:rgba(244,244,245,.6);opacity:1}

/* Faixa de vantagens: some a placa clara, ficam fios finos */
body[data-bf-visual="escuro"] .ec-faixa{background:transparent;color:rgba(244,244,245,.78);border-block:1px solid var(--bf-linha)}
body[data-bf-visual="escuro"] .ec-faixa i{color:rgba(244,244,245,.45)}

/* Newsletter e chamada (CTA): placa escura com luz da marca no canto */
body[data-bf] .ec-news,body[data-bf] .ec-cta{
  position:relative;overflow:hidden;isolation:isolate;color:#f4f4f5;border:1px solid var(--bf-linha);
  background:radial-gradient(60% 120% at 100% 0%,rgba(var(--ec-primaria-rgb),.10),transparent 60%),linear-gradient(160deg,var(--bf-sup2),var(--bf-sup))
}
body[data-bf] .ec-news h2,body[data-bf] .ec-news p,body[data-bf] .ec-cta h2,body[data-bf] .ec-cta p{color:#f4f4f5}
body[data-bf] .ec-news small,body[data-bf] .ec-news label,body[data-bf] .ec-news span,body[data-bf] .ec-news p,body[data-bf] .ec-cta p{color:rgba(244,244,245,.62);opacity:1}
body[data-bf] .ec-news h2{color:#f4f4f5}
body[data-bf] .ec-news .ec-input{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#f4f4f5}
body[data-bf] .ec-news .ec-input::placeholder{color:rgba(244,244,245,.38)}
body[data-bf] .ec-news .ec-input:focus{border-color:rgba(255,255,255,.4);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
body[data-bf] .ec-cta .ec-btn{background:#f4f4f5;color:#09090b}

/* Vantagens, depoimentos, contadores, perguntas: superfície única */
body[data-bf-visual="escuro"] .ec-beneficio,body[data-bf-visual="escuro"] .ec-depoimento,body[data-bf-visual="escuro"] .ec-contador{background:var(--bf-sup);border:1px solid var(--bf-linha)}
body[data-bf-visual="escuro"] .ec-rodape{background:#050506;border-top-color:var(--bf-linha)}

/* Selo "Black / Friday" nos maiores descontos: pequeno, em duas linhas */
.ec-selo-bf{
  display:inline-flex;flex-direction:column;align-items:flex-start;align-self:flex-start;
  padding:5px 8px 4px;border-radius:7px;background:#09090b;color:#f4f4f5;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 16px rgba(0,0,0,.28);
  font-family:var(--ec-fonte-titulo);font-size:.6rem;font-weight:800;line-height:1.08;
  letter-spacing:.16em;text-transform:uppercase;animation:ecBfSurge .6s .2s cubic-bezier(.22,1,.36,1) both
}
.ec-selo-bf b{font-weight:800}
.ec-selo-bf b+b{color:rgba(244,244,245,.62);font-weight:700}
@media (prefers-reduced-motion:reduce){.ec-selo-bf{animation:none}}
[data-sem-anim] .ec-selo-bf{animation:none}

/* Página do produto: selo um pouco maior e a faixa da oferta relâmpago no tom */
.ec-galeria .ec-selo-bf{font-size:.7rem;padding:6px 10px 5px}
body[data-bf] .ec-prod__relampago{background:linear-gradient(160deg,var(--bf-sup2),var(--bf-sup));color:#f4f4f5;border:1px solid var(--bf-linha)}
body[data-bf] .ec-prod__relampago i{color:rgba(244,244,245,.7)}

/* ── Black Friday CLARA (Editor › Black Friday › Claro) ─────────────────────
   Para quem não gosta de loja escura: a página fica clara e as peças da data
   (faixa do topo, abertura, oferta, newsletter, CTA, selos) continuam como
   placas pretas. É o contraste que marca a Black Friday, sem apagar a loja. */
body[data-bf-visual="claro"]{--bf-brilho:rgba(255,255,255,.55)}
body[data-bf-visual="claro"] .ec-bf-abre{
  --ec-texto-suave:rgba(244,244,245,.62);--ec-primaria-rgb:255,255,255;
  background:#09090b;color:#f4f4f5;border-bottom:0
}
body[data-bf-visual="claro"] .ec-bf-abre h2{color:#f4f4f5}
body[data-bf-visual="claro"] .ec-bf-abre__luz{opacity:.55}
/* Botão claro dentro das placas pretas (o botão preto da página sumiria nelas) */
body[data-bf-visual="claro"] .ec-bf-abre .ec-btn.ec-bf-abre__btn,
body[data-bf-visual="claro"] .ec-news .ec-btn:not(.ec-btn--fantasma),
body[data-bf-visual="claro"] .ec-cta .ec-btn:not(.ec-btn--fantasma){background:#f4f4f5;color:#09090b}
body[data-bf-visual="claro"] .ec-relampago .ec-wrap,
body[data-bf-visual="claro"] .ec-news,body[data-bf-visual="claro"] .ec-cta,
body[data-bf-visual="claro"] .ec-prod__relampago{box-shadow:0 24px 60px -24px rgba(9,9,11,.45)}
/* Na foto branca, o selo de desconto branco sumiria: vira preto */
body[data-bf-visual="claro"] .ec-selo--desconto,body[data-bf-visual="claro"] .ec-selo--relampago{background:#09090b;color:#f4f4f5}
body[data-bf-visual="claro"] .ec-selo--desconto::after,body[data-bf-visual="claro"] .ec-selo--relampago::after{
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%)
}
body[data-bf-visual="claro"] .ec-selo-bf{border-color:rgba(9,9,11,.9)}