/* ==========================================================================
   drag-scroll — JetEngine Listing Grid → carrusel de scroll libre
   Comportamiento + controles. La maquetación de las cards es tuya.

   Tokens (Advanced → Custom CSS del widget → selector { ... }):
     --ds-arrow-size / --ds-arrow-inset / --ds-arrow-top
     --ds-arrow-bg / --ds-arrow-color / --ds-arrow-bg-hover / --ds-arrow-color-hover
     --ds-rail-color / --ds-thumb-color / --ds-rail-gap
     --ds-fade
     --ds-cursor-size / --ds-cursor-bg / --ds-cursor-color / --ds-cursor-blend
   ========================================================================== */
.drag-scroll {
  position: relative;

  --ds-inset-start: 0px;
  --ds-inset-end: 0px;
  --ds-arrow-size: 2rem;
  --ds-arrow-inset: 1rem;
  --ds-arrow-top: calc(var(--ds-track-h, 100%) / 2);
  --ds-arrow-bg: #fff;
  --ds-arrow-color: #111;
  --ds-arrow-bg-hover: #111;
  --ds-arrow-color-hover: #fff;
  --ds-rail-color: rgba(0, 0, 0, .12);
  --ds-thumb-color: currentColor;
  --ds-rail-gap: 1.5rem;
  --ds-rail-width: min(20rem, 30%);
  --ds-fade: 0px;
  --ds-cursor-size: 4.5rem;
  --ds-cursor-bg: #fff;
  --ds-cursor-color: #111;
  --ds-cursor-blend: normal;
}

/* ---------- El track ---------- */
.drag-scroll .jet-listing-grid__items {
  flex-wrap: nowrap !important;
  /* Alineación a sangre: la primera card respeta el padding del sitio, el
     resto del track sangra. Pon el contenedor a 0 y controla aquí el inicio. */
  padding-inline-start: var(--ds-inset-start, 0);
  padding-inline-end: var(--ds-inset-end, 0);
  scroll-padding-inline-start: var(--ds-inset-start, 0);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;               /* la inercia la controla el JS */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  align-items: strecht;
}
.drag-scroll .jet-listing-grid__items::-webkit-scrollbar { display: none; }
.drag-scroll .jet-listing-grid__items:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Card "Ver más": mismo ancho que las demás, contenido centrado */
.drag-scroll .ds-more-item {
  display: flex;
  align-items: stretch;
  align-self: stretch !important;
  height: auto !important;
}
.drag-scroll .ds-more-item > .ds-more {
  display: flex;
  width: 100%;
  height: 100%;
}
.drag-scroll .ds-more-item .elementor-widget-heading,
.drag-scroll .ds-more-item .elementor-heading-title {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
}
.drag-scroll .ds-more-item .elementor-heading-title a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Sin wrap, las cards no deben encogerse: conservan el ancho del widget */
.drag-scroll .jet-listing-grid__item { flex-shrink: 0 !important; }

/* El drag nativo del navegador (imagen fantasma al arrastrar un img/enlace)
   nos roba el puntero: sin esto, arrastrar desde una foto "coge" la foto y
   acaba disparando un click. */
.drag-scroll .jet-listing-grid__items,
.drag-scroll .jet-listing-grid__items * {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.drag-scroll .jet-listing-grid__items img { -webkit-touch-callout: none; }

.drag-scroll.is-dragging { user-select: none; }
.drag-scroll.is-dragging .jet-listing-grid__items { cursor: grabbing; }
.drag-scroll.is-dragging .jet-listing-grid__item * { pointer-events: none; }

/* ---------- Flechas: persistentes, con estado deshabilitado --------------
   Si maquetas las tuyas con [data-ds-prev] / [data-ds-next], estas no salen. */
.drag-scroll .ds-arrow {
  position: absolute;
  top: var(--ds-arrow-top);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-arrow-size);
  height: var(--ds-arrow-size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ds-arrow-bg);
  color: var(--ds-arrow-color);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .14);
  cursor: pointer;
  /* Ocultas hasta que el puntero entra en el carrusel */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(var(--ds-arrow-slide, 0)) scale(.9);
  transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1),
              background .25s ease, color .25s ease;
}
.drag-scroll .ds-arrow--prev { left: var(--ds-arrow-inset); --ds-arrow-slide: -.5rem; }
.drag-scroll .ds-arrow--next { right: var(--ds-arrow-inset); --ds-arrow-slide: .5rem; }

/* Aparecen al pasar por encima… y también con teclado (Tab), que si no
   las flechas dejarían de existir para quien no usa ratón. */
.drag-scroll:hover .ds-arrow,
.drag-scroll:focus-within .ds-arrow {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0) scale(1);
}
.drag-scroll .ds-arrow svg { width: 40%; height: 40%; }
.drag-scroll .ds-arrow:hover { background: var(--ds-arrow-bg-hover); color: var(--ds-arrow-color-hover); }
.drag-scroll .ds-arrow:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid currentColor; outline-offset: 3px; }

/* Estado deshabilitado (también para tus botones externos) */
.drag-scroll:hover .ds-arrow[disabled],
.drag-scroll:focus-within .ds-arrow[disabled],
.drag-scroll .ds-arrow[disabled],
[data-ds-prev][disabled],
[data-ds-next][disabled] {
  opacity: 0;
  pointer-events: none;
}
/* Mientras arrastras, las flechas se apartan */
.drag-scroll.is-dragging .ds-arrow { opacity: 0; pointer-events: none; }

/* Si todo cabe, no hay nada que deslizar: fuera controles */
.drag-scroll.no-overflow .ds-arrow,
.drag-scroll.no-overflow .ds-rail { display: none; }
.drag-scroll.no-overflow .jet-listing-grid__items { cursor: auto; }

/* Táctil: se desliza con el dedo, las flechas sobran */
@media (pointer: coarse) {
  .drag-scroll .ds-arrow { display: none; }
  .drag-scroll .jet-listing-grid__items { cursor: auto; }
}

/* ---------- Barra de progreso: sutil, centrada, solo al pasar por encima --
   A sangre cortaría la página en dos. Centrada y corta, es un detalle. ----- */
.drag-scroll .ds-rail {
  position: relative;
  width: var(--ds-rail-width, min(20rem, 30%));
  height: 1px;
  margin: var(--ds-rail-gap) auto 0;
  background: var(--ds-rail-color);
  border-radius: 999px;
  touch-action: none;
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.drag-scroll:hover .ds-rail,
.drag-scroll:focus-within .ds-rail,
.drag-scroll.is-dragging .ds-rail {
  opacity: 1;
  transform: translateY(0);
}
.drag-scroll .ds-rail__thumb {
  position: absolute;
  inset-block: -6px;                    /* zona de agarre más alta que la línea */
  left: 0;
  width: var(--ds-thumb-w, 20%);
  transform: translateX(var(--ds-thumb-x, 0px));
  cursor: grab;
}
.drag-scroll .ds-rail__thumb::after {
  content: "";
  position: absolute;
  inset: 6px 0;
  border-radius: 999px;
  background: var(--ds-thumb-color);
}

/* ---------- Máscara de bordes (opcional) -------------------------------- */
.drag-scroll[data-ds-fade] .jet-listing-grid__items {
  --l: var(--ds-fade);
  --r: var(--ds-fade);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--l), #000 calc(100% - var(--r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--l), #000 calc(100% - var(--r)), transparent 100%);
}
.drag-scroll.at-start .jet-listing-grid__items { --l: 0px; }
.drag-scroll.at-end   .jet-listing-grid__items { --r: 0px; }

/* ---------- Cursor personalizado: OPT-IN (data-ds-cursor|1) --------------
   Para heroes / colecciones editoriales. No lo uses en listados de producto. */
@media (hover: hover) and (pointer: fine) {
  .drag-scroll.has-ds-cursor .jet-listing-grid__items,
  .drag-scroll.has-ds-cursor .jet-listing-grid__items * { cursor: none; }
  .drag-scroll.has-ds-cursor .ds-native,
  .drag-scroll.has-ds-cursor .ds-native * { cursor: pointer; }
}
.ds-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-width: var(--ds-cursor-size, 4.5rem);
  height: var(--ds-cursor-size, 4.5rem);
  padding-inline: 1.1em;
  border-radius: 999px;
  background: var(--ds-cursor-bg, #fff);
  color: var(--ds-cursor-color, #111);
  mix-blend-mode: var(--ds-cursor-blend, normal);
  font-size: .8rem;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.4);
  transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}
.ds-cursor.is-visible  { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.ds-cursor.is-grabbing { transform: translate3d(-50%, -50%, 0) scale(.82); }
.ds-cursor svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.ds-cursor .ds-cursor__prev,
.ds-cursor .ds-cursor__next { display: none; }
.ds-cursor.is-prev .ds-cursor__prev,
.ds-cursor.is-next .ds-cursor__next,
.ds-cursor.is-grabbing .ds-cursor__prev,
.ds-cursor.is-grabbing .ds-cursor__next { display: block; }

@media (prefers-reduced-motion: reduce) {
  .ds-cursor { transition: opacity .15s linear; }
}

@media (pointer: coarse) {
  .drag-scroll .ds-rail { display: none; }
}

@media (max-width: 767px) {
  .drag-scroll {
    --ds-inset-start: 1rem;
    --ds-inset-end: 1rem;
    --ds-peek: 1.75rem;   /* cuánto asoma la tercera */
  }
  .drag-scroll .jet-listing-grid__item {
    flex-basis: calc((100% - var(--ds-peek)) / 2) !important;
    width: calc((100% - var(--ds-peek)) / 2) !important;
    max-width: none !important;
  }
}