:root{
  --wcfaux-brand:#a40a0a;
  --price-bg: #fff;
  --price-ink:#111;
  --muted:#777;
}

/* Base del precio */
.wcfaux-price{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--price-bg);
  border-radius:8px;
  padding:.2rem .45rem;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.wcfaux-price ins.wcfaux-now{
  color:var(--price-ink);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.1px;
}
.wcfaux-price del.wcfaux-before{
  color:var(--muted);
  opacity:.95;
  text-decoration:line-through;
}

/* Badge con microgradiente */
.wcfaux-badge{
  display:inline-block;
  margin-left:.5rem;
  padding:.32rem .68rem;
  border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--wcfaux-brand) 18%, #fff), color-mix(in srgb, var(--wcfaux-brand) 10%, #fff));
  color:var(--wcfaux-brand);
  font-weight:800;
  font-size:.82rem;
  line-height:1;
  vertical-align:middle;
  border:1px solid color-mix(in srgb, var(--wcfaux-brand) 32%, #fff);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:transform .25s ease, filter .25s ease;
}
.wcfaux-badge:hover{ transform:translateY(-1px); filter:saturate(1.05); }

/* Pulse: se activa solo en single via inline CSS */
@keyframes wcfauxPulse{
  0%{transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--wcfaux-brand) 18%, transparent);}
  60%{transform:scale(1.04); box-shadow:0 0 0 10px rgba(0,0,0,0);}
  100%{transform:scale(1); box-shadow:0 0 0 0 rgba(0,0,0,0);}
}

/* —— Catálogo (loop): 15px exactos —— */
ul.products li.product .price .wcfaux-price{
  gap:.35rem;
  font-size:15px;
  padding:.15rem .35rem;
}
ul.products li.product .price .wcfaux-now .amount{ font-weight:900; }
ul.products li.product .price del{ margin-left:.15rem; }

/* —— Single product: 19px exactos y animación entrada —— */
.single-product .summary .price .wcfaux-price{
  gap:.6rem;
  font-size:19px;
  line-height:1.15;
}
.single-product .summary .wcfaux-now .amount{ font-weight:900; }
.single-product .summary .wcfaux-badge{ margin-left:.6rem; }

/* Fade/slide in del precio al cargar */
.wcfaux-appear{ animation:wcfauxFadeUp .45s ease-out both; }
@keyframes wcfauxFadeUp{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
