/* ==========================================================================
   Galería principal en la ficha de producto (carrusel simple, sin expansión)
   ========================================================================== */

   .rvx-pg { position: relative; width: 100%; }

   .rvx-pg-viewport {
       position: relative;
       width: 100%;
       overflow: hidden;
       background: #f4f6f8;
   }
   
   .rvx-pg-track {
       display: flex;
       width: 100%;
       touch-action: pan-y;
       will-change: transform;
   }
   
   .rvx-pg-slide {
       flex: 0 0 100%;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: zoom-in;
   }
   
   .rvx-pg-slide img {
       width: 100%;
       height: auto;
       max-width: 100%;
       display: block;
       object-fit: cover;
       aspect-ratio: 3 / 4;
       user-select: none;
       -webkit-user-drag: none;
   }
   
   .rvx-pg-arrow {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       z-index: 5;
       width: 36px;
       height: 36px;
       border-radius: 50%;
       border: none;
       background: rgba(255, 255, 255, 0.85);
       box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       color: #222;
       padding: 0;
   }
   .rvx-pg-arrow svg { width: 20px; height: 20px; }
   .rvx-pg-prev { left: 12px; }
   .rvx-pg-next { right: 12px; }
   
   .rvx-pg-dots {
       display: flex;
       justify-content: center;
       gap: 6px;
       padding: 10px 0;
   }
   .rvx-pg-dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: #d7dae0;
       transition: background 0.2s ease, width 0.2s ease;
   }
   .rvx-pg-dot.is-active { background: #222; width: 16px; border-radius: 3px; }
   
   /* ==========================================================================
      Etiquetas (NUEVO / -XX% / Agotado / Sale) generadas por
      revedoux_product_labels(). Copiadas tal cual de product-card-shop.css
      para que se vean igual aquí SIN depender de que ese archivo también
      esté cargado en la ficha de producto (por eso se veía como barra negra).
      ========================================================================== */
   
   .rvx-pg .rvx-labels {
       position: absolute;
       inset: 0;
       z-index: 20;
       pointer-events: none;
   }
   
   .rvx-pg .rvx-labels__top {
       position: absolute;
       top: 12px;
       left: 12px;
   }
   
   .rvx-pg .rvx-labels__bottom {
       position: absolute;
       bottom: 12px;
       left: 12px;
   }
   
   .rvx-pg .rvx-label {
       display: inline-block;
       padding: 4px 9px;
       border-radius: 4px;
       font-family: 'Varela Round', sans-serif;
       font-size: 12px;
       line-height: 1.2;
       letter-spacing: .02em;
       white-space: nowrap;
   }
   
   .rvx-pg .rvx-labels__top:has(.rvx-label--discount) {
       top: 14px;
       left: 0;
   }
   
   .rvx-pg .rvx-labels .rvx-label--discount {
       padding: 7px 14px 7px 12px;
       background: #FF595E;
       color: #fff;
       font-size: 13px;
       font-weight: 400;
       line-height: 1;
       border: none;
       border-radius: 0 6px 6px 0;
   }
   
   .rvx-pg .rvx-label--soldout {
       background: #EEF0F7;
       border: 1px solid #C9CDE0;
       color: #5A6178;
   }
   
   .rvx-pg .rvx-label--new,
   .rvx-pg .rvx-label--sale {
       font-size: 10px;
       text-transform: uppercase;
       letter-spacing: .08em;
       padding: 4px 8px;
   }
   
   .rvx-pg .rvx-label--new {
       background: #111;
       color: #fff;
   }
   
   .rvx-pg .rvx-label--sale {
       background: #fff;
       color: #000;
       border: 1px solid #000;
   }
   
   @media (max-width: 768px) {
       .rvx-pg .rvx-labels__top    { top: 10px; left: 10px; }
       .rvx-pg .rvx-labels__bottom { bottom: 10px; left: 10px; }
       .rvx-pg .rvx-label { font-size: 11px; padding: 3px 8px; }
   
       .rvx-pg .rvx-labels__top:has(.rvx-label--discount) {
           top: 14px;
           left: 0;
       }
   
       .rvx-pg .rvx-labels .rvx-label--discount {
           padding: 6px 12px 6px 10px;
           font-size: 12px;
           border-radius: 0 6px 6px 0;
       }
   }
   
   /* ==========================================================================
      Lightbox fijo, con fondo oscurecido (backdrop) que atenúa TODO lo demás
      (header, precio, tallas) sin taparlo por completo: se ve dimmed detrás.
      Solo se cierra con la X — no hay cierre al tocar el fondo.
      ========================================================================== */
   
   .rvx-lb {
       position: fixed;
       inset: 0;
       z-index: 2147483000;
       background: rgba(10, 10, 10, 0.55);
       display: flex;
       align-items: flex-start;
       justify-content: center;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
       padding: 56px 12px 24px;
       padding-top: calc(56px + env(safe-area-inset-top, 0px));
       padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
       box-sizing: border-box;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.2s ease, visibility 0.2s;
   }
   
   .rvx-lb * { box-sizing: border-box; }
   
   .rvx-lb.is-open {
       opacity: 1;
       visibility: visible;
   }
   
   body.rvx-lb-open {
       overflow: hidden !important;
   }
   
   /* Contenedor SIN fondo blanco, sin bordes ni sombra: la imagen y las
      miniaturas flotan transparentes directo sobre el backdrop oscuro. */
   .rvx-lb-panel {
       width: 100%;
       max-width: 480px;
       margin: auto 0;
       background: transparent;
       position: relative;
   }
   
   .rvx-lb-close {
       position: absolute;
       top: 4px;
       right: 4px;
       z-index: 10;
       width: 26px;
       height: 26px;
       border-radius: 50%;
       border: none;
       background: #000;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       color: #fff;
       margin: 0;
       padding: 0;
   }
   .rvx-lb-close svg { width: 18px; height: 18px; }
   
   .rvx-lb-viewport {
       position: relative;
       width: 100%;
       background: transparent;
       display: flex;
       align-items: center;
       overflow: hidden;
       touch-action: pan-y;
   }
   
   .rvx-lb-track {
       display: flex;
       width: 100%;
       will-change: transform;
   }
   
   .rvx-lb-slide {
       flex: 0 0 100%;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .rvx-lb-slide img {
       width: 100%;
       max-width: 100%;
       max-height: 70vh;
       border-radius: 3%;
       object-fit: contain;
       user-select: none;
       -webkit-user-drag: none;
   }
   
   .rvx-lb-arrow {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       z-index: 5;
       width: 32px;
       height: 32px;
       border: none;
       background: transparent;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       color: #fff;
       filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
       padding: 0;
   }
   .rvx-lb-arrow svg { width: 26px; height: 26px; }
   .rvx-lb-prev { left: 6px; }
   .rvx-lb-next { right: 6px; }
   
   .rvx-lb-thumbs {
       display: flex;
       justify-content: center;
       gap: 8px;
       padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: none;
       background: transparent;
   }
   .rvx-lb-thumbs::-webkit-scrollbar { display: none; }
   
   .rvx-lb-thumb {
       flex: 0 0 auto;
       width: 52px;
       height: 52px;
       border-radius: 8px;
       overflow: hidden;
       border: 2px solid transparent;
       padding: 0;
       background: transparent;
       cursor: pointer;
       opacity: 0.55;
       transition: opacity 0.2s ease, border-color 0.2s ease;
   }
   .rvx-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
   .rvx-lb-thumb.is-active { opacity: 1; border-color: #fff; }
   
   /* Desktop: imágenes un poco más contenidas, sin recorte forzado */
   @media (min-width: 992px) {
       .rvx-pg-slide img { aspect-ratio: 4 / 5; }
       .rvx-lb-thumb { width: 64px; height: 64px; }
       .rvx-lb-panel { max-width: 560px; }
   }

/* ==========================================================================
   Escritorio: miniaturas verticales + imagen grande con esquinas redondeadas,
   flechas abajo a la derecha y altura ajustada a la pantalla.
   ========================================================================== */
.rvx-pg-thumbs { display: none; }

@media (min-width: 901px) {

    .rvx-pg {
        /* La imagen llega hasta el borde inferior de la pantalla (como la referencia):
           altura = pantalla − espacio superior (--rvx-sticky-top, en layout.css) + sangrado.
           El sangrado hace que las esquinas redondeadas de abajo queden fuera de la pantalla. */
        --rvx-pg-bleed: 12px;
        --rvx-pg-h: clamp(420px, calc(100vh - var(--rvx-sticky-top, 44px) + var(--rvx-pg-bleed)), 1100px);
        --rvx-pg-thumb: 60px;
        --rvx-pg-gap: 16px;
    }

    .rvx-pg.has-thumbs {
        display: grid;
        grid-template-columns: var(--rvx-pg-thumb) minmax(0, 1fr);
        column-gap: var(--rvx-pg-gap);
        align-items: start;
    }

    /* Miniaturas */
    .rvx-pg-thumbs {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: var(--rvx-pg-h);
        overflow-y: auto;
        scrollbar-width: none;
    }
    .rvx-pg-thumbs::-webkit-scrollbar { display: none; }

    .rvx-pg-thumb {
        -webkit-appearance: none !important;
        appearance: none !important;
        flex: 0 0 auto;
        width: var(--rvx-pg-thumb);
        height: var(--rvx-pg-thumb);
        padding: 0 !important;
        border: 1px solid transparent !important;
        border-radius: 4px !important;
        background: #f4f6f8 !important;
        overflow: hidden;
        cursor: pointer;
        opacity: .65;
        transition: opacity .15s ease, border-color .15s ease;
    }
    .rvx-pg-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .rvx-pg-thumb:hover { opacity: 1; }
    .rvx-pg-thumb.is-active { opacity: 1; border-color: #111 !important; }
    .rvx-pg-thumb:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

    /* Imagen principal */
    .rvx-pg-viewport {
        border-radius: 12px;
        background: #f0f0f0;
    }

    /* La foto SIEMPRE llena el cuadro (sin franjas grises arriba/abajo):
       - ancho completo y proporción 3:4 (altura natural);
       - si la pantalla es más baja, se limita a --rvx-pg-h y se recorta un poco abajo
         (object-position: top conserva la cabeza). */
    .rvx-pg-slide img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        max-height: var(--rvx-pg-h);
        object-fit: cover;
        object-position: center top;
        transition: max-height .3s ease;
    }

    /* Flechas redondas, abajo a la derecha */
    .rvx-pg-arrow {
        top: auto;
        bottom: calc(var(--rvx-pg-bleed) + 22px);   /* siempre visibles sobre el borde de la pantalla */
        transform: none;
        width: 36px;
        height: 36px;
        background: #fff !important;
        color: #111 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    }
    .rvx-pg-next { right: 16px; left: auto; }
    .rvx-pg-prev { right: 60px; left: auto; }   /* 16 + 36 + 8 */

    /* Los puntos sobran con miniaturas */
    .rvx-pg.has-thumbs .rvx-pg-dots { display: none; }
}