/*
  Vendor — tokens e utilitários EXCLUSIVOS deste template.

  Tudo aqui é prefixado com `--vd-` / `.vd-` e vive dentro de
  `[data-catalog-theme="vendor"]`. Nenhuma regra deste arquivo alcança o
  Padrão ou o Vitrine, e nenhum deles alcança este: é a condição para os
  templates poderem evoluir sem se derrubarem.

  Estrutura (raio, sombra, altura do header) é fixa e define o ritmo do
  layout. Cor é do lojista e entra por variável no shell.
*/

[data-catalog-theme="vendor"] {
  /* Estrutura: não mexer sem refazer as contas do layout. */
  --vd-radius-2xl: 16px;  /* banner, hero, cartões promocionais */
  --vd-radius-xl: 12px;   /* card de produto, card de configuração, CTA */
  --vd-radius-lg: 8px;    /* caixas internas: tabelas, specs, serviços */
  --vd-radius-md: 6px;    /* thumbs, stepper, selos */
  --vd-header-h: 152px;   /* as três faixas somadas; o sticky da galeria usa */

  --vd-shadow-card: 0 1px 4px rgba(88, 100, 125, 0.08);
  --vd-shadow-card-hover: 0 8px 18px -10px rgba(75, 85, 105, 0.18);

  /* Cor: o shell sobrescreve com o que o lojista escolheu. */
  --vd-bg: #f0f2f4;
  --vd-surface: #ffffff;
  --vd-foreground: #111827;
  --vd-muted-bg: #e8ecf2;
  --vd-muted-fg: #5b6577;
  --vd-border: #e1e7ef;
  --vd-primary: #111827;
  --vd-primary-fg: #ffffff;
  --vd-footer-bg: #262626;
  --vd-footer-fg: #f5f5f5;
  --vd-footer-border: #3f3f46;
}

/* O fundo da página inteira no Vendor. */
[data-catalog-theme="vendor"] .catalog-theme-shell {
  background: transparent;
}

/* Eleva o card e troca a sombra. Só o Vendor usa. */
[data-catalog-theme="vendor"] .vd-lift {
  box-shadow: var(--vd-shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-catalog-theme="vendor"] .vd-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--vd-shadow-card-hover);
}

/* Barra de rolagem escondida nos carrosséis horizontais. */
[data-catalog-theme="vendor"] .vd-sem-barra {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[data-catalog-theme="vendor"] .vd-sem-barra::-webkit-scrollbar {
  display: none;
}

/* O pulso do botão do WhatsApp. */
@keyframes vd-pulso {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
  }
}

[data-catalog-theme="vendor"] .vd-pulso {
  animation: vd-pulso 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-catalog-theme="vendor"] .vd-pulso {
    animation: none;
  }
  [data-catalog-theme="vendor"] .vd-lift:hover {
    transform: none;
  }
}

/* Campo numérico sem as setinhas do navegador, no stepper de quantidade. */
[data-catalog-theme="vendor"] .vd-numero {
  appearance: textfield;
  -moz-appearance: textfield;
}

[data-catalog-theme="vendor"] .vd-numero::-webkit-outer-spin-button,
[data-catalog-theme="vendor"] .vd-numero::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* ---------------------------------------------------------------------------
   Personalização avançada do catálogo dentro do Vendor.

   As fontes e os efeitos de logo do sistema existem no template Padrão/Vitrine
   dentro de um <style jsx>. Aqui eles são reescritos com nomes próprios, para
   o Vendor não depender daqueles nem herdar mudanças deles.
   --------------------------------------------------------------------------- */

[data-catalog-theme="vendor"] .vd-tipografia h1,
[data-catalog-theme="vendor"] .vd-tipografia h2,
[data-catalog-theme="vendor"] .vd-tipografia h3,
[data-catalog-theme="vendor"] .vd-tipografia h4 {
  font-family: var(--vd-fonte-titulo);
}

@keyframes vd-logo-rotate3d {
  0% { transform: perspective(800px) rotateY(0deg) rotateX(0deg); }
  30% { transform: perspective(800px) rotateY(calc(-16deg * var(--vd-logo-forca, 1))) rotateX(calc(3deg * var(--vd-logo-forca, 1))); }
  60% { transform: perspective(800px) rotateY(calc(14deg * var(--vd-logo-forca, 1))) rotateX(calc(-3deg * var(--vd-logo-forca, 1))); }
  100% { transform: perspective(800px) rotateY(0deg) rotateX(0deg); }
}

@keyframes vd-logo-pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  50% {
    transform: scale(calc(1 + 0.045 * var(--vd-logo-forca, 1)));
    filter: drop-shadow(0 0 calc(14px * var(--vd-logo-forca, 1)) rgba(255, 255, 255, 0.42));
  }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
}

@keyframes vd-logo-blink {
  0%, 100% { opacity: 1; filter: brightness(1); }
  45% {
    opacity: calc(1 - (0.25 * var(--vd-logo-forca, 1)));
    filter: brightness(calc(1 + (0.18 * var(--vd-logo-forca, 1))));
  }
  55% { opacity: 1; filter: brightness(calc(1 + (0.05 * var(--vd-logo-forca, 1)))); }
}

[data-catalog-theme="vendor"] .vd-logo-rotate3d {
  animation: vd-logo-rotate3d var(--vd-logo-tempo-rotate, 5.2s) ease-in-out infinite;
  transform-style: preserve-3d;
  transform-origin: center center;
}

[data-catalog-theme="vendor"] .vd-logo-pulse {
  animation: vd-logo-pulse var(--vd-logo-tempo-pulse, 3.2s) ease-in-out infinite;
}

[data-catalog-theme="vendor"] .vd-logo-blink {
  animation: vd-logo-blink var(--vd-logo-tempo-blink, 2.4s) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-catalog-theme="vendor"] .vd-logo-rotate3d,
  [data-catalog-theme="vendor"] .vd-logo-pulse,
  [data-catalog-theme="vendor"] .vd-logo-blink {
    animation: none;
  }
}

/* O texto do aviso correndo no celular: a frase inteira não cabe numa linha
   de 360px, e cortá-la esconderia justamente o número da promoção. */
@keyframes vd-aviso-correr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

[data-catalog-theme="vendor"] .vd-aviso-trilho {
  display: inline-flex;
  width: max-content;
  min-width: 100%;
}

[data-catalog-theme="vendor"] .vd-aviso-correndo {
  animation: vd-aviso-correr 24s linear infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-catalog-theme="vendor"] .vd-aviso-correndo {
    animation: none;
  }
}

/* O filtro de preço da listagem. A trilha precisa aparecer: só a bolinha no
   ar não diz que dá para arrastar. A parte cheia vai até o valor escolhido
   (a página manda a porcentagem em --vd-faixa-cheia). */
[data-catalog-theme="vendor"] .vd-faixa {
  --vd-faixa-cheia: 100%;
  height: 6px;
  border-radius: 999px;
  background: transparent;
  outline: none;
}

[data-catalog-theme="vendor"] .vd-faixa::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--vd-primary) 0 var(--vd-faixa-cheia),
    color-mix(in srgb, var(--vd-foreground) 16%, transparent) var(--vd-faixa-cheia) 100%
  );
}

[data-catalog-theme="vendor"] .vd-faixa::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--vd-primary);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

[data-catalog-theme="vendor"] .vd-faixa::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vd-foreground) 16%, transparent);
}

[data-catalog-theme="vendor"] .vd-faixa::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--vd-primary);
}

[data-catalog-theme="vendor"] .vd-faixa::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--vd-primary);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}