/* ==========================================================================
   GALERÍA DE PRODUCTO Y CABECERA MÓVIL
   ========================================================================== */

/* --- Cabecera Móvil (Oculta en Desktop) --- */
.mobile-product-header-area {
    display: none; 
    margin-bottom: 20px;
}

.product-title-mobile {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin: 10px 0 15px 0;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

.product-tags-mobile {
    position: relative;
    top: 0; left: 0;
    margin-bottom: 20px;
}

/* --- Contenedor de la Galería --- */
/* --- Contenedor de la Galería --- */
.custom-product-gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 602px; 
    
    /* ¡LA CLAVE!: Esto centra la galería dentro de su columna izquierda */
    margin: 0 auto; 
}

/* --- Imagen Principal (Responsive) --- */
.main-image-wrapper {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 0; /* Sin padding para que cubra todo */
    width: 100%; 
    aspect-ratio: 1 / 1; /* Garantiza un cuadrado perfecto basado en el ancho (max 602x602) */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.main-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Producto completo sin recortes */
    transition: opacity 0.3s ease;
}

/* --- Fila de Miniaturas (Responsive) --- */
.thumbnails-wrapper {
    display: flex;
    gap: 15px; /* Espacio entre miniaturas */
    width: 100%;
}

.thumbnail-item {
    background-color: #ffffff;
    border-radius: 20px; /* Como pediste */
    padding: 0;
    /* Calculamos % para que quepan 4 justas con su espacio, máximo 120px */
    width: calc(25% - 11.25px); 
    max-width: 120px; 
    aspect-ratio: 1 / 1; /* Cuadrado perfecto flexible */
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0.6;
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-item:hover { opacity: 0.8; }
.thumbnail-item.active-thumb { border-color: #00b912; opacity: 1; }

/* ==========================================================================
   Responsive (Móvil)
   ========================================================================== */
@media screen and (max-width: 991px) {
    /* Mostramos la cabecera móvil y ocultamos el título en la derecha */
    .mobile-product-header-area { display: block; }
    
    /* Centramos la galería y reducimos tamaños máximos (353px y 70px) */
    .custom-product-gallery {
        margin: 0 auto;
        max-width: 353px; /* Limite de tu Figma móvil */
    }

    .thumbnail-item {
        max-width: 70px;
        border-radius: 15px; /* Curva más suave en móvil */
    }
}