/* Backend Sidebar – Carrusel de productos (v2.1.4)
   Cambios:
   • Respeta Ancho/Alto de tarjeta (px) vía --pc-card-w y --pc-card-h
   • El gap entre tarjetas es EXACTO y no ensancha tarjetas
   • Título y precio con altura fija y “…” (no estiran la tarjeta)
   • NUEVO 2.1.4: el ancho del slot de la tarjeta también escala con --pc-scale-factor
*/

.bsb-pc{
  /* Defaults */
  --pc-text-scale: 100;
  --pc-card-bg: #fff;
  --pc-radius: 10px;
  --pc-thumb-radius: 10px;
  --pc-thumb-pad: 10px;
  --pc-img-fit: cover;
  --pc-img-pos: center;
  --pc-item-gap: 10px;       /* ← tu “Separación entre tarjetas (px)” */
  --pc-img-h: 240px;
  --pc-card-pb: 7px;

  /* Proporcional (ahora afecta contenido + ancho del slot) */
  --pc-scale-factor: 1;

  /* Opcionales desde ajustes (px). Si no están, se ignoran: */
  /* --pc-card-w: 260px;      Ancho de tarjeta (px)  */
  /* --pc-card-h: 380px;      Alto de tarjeta (px)   */

  position: relative;
  width: 100%;
  margin: 5px 0 5px;
}

/* Viewport/Track */
.bsb-pc.bsb-cc .bsb-cc-viewport{ overflow:hidden; }
.bsb-pc.bsb-cc .bsb-cc-track{
  display:flex;
  width:100%;
  gap: var(--pc-item-gap);
  transition: transform .35s ease;
  will-change: transform;
}

/* Item (slot). Si --pc-card-w está definido en px, manda ese valor.
   Si no, usa la distribución por cantidad (--bsb-per) con el gap exacto.
   ⟶ 2.1.4: multiplicamos TODO por --pc-scale-factor para que reduzca/aumente el ancho real. */
.bsb-pc.bsb-cc .bsb-cc-item{
  flex: 0 0 calc(
    var(--pc-card-w, calc(
      (100% - (max(1, var(--bsb-per)) - 1) * var(--pc-item-gap))
      / max(1, var(--bsb-per))
    )) * var(--pc-scale-factor)
  );
  min-width: 0;              /* evita que el contenido ensanche la tarjeta */
  padding: 0;                /* el espacio entre tarjetas lo da el gap del track */
}

/* ===== Tarjeta ===== */
.bsb-pc-card{
  background: var(--pc-card-bg);
  border-radius: calc(var(--pc-radius) * var(--pc-scale-factor));
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: hidden;
  display:flex;
  flex-direction:column;
  width: 100%;
  height: var(--pc-card-h, auto); /* ← alto fijo si está definido */
  margin: 0;
  min-width: 0;
  box-sizing: border-box;
}

/* ===== Área de imagen ===== */
.bsb-pc-thumb{
  width:100%;
  height: calc(var(--pc-img-h) * var(--pc-scale-factor));
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  padding: calc(var(--pc-thumb-pad) * var(--pc-scale-factor));
  border-radius: calc(var(--pc-thumb-radius) * var(--pc-scale-factor));
  overflow:hidden;
  text-decoration:none;
  flex: 0 0 auto;
}
.bsb-pc-thumb img{
  width:100%; height:100%;
  object-fit: var(--pc-img-fit);
  object-position: var(--pc-img-pos);
  display:block;
  border-radius: calc(var(--pc-thumb-radius) * var(--pc-scale-factor));
  transition: transform .18s ease;
  will-change: transform;
}

/* Hover grow imagen (opcional con clase del contenedor) */
.bsb-pc.bsb-pc--zoom-img .bsb-pc-card:hover .bsb-pc-thumb img{ transform: scale(1.05); }

/* ===== Cuerpo ===== */
.bsb-pc-body{
  padding: calc(12px * var(--pc-scale-factor))
           calc(14px * var(--pc-scale-factor))
           calc(var(--pc-card-pb) * var(--pc-scale-factor));
  min-width: 0;
  display:flex;
  flex-direction:column;
  flex: 1 1 auto; /* rellena el alto si --pc-card-h está definido */
}

/* ===== Título (2 líneas, altura fija, “...”) ===== */
.bsb-pc-name{
  font-weight:300;
  font-size: calc((12px * var(--pc-text-scale) / 100) * var(--pc-scale-factor));
  line-height:1.25;
  margin:0 0 calc(4px * var(--pc-scale-factor)) 0;

  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;

  min-height: calc(1.25em * 2);
  max-height: calc(1.25em * 2);

  text-decoration:none;
  word-break: break-word;
}

/* ===== Precios (3 líneas máx, “…”) ===== */
.bsb-pc-price{
  font-size: calc((12px * var(--pc-text-scale) / 100) * var(--pc-scale-factor));
  font-weight:600;
  line-height:1.25;

  min-height: calc(1.25em * 3);
  max-height: calc(1.25em * 3);
  overflow: hidden;

  will-change: transform;
  transition: transform .18s ease;
}
.bsb-pc-price a{ display:block; text-decoration:none; color:inherit; }

/* EPM: cada línea una sola línea con ellipsis */
.bsb-pc-price .bsb-epm{ display:block; }
.bsb-pc-price .bsb-epm-line{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* HTML de precio normal: 1 línea con ellipsis */
.bsb-pc-price .bsb-price-html{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bsb-pc-price .bsb-price-html *{ white-space:inherit; }

/* Hover grow precio (opcional) */
.bsb-pc.bsb-pc--zoom-price .bsb-pc-card:hover .bsb-pc-price{ transform: scale(1.03); }

/* ===== Paginación (dots) ===== */
.bsb-pc .bsb-cc-dots{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-top: calc(8px * var(--pc-scale-factor));
}
.bsb-pc .bsb-cc-dot{
  width:6px; height:6px;
  border-radius:9999px;
  background:#d1d5db;
  border:0; cursor:pointer;
}
.bsb-pc .bsb-cc-dot.is-active{ background:#111827; }

/* Responsive */
@media (max-width: 768px){
  .bsb-pc{ --pc-img-h: 200px; }
}

/* Notas:
   • Si defines --pc-card-w/--pc-card-h (desde ajustes), el ancho/alto de la tarjeta
     queda EXACTAMENTE en esos px sin estirar por textos.
   • Si no defines esos vars, usa distribución por --bsb-per con el gap exacto.
   • 2.1.4: al reducir con --pc-scale-factor, el “sobrante” queda hacia el exterior
     (no entre tarjetas) porque el gap se mantiene fijo y el slot es más angosto.
   • min-width:0 en el item y la tarjeta asegura que el contenido no empuje el ancho.
*/