/* @font-face do icomoon removido: os arquivos de fonte (ttf/woff/eot/svg)
   nunca existiram nos assets do template, então isso só gerava 404 em toda
   página sem nunca renderizar nada — as classes icon-* que a loja de fato
   usa (redes sociais, menu mobile, benefícios) foram trocadas pelos ícones
   Phosphor equivalentes, que já funcionam no resto do site. */

/* Loading de imagens: enquanto uma <img> não termina de carregar (produto
   vindo da API, banner do CMS, etc.) mostra um shimmer no lugar do espaço
   em branco/quebrado. Some sozinho quando a imagem carrega (ver api.js). */
img:not(.digital-img-loaded):not(.digital-img-error) {
  background: linear-gradient(100deg, #eee 30%, #f6f6f6 50%, #eee 70%);
  background-size: 400% 100%;
  animation: digital-img-shimmer 1.4s ease-in-out infinite;
}
img.digital-img-error {
  background: #f4f2ef;
}
@keyframes digital-img-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Loader de página inteira: enquanto os dados reais da API não chegam, a
   página por baixo já está no DOM com o conteúdo de demonstração do
   template (preço/nome fixos) — sem isso, aparece uma fração de segundo
   antes do JS trocar pelo conteúdo real. Cobre a tela até as buscas
   iniciais terminarem (ver digitalLoaderIniciarFetch/TerminarFetch em
   api.js). */
#digital-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf7f2;
  transition: opacity 0.25s ease;
}
#digital-page-loader.digital-loader-escondido {
  opacity: 0;
  pointer-events: none;
}
.digital-loader-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid #e2ddd5;
  border-top-color: #1f1f1f;
  border-radius: 50%;
  animation: digital-loader-spin 0.8s linear infinite;
}
@keyframes digital-loader-spin {
  to { transform: rotate(360deg); }
}

/* dist/output-tailwind.css (carregado depois deste arquivo) reseta
   background de [type='submit'] pra transparent com a MESMA especificidade
   de .button-main — no empate, quem carrega por último vence, deixando
   qualquer <button type="submit" class="button-main"> com texto branco em
   fundo transparente (invisível no fundo branco da página, só aparecia no
   hover, que não tem regra conflitante). "button.button-main" tem
   especificidade maior que "[type='submit']" sozinho, então ganha sempre,
   independente da ordem dos arquivos CSS. */
button.button-main {
  background-color: var(--black);
  color: var(--white);
}
button.button-main:hover {
  background-color: var(--green);
  color: var(--black);
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-call-support:before {
  content: "\e900";
}
.icon-category:before {
  content: "\e901";
}
.icon-check-circle:before {
  content: "\e902";
}
.icon-comb:before {
  content: "\e903";
}
.icon-cotton:before {
  content: "\e904";
}
.icon-credit-card:before {
  content: "\e905";
}
.icon-delivery-truck:before {
  content: "\e906";
}
.icon-double-leaves:before {
  content: "\e907";
}
.icon-earth:before {
  content: "\e908";
}
.icon-facebook:before {
  content: "\e909";
}
.icon-filter:before {
  content: "\e90a";
}
.icon-food:before {
  content: "\e90b";
}
.icon-foot:before {
  content: "\e90c";
}
.icon-guarantee:before {
  content: "\e90d";
}
.icon-heart:before {
  content: "\e90e";
}
.icon-instagram:before {
  content: "\e90f";
}
.icon-leaves:before {
  content: "\e910";
}
.icon-leaves-100:before {
  content: "\e911";
}
.icon-leaves-compatible:before {
  content: "\e912";
}
.icon-phone-call:before {
  content: "\e913";
}
.icon-pinterest:before {
  content: "\e914";
}
.icon-rabbit-heart:before {
  content: "\e915";
}
.icon-return:before {
  content: "\e916";
}
.icon-search:before {
  content: "\e917";
}
.icon-twitter:before {
  content: "\e918";
}
.icon-update:before {
  content: "\e919";
}
.icon-user:before {
  content: "\e91a";
}
.icon-user-shield:before {
  content: "\e91b";
}
.icon-youtube:before {
  content: "\e91c";
}
.icon-bag:before {
  content: "\e91d";
}