/* ZD Product Hover
   Efecto sobre la imagen del producto en el listado por defecto de PrestaShop.
   Las variables (--zd-*) se inyectan desde displayHeader y son configurables. */

/* Enlace/imagen del producto: se le añade .zd-thumb desde el JS */
.zd-thumb {
    position: relative;
    display: block;
    overflow: hidden;
}

.zd-thumb img {
    transition: filter .35s ease, transform .35s ease;
    display: block;
    width: 100%;
}

/* Overlay con la ficha técnica */
.zd-feature-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: var(--zd-align, flex-start);
    box-sizing: border-box;
    padding: 1.4rem 1.5rem;
    background: var(--zd-bg, rgba(245, 245, 244, .55));
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    text-align: var(--zd-text-align, left);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    overflow: auto;
    pointer-events: none;
}

.zd-feature-overlay .zd-feature-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    width: 100%;
}

.zd-feature-overlay .zd-feature {
    line-height: 1.25;
}

.zd-feature-overlay .zd-feature-name {
    display: block;
    margin-bottom: .15em;
    font-size: var(--zd-name-size, 14px);
    font-weight: 400;
    color: var(--zd-name-color, #555);
}

.zd-feature-overlay .zd-feature-value {
    display: block;
    font-size: var(--zd-value-size, 16px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--zd-value-color, #111);
}

/* Estado hover */
.zd-thumb:hover img,
.zd-thumb:focus-within img {
    filter: blur(var(--zd-blur, 6px));
    transform: scale(var(--zd-scale, 1.05));
}

.zd-thumb:hover .zd-feature-overlay,
.zd-thumb:focus-within .zd-feature-overlay {
    opacity: 1;
    visibility: visible;
}

/* En pantallas táctiles el efecto blur puede molestar: lo suavizamos */
@media (hover: none) {
    .zd-feature-overlay {
        display: none !important;
    }
    .zd-thumb:hover img {
        filter: none;
        transform: none;
    }
}