/* Sir Neko Stock Badges — pills de stock bajo.
   Niveles: l1 ¡ÚLTIMA! (naranja sólido) · l2 ÚLTIMAS X (durazno) · l3 QUEDAN X (neutro).
   Tokens --sn-* del theme GP con fallback para funcionar fuera de él. */

.snsb-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: var(--sn-fw-bold, 700);
  letter-spacing: .02em;
  line-height: 1.2;
  padding: .3em .7em;
  border-radius: var(--sn-radius-pill, 999px);
  box-shadow: var(--sn-shadow-sm, 0 1px 2px rgba(0, 0, 0, .08));
  white-space: nowrap;
  text-transform: uppercase;
}
.snsb-l1 { background: #d9480f; color: var(--sn-white, #fff); }
.snsb-l2 { background: rgba(255, 233, 219, .95); color: #c2410c; }
.snsb-l3 { background: rgba(245, 245, 244, .95); color: #44403c; }

/* ---------- Mini-cart drawer + página de carrito (wrapper del thumbnail) ---------- */

.snsb-thumb { position: relative; display: inline-block; }
.snsb-thumb .snsb-badge {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  max-width: calc(100% - 4px);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .55rem;
  padding: .25em .6em;
}

/* Página de carrito: thumb de 96px (80 mobile) — el badge puede ser un toque más grande. */
.woocommerce-cart .snsb-thumb .snsb-badge { font-size: .62rem; }

/* En el drawer la img del theme es absolute contra el li (cart.css) — el wrapper
   NO debe ser positioning context, y el badge se ancla al área de 80px del li. */
.sn-drawer .snsb-thumb { position: static; }
.sn-drawer .snsb-thumb .snsb-badge {
  left: 40px;
  bottom: auto;
  top: calc(1.1rem + 80px);
  transform: translate(-50%, -100%);
  max-width: 80px;
}

/* ---------- Checkout: mismo overlay de thumbnail que carrito (96px) ---------- */

.woocommerce-checkout .snsb-thumb .snsb-badge { font-size: .62rem; }

/* ---------- Shop loop (pill solapando el borde inferior de la imagen) ----------
   La imagen de la card es cuadrada de ancho fluido → no hay offset fijo para
   anclarla por absolute contra el li; se posiciona en flujo con margen negativo.
   Selector con a.woocommerce-LoopProduct-link para ganarle al `img + *` del theme. */

ul.products li.product a.woocommerce-LoopProduct-link .snsb-loop {
  display: block;
  width: fit-content;
  position: relative;
  z-index: 3;
  margin: -.9rem auto 0;
  max-width: calc(100% - 2 * var(--sn-pad, 16px));
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El `img + *` del theme (margen bajo la imagen) ahora matchea el badge — restaurar
   el ritmo en el elemento siguiente (categoría/título), descontando el resto del pill. */
ul.products li.product a.woocommerce-LoopProduct-link .snsb-loop + * {
  margin-top: calc(var(--sn-space-4, 16px) - .35rem);
}

/* ---------- PDP (stack top-left sobre la galería, debajo del .onsale) ---------- */

.single-product div.product { position: relative; }
.single-product div.product > .snsb-pdp {
  position: absolute;
  top: calc(16px + 2.4em);
  left: 16px;
  z-index: 5;
  font-size: .72rem;
}
.single-product div.product > .snsb-pdp[hidden] { display: none; }