/* ==========================================================================
   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; }
   }