/*
 * AxA Labels - Front styles
 * v1.4.0
 *
 * Sistema de posicionamiento sobre la imagen del producto basado en CSS variables.
 *
 *   .axalabels-wrapper       -> contenedor absolute, hijo del thumbnail container
 *   .axalabels-label         -> cada etiqueta individual, position:absolute
 *   .axalabels-anchor-XXX    -> 9 clases que setean variables --axa-x/--axa-y/--axa-tx/--axa-ty
 *   --axa-ox / --axa-oy      -> offset px (vienen inline desde PHP si el usuario los cargo)
 *
 * Las variables se combinan en un transform:
 *     translate(calc(tx + ox), calc(ty + oy))
 *
 *   left = --axa-x  (porcentaje del wrapper donde "ancla")
 *   top  = --axa-y
 *   tx/ty negativos compensan para que el anchor sea "esquina interior"
 *   ox/oy son offsets px adicionales del usuario.
 */

.axalabels-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; /* No bloquea clicks en la imagen subyacente */
    z-index: 5;
}

/* Cuando se hace hover sobre cualquier label con tooltip dentro del wrapper,
   elevamos TODO el wrapper a un z-index muy alto. Asi el tooltip sale por
   encima incluso si hay otras etiquetas (otros wrappers) en el mismo
   contenedor que normalmente estarian arriba. */
.axalabels-wrapper:has(.axalabels-has-hint:hover),
.axalabels-wrapper-elevated {
    z-index: 9999 !important;
}

.axalabels-label {
    --axa-x: 0%;
    --axa-y: 0%;
    --axa-tx: 0%;
    --axa-ty: 0%;
    --axa-ox: 0px;
    --axa-oy: 0px;

    position: absolute;
    left: var(--axa-x);
    top: var(--axa-y);
    transform: translate(
        calc(var(--axa-tx) + var(--axa-ox)),
        calc(var(--axa-ty) + var(--axa-oy))
    );
    pointer-events: auto;
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

/* 9 anchors de la grilla 3x3 */
.axalabels-anchor-top-left      { --axa-x: 0%;   --axa-y: 0%;   --axa-tx: 0%;    --axa-ty: 0%;    }
.axalabels-anchor-top-center    { --axa-x: 50%;  --axa-y: 0%;   --axa-tx: -50%;  --axa-ty: 0%;    }
.axalabels-anchor-top-right     { --axa-x: 100%; --axa-y: 0%;   --axa-tx: -100%; --axa-ty: 0%;    }
.axalabels-anchor-middle-left   { --axa-x: 0%;   --axa-y: 50%;  --axa-tx: 0%;    --axa-ty: -50%;  }
.axalabels-anchor-middle-center { --axa-x: 50%;  --axa-y: 50%;  --axa-tx: -50%;  --axa-ty: -50%;  }
.axalabels-anchor-middle-right  { --axa-x: 100%; --axa-y: 50%;  --axa-tx: -100%; --axa-ty: -50%;  }
.axalabels-anchor-bottom-left   { --axa-x: 0%;   --axa-y: 100%; --axa-tx: 0%;    --axa-ty: -100%; }
.axalabels-anchor-bottom-center { --axa-x: 50%;  --axa-y: 100%; --axa-tx: -50%;  --axa-ty: -100%; }
.axalabels-anchor-bottom-right  { --axa-x: 100%; --axa-y: 100%; --axa-tx: -100%; --axa-ty: -100%; }

/* Imagen dentro de la etiqueta */
.axalabels-label img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
}

/* Texto sobre la imagen (opcional) */
.axalabels-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.1;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    pointer-events: none;
}

/* Tooltip (hover) — POR DEFAULT va abajo del label.
   Razón: la mayoría de las etiquetas están en top-* (arriba del producto) y
   si el tooltip sale arriba se corta en el borde superior de la pantalla. */
.axalabels-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    font-weight: normal;
}

.axalabels-tooltip p {
    margin: 0 0 6px 0;
}
.axalabels-tooltip p:last-child {
    margin-bottom: 0;
}

.axalabels-has-hint:hover .axalabels-tooltip {
    /* El tooltip original NUNCA se muestra al hover. El JS clona uno al
       <body> con position:fixed para que escape de overflow:hidden de los
       cards y de cualquier transform/filter que rompa el position:fixed.
       Esta regla queda en oculto a propósito. */
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Si por alguna razón el JS no carga (no-script), mostramos el tooltip
   original con position:absolute como fallback. */
.no-js .axalabels-has-hint:hover .axalabels-tooltip,
html:not(.axalabels-portal-active) .axalabels-has-hint:focus-within .axalabels-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ─ TOOLTIP CLONADO AL BODY (.axalabels-tooltip-floater) ─
   Hereda el estilo base de .axalabels-tooltip, pero se posiciona con JS
   directamente sobre el body, así escapa de TODOS los overflow:hidden y
   containing blocks. */
.axalabels-tooltip-floater {
    position: fixed;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
}

/* Cuando la etiqueta está en bottom-* (cerca del borde inferior de la
   imagen), tiene espacio arriba pero no abajo → flip a posición arriba. */
.axalabels-anchor-bottom-left .axalabels-tooltip,
.axalabels-anchor-bottom-center .axalabels-tooltip,
.axalabels-anchor-bottom-right .axalabels-tooltip {
    top: auto;
    bottom: calc(100% + 8px);
}

/* Tooltip en anchors *-left: alinearlo al borde IZQUIERDO del label en
   lugar de centrarlo. Si está centrado, el tooltip (que es más ancho que
   el label) se sale por el costado izquierdo de la imagen. */
.axalabels-anchor-top-left .axalabels-tooltip,
.axalabels-anchor-middle-left .axalabels-tooltip,
.axalabels-anchor-bottom-left .axalabels-tooltip {
    left: 0;
    right: auto;
    transform: none;
}

/* Tooltip en anchors *-right: alinearlo al borde DERECHO del label. */
.axalabels-anchor-top-right .axalabels-tooltip,
.axalabels-anchor-middle-right .axalabels-tooltip,
.axalabels-anchor-bottom-right .axalabels-tooltip {
    left: auto;
    right: 0;
    transform: none;
}

/* ─ Mobile / Desktop ya no necesitan reglas especiales para tooltip:
   El JS clona el tooltip al <body> en bindTooltipPortal() y lo posiciona
   con position:fixed + cálculo desde getBoundingClientRect del label.
   Esto resuelve overflow:hidden de cards, transforms en padres, y el
   z-index conflict entre wrappers vecinos. ─ */

/* Cursor pointer si la etiqueta tiene URL */
a.axalabels-label {
    cursor: pointer;
}
a.axalabels-label,
a.axalabels-label:hover,
a.axalabels-label:focus {
    text-decoration: none;
}

/* (El media query mobile ya está arriba y reescribe el tooltip como fixed centrado.) */