/*
Theme Name: acuarelwoo-the7
Author: Acuarel Lab
Author URI: http://www.acuarel.es/
Description: Child Theme dt-the7
Version: 1.0
License: Uso interno
Template: dt-the7
*/


::placeholder {
    color:   var(--the7-title-color);
    font-family: inherit;
    opacity:1;
}


/* Kit Digital*/

.kit-digital{
    text-align: center;
    background-color: white !important;
    padding: 15px;
}

.kit-digital img{
    /* filter: grayscale(50%) !important; */
    width:90%;
    max-width: 588px;
    height: auto;
}

/* Forzar a que el contenedor de las miniaturas sea una fila flexible */
.woocommerce div.product .images .flex-control-thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Evita que salten a una segunda fila */
    justify-content: space-between !important;
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
}

/* Hacer que cada miniatura se estire equitativamente ocupando el espacio disponible */
.woocommerce div.product .images .flex-control-thumbs li {
    flex: 1 1 0% !important; /* Truco mágico: reparte el espacio en partes exactamente iguales (50%, 33%, 25%...) */
    width: auto !important; /* Anula los anchos fijos que trae WooCommerce por defecto */
    max-width: 100% !important;
    margin: 0 4px !important; /* Espacio de separación entre las miniaturas (ajústalo a tu gusto) */
}

/* Asegurar que las imágenes dentro de la miniatura llenen su celda sin deformarse */
.woocommerce div.product .images .flex-control-thumbs li img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
}

/* Quitar el margen izquierdo de la primera miniatura y el derecho de la última para que alineen perfecto */
.woocommerce div.product .images .flex-control-thumbs li:first-child { margin-left: 0 !important; }
.woocommerce div.product .images .flex-control-thumbs li:last-child { margin-right: 0 !important; }

/* Kit Digital*/

.kit-digital{
    text-align: center;
    background-color: white !important;
    padding: 15px;
}

.kit-digital img{
    filter: grayscale(0%) !important;
    max-width: 75%;
    height: auto;
}