/* Zaca_Label: etiquetas de producto pintadas en el HTML del servidor.
   Tarjetas: la etiqueta va DENTRO del contenedor de la foto (.zaca-label-host), anclada a su esquina.
   Ficha: una capa cuadrada del ancho de la galería (.zaca-labels-stage) hace de contenedor. */

.zaca-label-host {
    position: relative;
}

.zaca-labels {
    position: absolute;
    z-index: 2; /* por encima de .product-image-wrapper (z-index 1), por debajo de menús y modales */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    line-height: 0;
}

.zaca-labels--top-left      { top: 0;    left: 0;  align-items: flex-start; }
.zaca-labels--top-center    { top: 0;    left: 0;  right: 0; align-items: center; }
.zaca-labels--top-right     { top: 0;    right: 0; align-items: flex-end; }
.zaca-labels--middle-left   { top: 50%;  left: 0;  transform: translateY(-50%); align-items: flex-start; }
.zaca-labels--middle-center { top: 50%;  left: 0;  right: 0; transform: translateY(-50%); align-items: center; }
.zaca-labels--middle-right  { top: 50%;  right: 0; transform: translateY(-50%); align-items: flex-end; }
.zaca-labels--bottom-left   { bottom: 0; left: 0;  align-items: flex-start; }
.zaca-labels--bottom-center { bottom: 0; left: 0;  right: 0; align-items: center; }
.zaca-labels--bottom-right  { bottom: 0; right: 0; align-items: flex-end; }

.zaca-label {
    display: block;
    line-height: 0;
}

/* Tamaño natural de los PNG (120 px de ancho), nunca más ancho que la foto. */
.zaca-label__img {
    display: block;
    width: 120px;
    max-width: 100%;
    height: auto;
}

/* Ficha de producto: capa sobre la galería (fotorama, 700x700 => cuadrada). */
.product.media {
    position: relative;
}

.zaca-labels-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 2;
}

/* A pantalla completa la galería es una capa fija por encima: la etiqueta no pinta nada ahí. */
.fotorama--fullscreen ~ .zaca-labels-stage {
    display: none;
}
