/* Detalle de producto — carga en <head> (no depender del <style> en el body) */

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes spin-liquid {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.liquid-btn {
    position: relative;
    overflow: hidden;
    background-color: #266a5d;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.liquid-blob {
    position: absolute;
    left: 50%;
    width: 300%;
    height: 300%;
    background-color: #1a4a41;
    border-radius: 40%;
    top: 120%;
    transition: top 0.6s ease-in-out;
    z-index: -1;
}

.liquid-btn:hover .liquid-blob { top: -60%; }

.thumb-active {
    border-color: #0b3334 !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 2px rgba(11, 51, 52, 0.2);
}

/* Galería: grid fija "foto" / "thumbs" en móvil y "thumbs | foto" en desktop (no usa flex en lg) */
.detalle-galeria {
    display: grid;
    gap: 1rem;
    min-width: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
        "foto"
        "thumbs";
    align-items: start;
}

@media (min-width: 1024px) {
    .detalle-galeria {
        grid-template-columns: 5rem minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "thumbs foto";
    }
}

#detalle-foto-wrap {
    grid-area: foto;
    min-width: 0;
    width: 100%;
}

#thumbnails-container {
    grid-area: thumbs;
}

/* Contenedor 1:1 forzado (algunos temas/externos pisan aspect-ratio) */
.detalle-imagen-principal {
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    background-color: #f9fafb;
    border-radius: 1.5rem;
    cursor: zoom-in;
}

@media (min-width: 1024px) {
    .zoom-container.detalle-imagen-principal,
    .detalle-imagen-principal {
        border-radius: 2rem;
    }
}

#main-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
    margin: 0 !important;
    transition: transform 0.1s ease-out, opacity 0.3s ease;
    transform-origin: center center;
}

/* Fila cantidad + agregar: grid en vez de flex + w-full (evita ancho 0 en el 2.º) */
.detalle-cta-fila {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .detalle-cta-fila {
        grid-template-columns: 10rem minmax(0, 1fr);
        align-items: stretch;
    }
}

#btn-detalle-agregar {
    min-width: 0;
    width: 100%;
}

@media (max-width: 1023px) {
    .detalle-galeria {
        margin-bottom: 2rem;
    }
    .detalle-galeria.lg\:sticky {
        position: relative !important;
        top: 0 !important;
    }
}
