/* ====== XGC Carousel ====== */
.xgc-carousel{position:relative;overflow:hidden;border-radius: 20px;border:1px solid #ffffff8c; }
.xgc-track{display:flex;width:100%;touch-action:pan-y;will-change:transform;transition:transform .35s ease}
.xgc-slide{flex:0 0 100%;position:relative}
.xgc-slide a{display:block}
.xgc-slide img{display:block;width:100%;height:auto;object-fit:cover}
.xgc-dots{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:3}
.xgc-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;cursor:pointer;padding:0}
.xgc-dot.is-active{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6) inset}

/* Integración Total */
.vcex-portfolio-grid .portfolio-entry-media .xgc-carousel,
.products .product .wpex-loop-product-images .xgc-carousel {
  background:transparent;
  border-radius: 15px;
}

/* Capas: carrusel por encima del fondo; add-to-cart por encima del carrusel */
.wpex-loop-product-images .xgc-carousel { position:relative; z-index:2; }
.wpex-loop-product-images .wpex-loop-product-add-to-cart { position:relative; z-index:3; }

/* Oculta el link+img original del tema en el loop (lo sustituimos por el carrusel) */
.wpex-loop-product-images > a.woocommerce-LoopProduct-link { display: none !important; }

/* Evitar arrastre nativo y selección en desktop */
.xgc-carousel,
.xgc-carousel * {
  -webkit-user-select: none;
  user-select: none;
}
.xgc-slide img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Feedback de cursor */
.xgc-track { cursor: grab; }
.xgc-carousel.is-dragging .xgc-track { cursor: grabbing; }


/* Opcional: evita “elastic scroll” afectando al gesto en contenedores */
.xgc-carousel { overscroll-behavior: contain; }

.xgc-arrows {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 3;
  justify-content: center;
  align-items: center;
}

.xgc-arrows button {
    background: #ffffff70;
    border: 1px solid #d4d4d4;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    transition: background 0.3s;
    color: #fff;
}

.xgc-arrows button:hover {
  background: #f0f0f0;
  color: #05bae6;
}