/* modules/productoverlay/views/css/overlay.css */

/* Contenedor del bloque en la zona de precio */
.productoverlay-priceblock{
  margin-top:10px;
  display:flex;
  justify-content:flex-start;   /* alineado a la izquierda */
  text-align:left;
}

/* Figura que contiene la imagen + textos */
.productoverlay-figure{
  margin:0;
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;       /* todo pegado a la izquierda */
}

/* Imagen principal del overlay */
.po-img{
  display:block;
  width:auto;                   /* evita estirar al 100% */
  max-width:220px;              /* 👉 imagen más pequeña (límite) */
  height:auto;
  border-radius:4px;
}

/* Badge del porcentaje (-XX%) */
.po-badge-percent{
  position:absolute;
  padding:5px 4px;
  font-size:17px;
  font-weight:700;
  line-height:1;
  color:#fff;
}

/* Línea inferior con descripción + fecha (misma línea) */
.po-info-line {
    margin-top: 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: #444;
    flex-wrap: nowrap;
    flex-direction: column;
}

/* Descripción (procedente del WYSIWYG) */
.productoverlay-caption{
  display:inline-flex;
  align-items:baseline;
  line-height:1.2;
  font-weight:500;
}

/* Normaliza lo que inserta el editor (p, h1–h6, div) para que no rompa la línea */
.productoverlay-caption.rte p{
  display:inline;
  margin:0;
  padding:0;
}
.productoverlay-caption.rte :is(h1,h2,h3,h4,h5,h6,div){
  display:inline;
  margin:0;
  padding:0;
  font-size:inherit;
  font-weight:inherit;
}
/* Evita huecos si el editor mete párrafos vacíos o solo con <br> */
.productoverlay-caption.rte p:empty,
.productoverlay-caption.rte p:has(br:only-child){
  display:none;
}

/* Texto de fin de oferta */
.po-end-date{
  display:inline-flex;
  align-items:baseline;
  line-height:1.2;
  color:#666;
  font-style:italic;
}

/* Responsivo: en móvil la imagen puede usar el ancho de pantalla y los textos pueden saltar línea */
@media (max-width:480px){
  .po-img{
    max-width:90vw;             /* respira en pantallas pequeñas */
  }
  .po-info-line{
    font-size:11px;
    gap:6px;
    flex-wrap:wrap;             /* permite partir si no cabe */
  }
}