/* ============================================================
   CF Widget — Product Gallery
   ============================================================ */

/* Reforzar el contenedor de Elementor para que NO colapse en móvil */
.elementor-widget-cf_product_gallery,
.elementor-widget-cf_product_gallery > .elementor-widget-container {
    width: 100%;
    min-width: 100%;
    display: block;
}

.cw-gallery {
    display: block;
    position: relative;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

/* Si por error hay dos instancias del widget en el DOM, ocultar la segunda */
.elementor-widget-cf_product_gallery + .elementor-widget-cf_product_gallery,
.cw-gallery ~ .cw-gallery {
    display: none !important;
}

/* ── Main wrap — crea el espacio 1:1 en flujo normal ─────── */
/* DOBLE garantía: padding-top + aspect-ratio + min-height con vw como último respaldo */

.cw-gallery .cw-gallery__main-wrap {
    position: relative;
    width: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    min-height: 1px;
}

/* Respaldo para navegadores sin aspect-ratio: padding-top truco clásico */
@supports not (aspect-ratio: 1 / 1) {
    .cw-gallery .cw-gallery__main-wrap {
        height: 0;
        padding-top: 100%;
    }
}

/* ── Main — se posiciona dentro del espacio creado por el wrap */

.cw-gallery .cw-gallery__main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #F5F0EA;
    border-radius: 16px;
    overflow: hidden;
}

/* ── Imagen del producto ─────────────────────────────────── */

/* Reglas base del <img> principal — todas las propiedades excepto object-fit
   (que se decide por modo, abajo). */
.cw-gallery .cw-gallery__main-img,
.cw-gallery__main-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: center !important;
    padding: 0;
    cursor: zoom-in;
    display: block;
    border-radius: inherit;
    transition: opacity 150ms ease, transform 300ms ease;
}

/* Modo "imagen completa" (default — control `main_fit = contain`).
   La imagen entera cabe dentro del cuadro 1:1; en retratos deja franjas
   laterales con el background del .cw-gallery__main; en horizontales,
   franjas arriba/abajo. Es el modo seguro: nunca recorta producto. */
.cw-gallery.cw-gallery--fit-contain .cw-gallery__main-img,
.cw-gallery--fit-contain .cw-gallery__main-img {
    object-fit: contain !important;
}

/* Modo "llenar todo" (control `main_fit = cover`).
   La imagen escala para llenar el cuadro 1:1 sin franjas — si la foto
   no es cuadrada, los lados que sobran se recortan. Útil cuando todas
   las fotos del catálogo son cuadradas o cuando el cliente prefiere
   un look más impactante aunque pierda detalle de bordes. */
.cw-gallery.cw-gallery--fit-cover .cw-gallery__main-img,
.cw-gallery--fit-cover .cw-gallery__main-img {
    object-fit: cover !important;
}

/* Fallback: si el root no tiene clase de modo (instalación previa o
   cache muy viejo donde el PHP nuevo aún no llegó), usar contain. */
.cw-gallery:not(.cw-gallery--fit-contain):not(.cw-gallery--fit-cover) .cw-gallery__main-img {
    object-fit: contain !important;
}

/* `@media (hover: hover)` evita que el :hover quede "pegado" en móvil
   después de un tap. Sin este wrap, en pantallas táctiles el browser
   mantenía el zoom escalado tras tocar la imagen, dando la sensación de
   que el tamaño de la galería cambiaba al cambiar variación. */
@media (hover: hover) {
    .cw-gallery__main-img--zoomable:hover {
        transform: scale(var(--cw-zoom, 1.04));
    }
}

/* ── Placeholder (sin imagen) ────────────────────────────── */
/* El placeholder y la <img> coexisten siempre en el DOM para que el JS pueda
   alternarlos al cambiar de variación. Por defecto la <img> manda y el
   placeholder se oculta — sólo aparece cuando el root tiene el estado
   `cw-gallery--no-images` (producto sin imágenes) o `cw-gallery--variation-no-image`
   (variación seleccionada que no tiene imagen propia). */

.cw-gallery__placeholder {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
}

.cw-gallery.cw-gallery--no-images .cw-gallery__placeholder,
.cw-gallery.cw-gallery--variation-no-image .cw-gallery__placeholder {
    display: flex;
}

.cw-gallery.cw-gallery--no-images .cw-gallery__main-img,
.cw-gallery.cw-gallery--variation-no-image .cw-gallery__main-img {
    display: none;
}

/* El strip de thumbnails se renderiza siempre en el DOM aunque esté vacío
   (para que el JS pueda repoblarlo cuando una variación con galería propia
   se selecciona). Cuando está vacío lo ocultamos colapsado por defecto. */
.cw-gallery .cw-gallery__thumbs.cw-gallery__thumbs--empty {
    display: none;
}

/* Si el producto base tenía thumbs (≥ 2 imágenes), preservamos el espacio
   del strip cuando se entra a un modo variación que no tiene thumbs visibles
   — sea porque la variación está sin imagen (`--variation-no-image`) o porque
   tiene una sola imagen. Sin esto, el widget perdería altura al cambiar de
   variación y se vería un "salto" en el layout. Cuando el producto base no
   tenía thumbs, la regla `--empty { display:none }` de arriba sigue valiendo
   y el strip simplemente no aparece — comportamiento correcto. */
.cw-gallery.cw-gallery--has-base-thumbs.cw-gallery--variation-mode .cw-gallery__thumbs.cw-gallery__thumbs--empty {
    display: flex;
    visibility: hidden;
    pointer-events: none;
}

/* Variación con UNA sola imagen y producto base con thumbs: ocultamos los
   thumbs (que serían un thumb único redundante con la main) pero
   reservamos el espacio. Sin `has-base-thumbs` el strip simplemente queda
   `--empty` y `display:none`, también OK porque el producto base tampoco
   tenía altura del strip. */
.cw-gallery.cw-gallery--has-base-thumbs.cw-gallery--variation-single .cw-gallery__thumbs:not(.cw-gallery__thumbs--empty) {
    visibility: hidden;
    pointer-events: none;
}

.cw-gallery__ph-sku[hidden] {
    display: none !important;
}

.cw-gallery__ph-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C9A96E;
}

.cw-gallery__ph-cat {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #C9A96E;
    margin-top: 12px;
    text-transform: uppercase;
}

.cw-gallery__ph-sku {
    font-size: 12px;
    color: #999999;
    margin-top: 6px;
}

/* ── Wishlist button ─────────────────────────────────────── */

.cw-gallery__wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: color 200ms ease;
    color: #999999;
    padding: 0;
    z-index: 1;
}

@media (hover: hover) {
    .cw-gallery__wishlist:hover {
        color: #E53535;
    }
}
.cw-gallery__wishlist.is-active {
    color: #E53535;
}

.cw-gallery__wishlist.is-active svg {
    fill: #E53535;
    stroke: #E53535;
}

/* ── Discount badge ──────────────────────────────────────── */

.cw-gallery__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #1a1a1a;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 1;
}

/* ── Thumbnails ──────────────────────────────────────────── */

.cw-gallery__thumbs {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
}

.cw-gallery__thumbs::-webkit-scrollbar {
    display: none;
}

.cw-gallery__thumbs.is-scrollable {
    cursor: grab;
}

.cw-gallery__thumbs.is-scrollable .cw-gallery__thumb {
    cursor: grab;
}

.cw-gallery__thumbs.is-dragging,
.cw-gallery__thumbs.is-dragging .cw-gallery__thumb {
    cursor: grabbing;
    user-select: none;
}

.cw-gallery__thumb {
    flex: 0 0 var(--cw-thumb-width, 25%);
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: #F5F0EA;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 200ms ease;
    overflow: hidden;
    box-sizing: border-box;
}

.cw-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    display: block;
    border-radius: inherit;
    pointer-events: none;
    -webkit-user-drag: none;
}

.cw-gallery__thumb--active {
    border-color: #C9A96E;
}

@media (hover: hover) {
    .cw-gallery__thumb:not(.cw-gallery__thumb--active):hover {
        border-color: #E8E0D5;
    }
}

.cw-gallery__thumb--empty {
    pointer-events: none;
    cursor: default;
}

/* ── Lightbox ────────────────────────────────────────────── */

.cw-gallery__lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
}

.cw-gallery__lightbox--open {
    pointer-events: auto;
    opacity: 1;
}

.cw-gallery__lb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.cw-gallery__lb-img {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.cw-gallery__lb-close,
.cw-gallery__lb-prev,
.cw-gallery__lb-next {
    position: absolute;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 200ms ease;
    padding: 0;
}

@media (hover: hover) {
    .cw-gallery__lb-close:hover,
    .cw-gallery__lb-prev:hover,
    .cw-gallery__lb-next:hover {
        background: rgba(255, 255, 255, 0.30);
    }
}

.cw-gallery__lb-close {
    top: 20px;
    right: 20px;
}

.cw-gallery__lb-prev {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.cw-gallery__lb-next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* ── Responsive móvil ────────────────────────────────────── */

@media (max-width: 767px) {

    .cw-gallery__main {
        border-radius: 12px;
    }

    .cw-gallery__thumbs {
        margin-top: 8px;
        gap: 6px;
    }

    .cw-gallery__thumb {
        flex: 0 0 22%;
        border-radius: 8px;
    }

    .cw-gallery__wishlist {
        width: 34px;
        height: 34px;
        top: 8px;
        right: 8px;
    }

    .cw-gallery__badge {
        font-size: 11px;
        padding: 3px 8px;
        top: 8px;
        left: 8px;
    }

    .cw-gallery__lb-prev { left: 8px; }
    .cw-gallery__lb-next { right: 8px; }

    .cw-gallery__lb-close {
        top: 12px;
        right: 12px;
    }

    .cw-gallery__lb-img {
        max-width: 96vw;
        max-height: 80vh;
    }
}