/* ===========================================================================
   CASA DOS PARAFUSOS — AVISE QUANDO DISPONIVEL   (onda 11)

   Arquivo NOVO. Todo seletor comeca em .cdp-avise, e as cores saem das
   variaveis que o style.css publicado ja declara (--cdp-laranja #FF7A16,
   --cdp-marinho #1A1952, --cdp-cinza-2, --cdp-texto-fraco, --cdp-mola). O
   valor depois da virgula e a reserva, para o dia em que uma variavel mudar
   de nome: a peca fica feia, nao some.

   O botao e DISCRETO de proposito. Ele fica ao lado do selo de estoque, nao
   compete com o preco, e nao tem cor de alarme: nos 1802 produtos de hoje ele
   diz "Confirmar disponibilidade", que e um convite, nao um aviso ruim.
   Quando o produto estiver mesmo em falta, ele ganha a borda laranja.
   =========================================================================== */

.cdp-avise-btn {
  display: inline-block;
  /* MEDIDO, e por isso estas tres linhas existem: com `nowrap` o botao ficou
     com 218,5px dentro de um cartao de 188px -- ele nao cortava o texto, ele
     TRANSBORDAVA por cima do produto vizinho, e na tela parecia texto cortado.
     Deixar quebrar em duas linhas e prende-lo a largura do cartao resolve nas
     tres larguras que eu conferi (telefone, tablet e computador). */
  white-space: normal;
  max-width: 100%;
  margin: 6px 0 0;
  padding: 6px 11px;
  border: 1px solid var(--cdp-cinza-2, #E4E6F0);
  border-radius: 999px;
  background: var(--cdp-branco, #fff);
  color: var(--cdp-texto-fraco, #667085);
  font: 600 12px/1.25 inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 2;                 /* o cartao inteiro e um <a>: o botao fica por cima */
  transition: border-color .18s var(--cdp-mola, ease), color .18s ease;
}
.cdp-avise-btn:hover { border-color: var(--cdp-laranja, #FF7A16); color: var(--cdp-texto, #1D1F33); }
.cdp-avise-btn:focus-visible { outline: 2px solid var(--cdp-laranja, #FF7A16); outline-offset: 2px; }

/* em falta de verdade: ai sim ele chama atencao */
.cdp-avise-btn--falta {
  border-color: var(--cdp-laranja, #FF7A16);
  color: var(--cdp-laranja, #FF7A16);
  background: var(--cdp-laranja-fundo, #FFF3E9);
}

/* --------------------------------------------------------------------------
   A folhinha que abre embaixo do botao.
   -------------------------------------------------------------------------- */
.cdp-avise-folha {
  position: relative;
  z-index: 5;
  margin: 8px 0 2px;
  padding: 11px 12px;
  border: 1px solid var(--cdp-cinza-2, #E4E6F0);
  border-radius: 12px;
  background: var(--cdp-branco, #fff);
  box-shadow: var(--cdp-sombra, 0 4px 16px rgba(11, 13, 20, .10));
  text-align: left;
  cursor: default;
}
.cdp-avise-tit {
  font: 700 13px/1.35 inherit;
  color: var(--cdp-texto, #1D1F33);
  margin-bottom: 9px;
}
.cdp-avise-linha { display: flex; flex-wrap: wrap; gap: 7px; }
.cdp-avise-b {
  flex: 1 1 auto;
  min-width: 96px;
  padding: 9px 12px;
  border: 1px solid var(--cdp-cinza-2, #E4E6F0);
  border-radius: 10px;
  background: var(--cdp-branco, #fff);
  color: var(--cdp-texto, #1D1F33);
  font: 600 13px/1 inherit;
  cursor: pointer;
}
.cdp-avise-b:hover { border-color: var(--cdp-laranja, #FF7A16); }
.cdp-avise-b--zap { background: #25D366; border-color: #25D366; color: #fff; }
.cdp-avise-pe {
  margin-top: 9px;
  font: 400 11px/1.4 inherit;
  color: var(--cdp-texto-fraco, #667085);
}

/* na ficha do produto ha mais espaco: o botao pode ser maior */
.summary.entry-summary .cdp-avise-btn { font-size: 14px; padding: 10px 16px; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) { .cdp-avise-btn { transition: none; } }
@media print { .cdp-avise-btn, .cdp-avise-folha { display: none !important; } }