/* === ESTILOS DEL FRONTEND (VERSIÓN FINAL Y DEFINITIVA) === */

/* 1. Anulamos el ancho máximo del tema para que nuestro bloque pueda ser ancho. */
/* El padding se controla ahora desde la plantilla. */
.aos-product-gallery-carousel {
    max-width: none;
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
}

/* 2. Usamos nuestras clases aisladas para el grid, evitando conflictos. */
.aos-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.aos-gallery-item {
    margin: 0;
    padding: 0;
}

.aos-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s ease-in-out;
}

.aos-gallery-item img:hover {
    transform: scale(1.05);
}


/* === ESTILOS DEL METABOX EN ADMIN === */

#aos_product_gallery_urls .aos-gallery-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
#aos_product_gallery_urls .aos-gallery-preview-item { position: relative; width: 100px; height: 100px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f0f0f1; }
#aos_product_gallery_urls .aos-gallery-preview-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
#aos_product_gallery_urls .aos-gallery-preview-item .remove-image { position: absolute; top: 5px; right: 5px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; padding: 2px 5px; font-size: 1em; cursor: pointer; line-height: 1; border: 1px solid #ccc; }
#aos_product_gallery_urls .aos-url-list { display: none; }