/* ============================================================================
   CRO — escassez e popup de compra. Paleta vermelha da lander.
   ========================================================================== */
:root{
  --cro-red:#d0121b;
  --cro-red-soft:#f8e6e5;
  --cro-ink:#1f1f1f;
  --cro-ink-2:#4a4a4a;
  --cro-ink-3:#7a7a7a;
  --cro-line:#e3e3e3;
  --cro-good:#135d4b;
}

/* mount desligado ou vazio não ocupa espaço */
[data-cro]:empty{display:none !important}

/* ------------------------------------------------------------- escassez -- */
.cro-stock{margin:14px 0 2px; font-family:Montserrat, sans-serif; text-align:left}
.cro-stock__row{display:flex; align-items:center; gap:8px; margin-bottom:7px}
.cro-stock__dot{
  width:8px; height:8px; border-radius:50%; background:#e8a13a; flex:0 0 8px;
  box-shadow:0 0 0 0 rgba(232,161,58,.5); animation:cro-pulse 2.4s infinite;
}
@keyframes cro-pulse{
  70%{box-shadow:0 0 0 7px rgba(232,161,58,0)}
  100%{box-shadow:0 0 0 0 rgba(232,161,58,0)}
}
.cro-stock__label{font-size:13px; line-height:1.3; color:var(--cro-ink-2); letter-spacing:-.2px}
.cro-stock__label strong{color:var(--cro-ink); font-weight:700}
.cro-stock__track{height:4px; border-radius:4px; background:#eeeeee; overflow:hidden}
.cro-stock__fill{
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg, #e8a13a, #f2c46d);
  transition:width .6s ease;
}
.cro-stock.is-low .cro-stock__dot{background:var(--cro-red); animation-name:cro-pulse-red}
@keyframes cro-pulse-red{
  70%{box-shadow:0 0 0 7px rgba(208,18,27,0)}
  100%{box-shadow:0 0 0 0 rgba(208,18,27,0)}
}
.cro-stock.is-low .cro-stock__label strong{color:var(--cro-red)}
.cro-stock.is-low .cro-stock__fill{background:linear-gradient(90deg, var(--cro-red), #ef6b71)}

/* --------------------------------------------------------- popup compra -- */
.cro-pop{
  --cro-sticky:0px;
  position:fixed; left:16px; z-index:40;
  bottom:calc(16px + var(--cro-sticky) + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px;
  width:min(310px, calc(100vw - 24px));
  padding:8px 30px 8px 8px; border-radius:10px;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--cro-line); box-shadow:0 6px 22px rgba(0,0,0,.12);
  font-family:Montserrat, sans-serif; text-align:left;
  transform:translateY(14px); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), opacity .3s, visibility 0s .35s;
}
.cro-pop.is-on{
  transform:none; opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), opacity .3s, visibility 0s;
}
.cro-pop__img{
  width:44px; height:44px; object-fit:contain; flex:0 0 44px;
  border-radius:8px; background:var(--cro-red-soft);
}
.cro-pop__txt{min-width:0; flex:1}
.cro-pop__line{margin:0; font-size:12px; line-height:1.35; color:var(--cro-ink-2)}
.cro-pop__line strong{color:var(--cro-ink); font-weight:600}
.cro-pop__line .cro-pop__deal{color:var(--cro-red)}
.cro-pop__meta{margin:3px 0 0; font-size:10.5px; color:var(--cro-ink-3)}
.cro-pop__ok{color:var(--cro-good); font-weight:600}
.cro-pop__x{
  position:absolute; top:4px; right:4px; width:24px; height:24px; padding:0;
  border:0; background:none; color:var(--cro-ink-3); font-size:17px; line-height:1;
  border-radius:50%; cursor:pointer;
}
.cro-pop__x:hover{background:#f1f1f1; color:var(--cro-ink)}

/* celular: popup centralizado e mais compacto, colado na base (ou na barra fixa) */
@media (max-width:600px){
  .cro-pop{
    left:12px; right:12px; margin:0 auto; width:auto; max-width:340px;
    bottom:calc(10px + var(--cro-sticky) + env(safe-area-inset-bottom));
    padding:7px 30px 7px 7px; gap:9px;
  }
  .cro-pop__img{width:38px; height:38px; flex-basis:38px}
  .cro-pop__line{font-size:11.5px}
}

@media (prefers-reduced-motion:reduce){
  .cro-stock__dot{animation:none}
  .cro-stock__fill, .cro-pop, .cro-pop.is-on{transition:none}
}