/* Comunidad · Productos de tienda intercalados en el muro.  v1.3.0
   Archivo APARTE de securpat-comunidad.css a propósito: borrarlo (o borrar el mu-plugin
   flv-comunidad-productos.php) devuelve el muro a como estaba, sin tocar nada más.

   La tarjeta es CUADRADA como las fotos (aspect-ratio:1) y el texto va SOBRE la imagen,
   no debajo. Si fuera debajo, la tarjeta sería más alta que las fotos y rompería la
   alineación de la rejilla, que va de 3 a 6 columnas según el ancho.

   HISTORIA DEL MARCO — tres intentos, cada uno por un motivo distinto
     1.0.0  box-shadow inset sobre el <a>. Las sombras inset se pintan DEBAJO del contenido:
            la <img> las tapaba. Solo asomaba por donde la miniatura era transparente. Los
            renders 3D llevan fondo transparente y por eso se colaba; los patrones 2D son
            opacos y llenan el cuadrado, así que lo tapaban entero. No era cosa del 2D, era
            la transparencia.
     1.2.0  Borde real + mate BLANCO, como las tarjetas de la portada. Correcto pero flojo:
            la mayoría de miniaturas de patrón tienen ya el fondo claro, así que el mate se
            confundía con la propia imagen y todo el trabajo lo hacía un borde de 2px.
     1.3.0  MATE MORADO SÓLIDO. El marco es una banda de color alrededor de la imagen, no un
            hilo. Se ve igual sobre miniatura oscura que sobre blanca, en 2D y en 3D, y a
            cualquier tamaño de celda. Es la opción que pidió Jose después de ver las dos
            anteriores en el móvil.

   NOTA DE CACHÉ: hasta el service worker 6.9.5.0, los .css de /uploads/ salían de la caché
   persistente y NO llegaban a los móviles que ya habían visitado la web. Si un cambio de
   estilo parece no aplicarse, comprobar la versión del service worker antes que el CSS. */

.cm-prod{
  position:relative;aspect-ratio:1;display:block;overflow:hidden;
  background:var(--purp);          /* la banda morada: esto ES el marco */
  padding:5px;
  border-radius:7px;
  box-shadow:0 1px 4px rgba(15,23,42,.22);
  transition:box-shadow .2s, transform .2s;
}
@media(min-width:600px){
  .cm-prod{padding:7px;border-radius:14px;box-shadow:0 2px 8px rgba(15,23,42,.2)}
}
.cm-prod:hover{box-shadow:0 5px 16px rgba(83,74,183,.42);transform:translateY(-2px)}

/* La imagen ocupa exactamente la caja de contenido: la banda morada queda alrededor.
   Sin transform en hover — al escalarla se comería el marco. El realce lo da la tarjeta. */
.cm-prod .cm-pimg{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:3px;background:#fff;
}
@media(min-width:600px){.cm-prod .cm-pimg{border-radius:7px}}

/* Logo de la tienda: círculo arriba a la izquierda, dentro de la imagen.
   El halo blanco NO es decorativo. Las miniaturas son de colores impredecibles y sin él
   un logo claro sobre fondo claro desaparece. El aro exterior garantiza el contraste. */
.cm-plogo{
  position:absolute;top:9px;left:9px;z-index:2;
  width:28px;height:28px;border-radius:50%;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--purp);font-weight:800;font-size:12.5px;line-height:1;
  box-shadow:0 0 0 2.5px rgba(255,255,255,.95), 0 1px 6px rgba(15,23,42,.55);
}
@media(min-width:600px){.cm-plogo{width:36px;height:36px;font-size:15px;top:14px;left:14px}}
.cm-plogo img{width:100%;height:100%;object-fit:cover;display:block}

/* Nombre + tienda sobre degradado, pegados a la imagen (no al borde de la tarjeta).
   Sin precio, por decisión de producto. El degradado es alto y opaco: sobre miniaturas
   claras —que son la mayoría en los patrones 2D— el texto blanco se perdía. */
.cm-pcn{
  position:absolute;left:5px;right:5px;bottom:5px;z-index:2;
  padding:22px 6px 5px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(transparent,rgba(15,23,42,.55) 38%,rgba(15,23,42,.93));
  color:#fff;pointer-events:none;
}
@media(min-width:600px){.cm-pcn{left:7px;right:7px;bottom:7px;padding:26px 9px 7px;border-radius:0 0 7px 7px}}
.cm-pnm{
  display:block;font-size:11px;font-weight:800;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.cm-pst{
  display:block;font-size:9.5px;line-height:1.3;opacity:.92;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
@media(min-width:600px){.cm-pnm{font-size:12.5px}.cm-pst{font-size:11px}}
@media(min-width:900px){.cm-pnm{font-size:13px}.cm-pst{font-size:11.5px}}

/* Fin del muro: se acaban las fotos de la gente y se acaba el muro. */
.cm-fin{text-align:center;padding:34px 20px 10px;color:var(--ink2)}
.cm-fin b{display:block;font-size:17px;color:var(--ink);margin-bottom:4px}
.cm-fin p{font-size:13.5px;color:var(--mut);margin-bottom:16px;max-width:380px;margin-left:auto;margin-right:auto}
.cm-fin .cm-btn{text-decoration:none;display:inline-block}
.cm-finshop{display:block;margin-top:14px;font-size:13px;color:var(--blue);font-weight:600}
.cm-finshop:hover{text-decoration:underline}