/* ==========================================================================
   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: 3.2rem;
  --ds-arrow-inset: 1.6rem;
  --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: 2.4rem;
  --ds-rail-width: min(32rem, 30%);
  --ds-fade: 0px;
  --ds-cursor-size: 7.2rem;
  --ds-cursor-bg: #fff;
  --ds-cursor-color: #111;
  --ds-cursor-blend: normal;
}/* ---------- El track ---------- */
.drag-scroll .jet-listing-grid__items,
/* ---------- El track ---------- */
.drag-scroll .ds-track {
  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,
.drag-scroll .ds-track::-webkit-scrollbar { display: none; }.drag-scroll .jet-listing-grid__items:focus-visible,
.drag-scroll .ds-track: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,
las cards no deben encogerse: conservan el ancho del widget */
.drag-scroll .ds-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,
arrastrar desde una foto "coge" la foto y
   acaba disparando un click. */
.drag-scroll .ds-track,
.drag-scroll .jet-listing-grid__items *,
.drag-scroll .ds-track * {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}.drag-scroll .jet-listing-grid__items img,
.drag-scroll .ds-track img { -webkit-touch-callout: none; }

.drag-scroll.is-dragging { user-select: none; }.drag-scroll.is-dragging .jet-listing-grid__items,
.drag-scroll.is-dragging .ds-track { cursor: grabbing; }.drag-scroll.is-dragging .jet-listing-grid__item *,
.drag-scroll.is-dragging .ds-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: -.8rem; }
.drag-scroll .ds-arrow--next { right: var(--ds-arrow-inset); --ds-arrow-slide: .8rem; }

/* 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 i { font-size: calc(var(--ds-arrow-size) * .4); line-height: 1; }
.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; }

/* Vertical (el JS pone .ds-vertical cuando el carril va en columna): el carril se
   desplaza hacia abajo y las flechas van arriba y abajo, centradas. */
.drag-scroll.ds-vertical .jet-listing-grid__items,
.drag-scroll.ds-vertical .ds-track {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: auto;
  overscroll-behavior-y: contain;
}
.drag-scroll.ds-vertical .ds-arrow {
  top: auto;
  right: auto;
  left: 50%;
  transform: translateX(-50%) translateY(var(--ds-arrow-slide, 0)) scale(.9);
}
.drag-scroll.ds-vertical .ds-arrow--prev { top: var(--ds-arrow-inset); }
.drag-scroll.ds-vertical .ds-arrow--next { bottom: var(--ds-arrow-inset); }
.drag-scroll.ds-vertical:hover .ds-arrow,
.drag-scroll.ds-vertical:focus-within .ds-arrow {
  transform: translateX(-50%) translateY(0) scale(1);
}

/* 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,
.drag-scroll.no-overflow .ds-track { 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,
.drag-scroll .ds-track { 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(32rem, 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(.56rem);
  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,
/* ---------- Máscara de bordes (opcional) -------------------------------- */
.drag-scroll[data-ds-fade] .ds-track {
  --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,
.drag-scroll.at-start .ds-track { --l: 0px; }.drag-scroll.at-end   .jet-listing-grid__items,
.drag-scroll.at-end .ds-track { --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 .ds-track,
.drag-scroll.has-ds-cursor .jet-listing-grid__items *,
.drag-scroll.has-ds-cursor .ds-track * { 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, 7.2rem);
  height: var(--ds-cursor-size, 7.2rem);
  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: var(--sils-txt-3xs, 1.2rem);
  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 i { font-size: 1.1em; line-height: 1; 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: 1.6rem;
    --ds-inset-end: 1.6rem;
    --ds-peek: 2.8rem;   /* cuánto asoma la tercera */
  }.drag-scroll .jet-listing-grid__item,
.drag-scroll .ds-item {
    flex-basis: calc((100% - var(--ds-peek)) / 2) !important;
    width: calc((100% - var(--ds-peek)) / 2) !important;
    max-width: none !important;
  }
}

/* ==========================================================================
   MARCADO DE BRICKS
   --------------------------------------------------------------------------
   Con Elementor el raíl es .jet-listing-grid__items y las tarjetas
   .jet-listing-grid__item, y JetEngine reparte el ancho con --columns.
   Con Bricks el carril es un bloque hijo con la clase .ds-track y las tarjetas
   llevan .ds-item; el envoltorio .drag-scroll no se desplaza, y sobre él se
   colocan las flechas y la barra de progreso.
   ========================================================================== */
.drag-scroll .ds-track {
	display: flex;
	/* Los bloques de Bricks vienen en columna por defecto: sin esto, las tarjetas se apilan. */
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--ds-gap, 1rem);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.drag-scroll .ds-track::-webkit-scrollbar { display: none; }

.drag-scroll .ds-track > .ds-item {
	flex: 0 0 calc((100% - (var(--ds-gap, 1rem) * (var(--columns, 4) - 1))) / var(--columns, 4));
	max-width: none;
}