/* ========================================
   PRODUCTO SINGLE
======================================== */

.product-single {
    width: 100%;
    background-color: var(--color-background);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding-bottom: 100px;
}

/* Info del producto */
.product-info {
    display: flex;
    flex-direction: row;
    padding: 0;
    gap: 0;
    align-items: flex-start;
    position: relative;
}

/* ========================================
   GALERÍA
======================================== */

.product-galeria {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    align-self: flex-start;
}

/* Wrapper principal (contiene imagen + miniaturas) */
.galeria-main-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* ⭐ NUEVO: Forzar que sticky no se "despegue" */
.product-info {
    display: flex;
    flex-direction: row;
    padding: 0;
    gap: 0;
    align-items: flex-start;
    position: relative;
    min-height: 100vh;
}

/* Wrapper principal (contiene imagen + miniaturas) */
.galeria-main-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Imagen principal */
/* .galeria-main {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--color-background);
    cursor: none;
}

.galeria-main img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    position: relative;
    transform: translateY(0);
} */
/* Imagen principal */
.galeria-main {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--color-background);
    /* background-color: var(--color-light-grey); */
    border-right: 1px solid var(--color-light-grey);
    cursor: none;
    display: flex;
    /* Añadir */
    align-items: center;
    /* Centrar vertical */
    justify-content: center;
    /* Centrar horizontal */
}

.galeria-main img {
    width: auto;
    /* Cambiar de 100% a auto */
    height: auto;
    max-width: 100%;
    /* Añadir: no se salga del contenedor */
    max-height: 100%;
    /* Añadir: no se salga del contenedor */
    object-fit: contain;
    /* Cambiar de cover a contain */
    display: block;
    position: relative;
    transform: translateY(0);
}











/* Miniaturas superpuestas */
.galeria-thumbs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 10px 60px;
    z-index: 10;
    background-color: #f5f3f0d3;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    height: 16vh;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.galeria-thumbs::-webkit-scrollbar {
    display: none;
}

.galeria-thumbs.visible {
    opacity: 1;
    pointer-events: auto;
}

.thumb {
    height: 100%;
    aspect-ratio: 4 / 5;
    width: auto;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    border-radius: 0;
    flex-shrink: 0;
}

/* Overlay blanquecino semitransparente por defecto */
.thumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

/* Quitar overlay al hacer hover */
.thumb:hover::before {
    opacity: 0;
}

/* Quitar overlay cuando está activo */
.thumb.active::before {
    opacity: 0;
}

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

/* Flechas de navegación de thumbs */
.galeria-thumbs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(245, 243, 240, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 11;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.galeria-thumbs.visible .galeria-thumbs-arrow {
    opacity: 0.7;
    pointer-events: auto;
}

.galeria-thumbs-arrow:hover {
    opacity: 1 !important;
}

.galeria-thumbs-arrow svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-dark);
}

.galeria-thumbs-arrow-left {
    left: 10px;
}

.galeria-thumbs-arrow-right {
    right: 10px;
}

.galeria-thumbs-arrow.hidden {
    display: none;
}

/* Cursor personalizado */
.custom-cursor {
    position: fixed;
    width: 30px;
    height: 30px;
    background-color: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translate(-50%, -50%);
}

.custom-cursor svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

.custom-cursor.visible {
    opacity: 1;
}

/* ========================================
   MODAL DE GALERÍA
======================================== */

.gallery-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-background);
    z-index: 1000000000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-modal.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
}

/* Header del modal */
.modal-header {
    display: flex;
    align-items: center;
    padding: 20px 30px;
    gap: 20px;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.modal-close:hover {
    opacity: 0.6;
}

.modal-close svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.modal-product-name {
    font-family: var(--font-texts);
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    color: var(--color-dark);
}

/* Contenido central */
.modal-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    overflow: hidden;
}

.modal-main-image {
    max-height: 70vh;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    position: relative;
}

.modal-main-image img {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cursor personalizado en la imagen del modal */
.modal-cursor {
    position: fixed;
    width: 48px;
    height: 48px;
    background-color: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1000000001;
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translate(-50%, -50%);
}

.modal-cursor svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.modal-cursor.visible {
    opacity: 1;
}

/* Zoom de la imagen */
.modal-main-image.zoomed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    z-index: 10001;
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh;
    box-sizing: border-box;
}

.modal-main-image.zoomed img {
    max-height: 90vh;
    max-width: 90vw;
    height: auto;
    width: auto;
}

/* Ocultar flechas cuando está en zoom */
.gallery-modal.modal-zoomed .modal-arrow {
    opacity: 0;
    pointer-events: none;
}

/* Footer del modal */
.modal-footer {
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    position: relative;
}

.modal-counter {
    position: absolute;
    bottom: 20px;
    right: 40px;
    font-size: 14px;
    color: var(--color-dark);
    opacity: 0.7;
}

.modal-thumbs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.modal-thumbs::-webkit-scrollbar {
    height: 6px;
}

.modal-thumbs::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.modal-thumbs::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.modal-thumbs::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.modal-thumb {
    height: 80px;
    aspect-ratio: 4 / 5;
    width: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    opacity: 0.5;
}

.modal-thumb:hover {
    opacity: 0.8;
}

.modal-thumb.active {
    opacity: 1;
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

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

/* Flechas de navegación */
.modal-arrow {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    z-index: 10;
    opacity: 0.6;
}

.modal-arrow:hover {
    opacity: 1;
}

.modal-arrow svg {
    width: 32px;
    height: 32px;
    stroke: var(--color-dark);
}

.modal-arrow-left {
    left: 40px;
}

.modal-arrow-right {
    right: 40px;
}

.modal-arrow:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}



/* ========================================
   RESPONSIVE PRODUCTO SINGLE
======================================== */
/* ========================================
   RESPONSIVE PRODUCTO SINGLE
======================================== */

@media (max-width: 1024px) {
    .product-single {
        gap: 60px;
    }

    /* Romper el layout horizontal */
    .product-info {
        flex-direction: column;
        min-height: auto;
    }

    /* Galeria ya no es sticky */
    .product-galeria {
        flex: none;
        width: 100%;
        height: auto;
        position: relative;
        top: auto;
        overflow: visible;
        padding-top: 100px;
    }

    /* Wrapper adapta al contenido */
    .galeria-main-wrapper {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    /* Imagen principal */
    .galeria-main {
        width: 100%;
        height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .galeria-main img {
        max-height: 100%;
        max-width: 100%;
    }

    /* Thumbs por debajo de la imagen */
    .galeria-thumbs {
        position: relative;
        bottom: auto;
        height: 120px;
        padding: 15px 20px;
        justify-content: flex-start;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .galeria-thumbs.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Ocultar flechas en tablet/móvil (scroll con dedo) */
    .galeria-thumbs-arrow {
        display: none !important;
    }

    /* Thumbs sin overlay en móvil */
    .thumb::before {
        display: none;
    }

    .thumb {
        height: 100%;
        aspect-ratio: 4/5;
    }
}

@media (max-width: 768px) {
    .product-single {
        gap: 40px;
    }

    .product-galeria {
        padding-top: 80px;
    }

    .galeria-main {
        height: 55vh;
    }

    .galeria-thumbs {
        height: 140px;
        padding: 12px 15px;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .product-galeria {
        padding-top: 70px;
    }

    .galeria-main {
        height: 50vh;
    }

    .galeria-thumbs {
        height: 120px;
        padding: 10px 10px;
        gap: 6px;
    }
}