/* ==========================================================================
   BP CARD — única fuente de verdad del chrome de la card de producto.

   Cubre las 5 superficies con UNA sola declaración por propiedad (bridges con
   :is()):

     1. Grid de categoría / tienda / archives  → li.product            (Blocksy)
     2. Product Collection / Products by cat.  → li.wc-block-product   (bloque)
     3. [bp_products] / [slider_*] / [ofertas] → .bp-ofertas-card      (Flexy)
     4. [bp_nuevos_ingresos_teaser] + hub      → .bp-ni-card           (BP_NI_Card)
     5. Recomendados                           → .bp-recs__card

   Contrato de layout (idéntico en todas):
     · la card no tiene padding             → la imagen va borde a borde
     · media 1:1 con object-fit:cover       → recorte uniforme
     · cada slot de texto lleva padding-inline; los wrappers NO
     · el CTA es full-bleed al pie (flush), sin radio

   ---------------------------------------------------------------------------
   FEATURE FLAG — body.bp-v2
   ---------------------------------------------------------------------------
   Toda la hoja cuelga de `body.bp-v2`, que agrega modules/14-bp-card-skin.php
   solo cuando el flag está encendido (constante/​filtro/​preview de admin).

   Mientras las hojas legacy existan, sus !important ganan en las superficies de
   loop, así que encender el flag sin borrarlas deja dos cards distintas en la
   misma página. Por eso:

     · Release A → flag APAGADO  = cero cambio visual, verificable.
     · Release B → se borran las legacy y el flag se enciende por defecto.

   Sin el flag, este archivo no aplica una sola declaración.
   ========================================================================== */

/* ==========================================================================
   0. Tokens
   ========================================================================== */
body.bp-v2 .bp-card{
  --bp-card-bg:      var(--bp-sand, #f6f3ec);
  --bp-card-line:    var(--bp-line, #e4ddce);
  --bp-card-radius:  var(--bp-radius, 14px);
  --bp-card-radius-sm: var(--bp-radius-sm, 8px);
  --bp-card-pad:     var(--bp-pad-title, 12px);
  --bp-card-ink:     var(--bp-ink, #1e2a24);
  --bp-card-forest:  var(--bp-forest, #24463b);
  --bp-card-forest-2: var(--bp-forest-2, #2f5c4d);
  --bp-card-lure:    var(--bp-lure, #e2621b);
  --bp-card-title-size: var(--bp-title-size, 0.85rem);
  --bp-card-price-size: var(--bp-price-size, 1.05rem);
  --bp-card-btn-h:   var(--bp-btn-min-h, 22px);
  --bp-card-shadow:  var(--bp-shadow-hov, 0 12px 28px rgba(30, 42, 36, 0.18));
}

/* ==========================================================================
   1. Raíz
   ========================================================================== */
body.bp-v2 .bp-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: var(--bp-card-bg);
  border: 1px solid var(--bp-card-line);
  border-radius: var(--bp-card-radius);
  color: var(--bp-card-ink);
  text-align: left;
  list-style: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.bp-v2 .bp-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--bp-card-shadow);
  border-color: var(--bp-card-forest-2);
}

/* Wrappers: sin padding ni gap propio — el aire lo ponen los slots. */
body.bp-v2 .bp-card :is(.bp-ofertas-card-link, .bp-ni-card__link, .bp-recs__link){
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
}
body.bp-v2 .bp-card :is(.bp-ni-card__body, .bp-recs__body){
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  box-sizing: border-box;
  min-width: 0;
  gap: 0;
  padding: 0;
}

/* ==========================================================================
   2. Media — borde a borde, 1:1, cover
   ========================================================================== */
body.bp-v2 .bp-card :is(.ct-media-container,
                        .wc-block-components-product-image,
                        .bp-ofertas-card-link > img,
                        .bp-ni-card__media,
                        .bp-recs__media){
  position: relative;
  inset: auto;
  display: block;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: #fff;
}
body.bp-v2 .bp-card :is(.ct-media-container,
                        .wc-block-components-product-image,
                        .bp-ofertas-card-link > img,
                        .bp-ni-card__media,
                        .bp-recs__media) img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}
body.bp-v2 .bp-card:hover :is(.ct-media-container,
                              .wc-block-components-product-image,
                              .bp-ofertas-card-link > img,
                              .bp-ni-card__media,
                              .bp-recs__media) img{
  transform: scale(1.05);
}

/* Escape hatch: packshot sin recorte (se activa por superficie). */
body.bp-v2 .bp-card.bp-card--media-contain :is(.ct-media-container,
                                               .wc-block-components-product-image,
                                               .bp-recs__media) img{
  object-fit: contain;
  padding: 8px;
}

/* ==========================================================================
   3. Badges superpuestos
   ========================================================================== */
body.bp-v2 .bp-card :is(.bp-ofertas-card-discount-badge,
                        .bp-ni-card__badge,
                        .ct-woo-badges > *,
                        .wc-block-components-product-sale-badge){
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-block;
  max-width: calc(100% - 20px);
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--bp-card-forest);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 3px 8px rgba(36, 70, 59, 0.2);
}
/* El badge de descuento en NI convive con el de estado: segundo slot a la derecha. */
body.bp-v2 .bp-card .bp-ni-card__badge--discount{
  left: auto;
  right: 10px;
}

/* ==========================================================================
   4. Título — 3 líneas con ellipsis
   ========================================================================== */
body.bp-v2 .bp-card :is(.woocommerce-loop-product__title,
                        .wp-block-post-title,
                        .bp-ofertas-card-title,
                        .bp-ni-card__name,
                        .bp-recs__title){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: calc(1.2em * 3);
  min-height: 0;
  height: auto;
  margin: 6px 0 0;
  padding: 0 var(--bp-card-pad);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bp-card-ink);
  font-size: var(--bp-card-title-size);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
  word-break: break-word;
}
body.bp-v2 .bp-card :is(.woocommerce-loop-product__title,
                        .wp-block-post-title,
                        .bp-ofertas-card-title,
                        .bp-ni-card__name,
                        .bp-recs__title) a{
  display: inline;
  margin: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
}
body.bp-v2 .bp-card:hover :is(.woocommerce-loop-product__title,
                              .wp-block-post-title,
                              .bp-ofertas-card-title,
                              .bp-ni-card__name,
                              .bp-recs__title){
  color: var(--bp-card-forest);
}

/* ==========================================================================
   5. Marca PWB — oculta (el toggle admin show_brand la reactiva en 09)
   ========================================================================== */
body.bp-v2 .bp-card :is(.pwb-brands-in-loop, .bp-ofertas-card-brand){
  display: none;
}

/* ==========================================================================
   6. Talles / variantes
   ========================================================================== */
body.bp-v2 .bp-card .bpfe-size-chips{
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 4px 0 0;
  padding: 0 var(--bp-card-pad);
  gap: 3px;
  position: relative;
  z-index: 2;
}
body.bp-v2 .bp-card .bpfe-size-chip{
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 32px;
  min-height: 32px;
  padding: .35rem .5rem;
  border: 1px solid var(--bp-card-line);
  border-radius: var(--bp-card-radius-sm);
  background: #fff;
  color: var(--bp-card-ink);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
body.bp-v2 .bp-card .bpfe-size-chip:hover,
body.bp-v2 .bp-card .bpfe-size-chip:focus-visible{
  border-color: var(--bp-card-forest);
  color: var(--bp-card-forest);
  outline: none;
}
body.bp-v2 .bp-card .bpfe-size-chip.is-active{
  border-color: var(--bp-card-forest);
  background: var(--bp-card-forest);
  color: #fff;
}

/* ==========================================================================
   7. Precio
   ========================================================================== */
body.bp-v2 .bp-card :is(.price,
                        .wc-block-components-product-price,
                        .bp-ofertas-card-price,
                        .bp-ni-card__price,
                        .bp-recs__price){
  display: block;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 0 var(--bp-card-pad) 8px;
  color: var(--bp-card-lure);
  font-size: var(--bp-card-price-size);
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}
body.bp-v2 .bp-card :is(.price,
                        .wc-block-components-product-price,
                        .bp-ofertas-card-price,
                        .bp-ni-card__price,
                        .bp-recs__price) del{
  color: #8a8a8a;
  font-weight: 400;
  font-size: .8em;
  opacity: .8;
}
body.bp-v2 .bp-card :is(.price,
                        .wc-block-components-product-price,
                        .bp-ofertas-card-price,
                        .bp-ni-card__price,
                        .bp-recs__price) ins{
  color: var(--bp-card-lure);
  font-weight: 800;
  text-decoration: none;
}
/* Precio "por separado" del bundle (recs) / nota IVA (NI): línea aparte. */
body.bp-v2 .bp-card .bp-recs__compare{
  display: block;
  padding: 0 var(--bp-card-pad);
  font-size: .8rem;
  color: #6b7280;
}
body.bp-v2 .bp-card .bp-ni-card__iva{
  display: block;
  padding: 0 var(--bp-card-pad);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.2;
  color: #666;
}

/* ==========================================================================
   8. Pay hint (GoCuotas / transferencia) — lo inyecta 10-bp-category-cro-loop
   ========================================================================== */
body.bp-v2 .bp-card .bp-cro-pay-hint{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  margin: 2px 0 0;
  padding: 0 var(--bp-card-pad);
  gap: .1rem;
  color: var(--bp-card-forest-2);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}
body.bp-v2 .bp-card .bp-cro-pay-hint__line{
  display: block;
  width: 100%;
}
body.bp-v2 .bp-card .bp-cro-pay-hint__below{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.bp-v2 .bp-card .bp-cro-pay-hint :is(strong, .bp-cro-pay-hint__cuotas){
  display: inline;
  position: static;
  float: none;
  color: var(--bp-card-forest);
  font-size: inherit;
  font-weight: 600;
}
body.bp-v2 .bp-card .bp-cro-pay-hint .woocommerce-Price-amount{
  color: inherit;
  font-size: inherit;
  font-weight: 600;
}

/* ==========================================================================
   9. CTA — full-bleed al pie
   ========================================================================== */
body.bp-v2 .bp-card :is(.ct-woo-card-actions,
                        .bp-ofertas-card-actions,
                        .wc-block-components-product-button,
                        .wp-block-button.wc-block-components-product-button){
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin: auto 0 0;
  padding: 0;
  gap: 0;
  text-align: center;
}
body.bp-v2 .bp-card :is(.ct-woo-card-actions .button,
                        .ct-woo-card-actions a.button,
                        .bp-ofertas-atc,
                        .bp-ofertas-card-actions .button,
                        .wc-block-components-product-button__button,
                        .wp-block-button__link.wc-block-components-product-button__button,
                        .bp-ni-card__add,
                        .bp-recs__cta){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: var(--bp-card-btn-h);
  height: auto;
  margin: 0;
  padding: 4px 10px;
  border: none;
  border-radius: 0;
  background: var(--bp-card-forest);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
}
body.bp-v2 .bp-card :is(.ct-woo-card-actions .button,
                        .bp-ofertas-atc,
                        .wc-block-components-product-button__button,
                        .bp-ni-card__add,
                        .bp-recs__cta) :is(svg, i, img){
  display: none;
}
body.bp-v2 .bp-card :is(.ct-woo-card-actions .button,
                        .bp-ofertas-atc,
                        .wc-block-components-product-button__button,
                        .bp-ni-card__add,
                        .bp-recs__cta)::before,
body.bp-v2 .bp-card :is(.ct-woo-card-actions .button,
                        .bp-ofertas-atc,
                        .wc-block-components-product-button__button,
                        .bp-ni-card__add,
                        .bp-recs__cta)::after{
  display: none;
}
body.bp-v2 .bp-card :is(.ct-woo-card-actions .button,
                        .bp-ofertas-atc,
                        .wc-block-components-product-button__button,
                        .bp-ni-card__add,
                        .bp-recs__cta):hover,
body.bp-v2 .bp-card :is(.ct-woo-card-actions .button,
                        .bp-ofertas-atc,
                        .wc-block-components-product-button__button,
                        .bp-ni-card__add,
                        .bp-recs__cta):focus-visible{
  background: var(--bp-card-lure);
  color: #fff;
}
body.bp-v2 .bp-card :is(.ct-woo-card-actions .button,
                        .bp-ofertas-atc,
                        .wc-block-components-product-button__button,
                        .bp-ni-card__add,
                        .bp-recs__cta):active{
  transform: scale(.98);
}
body.bp-v2 .bp-card :is(.bp-ni-card__add.is-added, .bp-ofertas-atc.is-added){
  background: #16a34a;
}
body.bp-v2 .bp-card :is(.bp-ni-card__add.is-loading, .bp-ofertas-atc.is-loading):disabled{
  opacity: .7;
  cursor: wait;
}

/* ==========================================================================
   10. Escasez (Blocksy) — debajo del CTA, al borde inferior
   ========================================================================== */
body.bp-v2 .bp-card .ct-product-stock-scarcity{
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 0 var(--bp-card-pad) 10px;
  text-align: left;
}
body.bp-v2 .bp-card:has(.ct-product-stock-scarcity) .ct-woo-card-actions{
  padding-bottom: 4px;
}
body.bp-v2 .bp-card .ct-product-stock-scarcity .ct-message p{
  margin: 0 0 4px;
  color: var(--bp-stock-low, #b5860a);
  font-size: .78rem;
  font-weight: 600;
}
body.bp-v2 .bp-card .ct-progress-bar{
  height: 4px;
  background: var(--bp-card-line);
  border-radius: 4px;
  overflow: hidden;
}
body.bp-v2 .bp-card .ct-progress-bar span{
  display: block;
  height: 100%;
  background: var(--bp-card-lure);
}

/* ==========================================================================
   11. Mobile
   ========================================================================== */
@media (max-width: 480px){
  body.bp-v2 .bp-card{
    --bp-card-price-size: .95rem;
  }
  body.bp-v2 .bp-card :is(.ct-woo-card-actions .button,
                          .bp-ofertas-atc,
                          .wc-block-components-product-button__button,
                          .bp-recs__cta){
    padding: 4px 8px;
    font-size: .65rem;
    min-height: var(--bp-card-btn-h);
  }
}