/* Carrusel propio de la galería del PDP: sustituye visualmente al del
   plugin de terceros (que reconstruye su DOM y no encajaba con la foto
   de color). Altura fija siempre, aunque cambien las fotos.

   Los selectores usan !important porque el tema/WooCommerce aplica sus
   propios estilos globales a <button> (incluido un borde/hover rosa que
   no pega con la marca) con más especificidad que las reglas normales. */

.numma-color-overlay-anchor {
    position: relative;
}

/* Oculta el bloque de galería nativo cuando construimos el nuestro. */
.has-color-override > .rtwpvg-images {
    display: none !important;
}

.numma-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.numma-gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
}

.numma-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.numma-gallery-thumbs {
    position: relative;
    display: flex;
    align-items: center;
}

.numma-gallery-thumbs-track-wrap {
    overflow: hidden;
    width: 100%;
}

.numma-gallery-thumbs-track {
    display: flex;
    gap: 10px;
    transition: transform 0.25s ease;
}

.numma-gallery-thumb {
    all: unset;
    box-sizing: border-box !important;
    flex: 0 0 calc((100% - 30px) / 4) !important;
    aspect-ratio: 1 / 1 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    display: block !important;
    outline: none !important;
    box-shadow: none !important;
}

.numma-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.numma-gallery-thumb:hover,
.numma-gallery-thumb:focus {
    border-color: #D8D8D8 !important;
    background: #fff !important;
}

.numma-gallery-thumb.is-active {
    border-color: #98A07F !important;
    background: #fff !important;
}

/* Flechas flotando sobre la tira de miniaturas, no al lado.
   El icono es un SVG embebido como fondo (data URI) en vez de un
   pseudo-elemento dibujado con bordes: se ve nítido de forma fiable en
   cualquier navegador, sin depender de cómo se resuelva el cascade de
   `border` en el ::before. Dos variantes (gris normal / verde hover),
   cambiamos cuál se muestra con background-image en vez de recolorear. */
.numma-gallery-arrow {
    all: unset;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 50% !important;
    left: auto;
    right: auto;
    transform: translateY(-50%) scale(1) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #E2E2E2 !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 18px 18px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: block !important;
    z-index: 5 !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease !important;
}

.numma-gallery-arrow.numma-gallery-prev {
    left: 6px !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.numma-gallery-arrow.numma-gallery-next {
    right: 6px !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.numma-gallery-arrow.numma-gallery-prev:hover,
.numma-gallery-arrow.numma-gallery-prev:focus-visible {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A07F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.numma-gallery-arrow.numma-gallery-next:hover,
.numma-gallery-arrow.numma-gallery-next:focus-visible {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A07F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.numma-gallery-arrow:hover,
.numma-gallery-arrow:focus-visible {
    background-color: #fff !important;
    border-color: #98A07F !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22) !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.numma-gallery-arrow:active {
    transform: translateY(-50%) scale(0.96) !important;
}

.numma-gallery-arrow[hidden] {
    display: none !important;
}

.numma-gallery-thumbs:not(.has-overflow) .numma-gallery-arrow {
    display: none;
}