/* Frontend CSS - aislado por prefijo codexcr */
.codexcr-wooslider{
  position:relative;
  width:100%;
  max-width:100%;
}

.codexcr-wooslider__controls{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
  transform:translateY(-50%);
  padding:0 6px;
  z-index:2;
}

.codexcr-wooslider .codexcr-wooslider__arrow{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:rgba(255,255,255,.95);
  cursor:pointer;

  /* NUEVO: asegura que el símbolo no herede blanco del tema */
  color:#111;
}

.codexcr-wooslider .codexcr-wooslider__arrow span{
  /* NUEVO: hace el símbolo más visible y consistente */
  color:inherit;
  font-size:28px;
  line-height:1;
  font-weight:700;
}


.codexcr-wooslider__arrow:focus-visible{
  outline:2px solid #2271b1; /* estilo WP */
  outline-offset:2px;
}

.codexcr-wooslider__viewport{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  display:flex;
  gap:12px;
  padding:8px 44px; /* deja espacio para flechas */
  scrollbar-width:thin;
}

.codexcr-wooslider__viewport.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
}

.codexcr-wooslider__slide{
  scroll-snap-align:start;
  flex:0 0 100%;
}

.codexcr-wooslider__card{
  background:transparent;
  display:flex;
  gap:10px;
}

.codexcr-wooslider__media{
  display:block;
  width:100%;
  aspect-ratio:var(--codexcr-media-ratio, 3 / 4);
  overflow:hidden;
  background:transparent; /* sin fondo gris: respeta transparencia de la imagen */
  border-radius:10px;
  position:relative;
}

/* A prueba de temas: garantiza que la imagen llene el marco 3:4 */
.codexcr-wooslider .codexcr-wooslider__media{
  background:#fff; /* opcional: si prefieres que no se note el "gris" */
}

.codexcr-wooslider .codexcr-wooslider__media > img.codexcr-wooslider__img{
  width:100% !important;
  height:100% !important;
  object-fit:var(--codexcr-img-fit, cover) !important;
  display:block !important;

  /* algunos temas meten max-height/max-width raros */
  max-width:none !important;
  max-height:none !important;
}


.codexcr-wooslider__img--placeholder{
  display:block;
  width:100%;
  height:100%;
}

.codexcr-wooslider__content{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:2px 0;
  min-width:0;
}

/* Título: 2 líneas exactas para que precio/botón queden alineados */
.codexcr-wooslider .codexcr-wooslider__title{
  font-size:14px;
  line-height:1.2;
  margin:0 !important;

  height:2.4em;        /* 1.2 * 2 líneas */
  overflow:hidden;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.codexcr-wooslider .codexcr-wooslider__price{
  min-height:1.4em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.codexcr-wooslider .codexcr-wooslider__content{
  display:flex;
  flex-direction:column;
}


.codexcr-wooslider__title a{
  text-decoration:none;
}

.codexcr-wooslider__price{
  font-size:14px;
}

.codexcr-wooslider__cta .button{
  width:100%;
  text-align:center;
}

/* Posición del contenido (bloque completo) */
.codexcr-content-bottom .codexcr-wooslider__card{
  flex-direction:column;
}
.codexcr-content-top .codexcr-wooslider__card{
  flex-direction:column-reverse;
}
.codexcr-content-left .codexcr-wooslider__card{
  flex-direction:row-reverse;
  align-items:flex-start;
}
.codexcr-content-right .codexcr-wooslider__card{
  flex-direction:row;
  align-items:flex-start;
}
.codexcr-content-overlay .codexcr-wooslider__card{
  position:relative;
}
.codexcr-content-overlay .codexcr-wooslider__media{
  width:100%;
}
.codexcr-content-overlay .codexcr-wooslider__content{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:10px;
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  color:#fff;
}
.codexcr-content-overlay .codexcr-wooslider__title a{
  color:inherit;
}
.codexcr-content-overlay .codexcr-wooslider__price{
  color:inherit;
}

/* Tamaños S/M/L (ajusta densidad visual sin romper el layout) */
/* Usamos variables CSS para permitir override por slider sin hacks ni !important. */
.codexcr-img-s{ --codexcr-slide-min:160px; }
.codexcr-img-m{ --codexcr-slide-min:220px; }
.codexcr-img-l{ --codexcr-slide-min:280px; }

.codexcr-wooslider__slide{ min-width:var(--codexcr-slide-min, 220px); }

.codexcr-img-s .codexcr-wooslider__title{ font-size:13px; }
.codexcr-img-s .codexcr-wooslider__price{ font-size:13px; }
.codexcr-img-s .codexcr-wooslider__arrow{ width:34px; height:34px; }

.codexcr-img-m .codexcr-wooslider__title{ font-size:14px; }
.codexcr-img-m .codexcr-wooslider__price{ font-size:14px; }

.codexcr-img-l .codexcr-wooslider__title{ font-size:15px; }
.codexcr-img-l .codexcr-wooslider__price{ font-size:15px; }
.codexcr-img-l .codexcr-wooslider__arrow{ width:38px; height:38px; }

/* Columnas responsive: móvil (default) */
.codexcr-cols-m-1 .codexcr-wooslider__slide{ flex-basis:100%; }
.codexcr-cols-m-2 .codexcr-wooslider__slide{ flex-basis:calc((100% - 12px) / 2); }
.codexcr-cols-m-3 .codexcr-wooslider__slide{ flex-basis:calc((100% - 24px) / 3); }
.codexcr-cols-m-4 .codexcr-wooslider__slide{ flex-basis:calc((100% - 36px) / 4); }
.codexcr-cols-m-5 .codexcr-wooslider__slide{ flex-basis:calc((100% - 48px) / 5); }
.codexcr-cols-m-6 .codexcr-wooslider__slide{ flex-basis:calc((100% - 60px) / 6); }

/* Tablet */
@media (min-width: 768px){
  .codexcr-cols-t-1 .codexcr-wooslider__slide{ flex-basis:100%; }
  .codexcr-cols-t-2 .codexcr-wooslider__slide{ flex-basis:calc((100% - 12px) / 2); }
  .codexcr-cols-t-3 .codexcr-wooslider__slide{ flex-basis:calc((100% - 24px) / 3); }
  .codexcr-cols-t-4 .codexcr-wooslider__slide{ flex-basis:calc((100% - 36px) / 4); }
  .codexcr-cols-t-5 .codexcr-wooslider__slide{ flex-basis:calc((100% - 48px) / 5); }
  .codexcr-cols-t-6 .codexcr-wooslider__slide{ flex-basis:calc((100% - 60px) / 6); }
}

/* Escritorio */
@media (min-width: 1024px){
  .codexcr-cols-d-1 .codexcr-wooslider__slide{ flex-basis:100%; }
  .codexcr-cols-d-2 .codexcr-wooslider__slide{ flex-basis:calc((100% - 12px) / 2); }
  .codexcr-cols-d-3 .codexcr-wooslider__slide{ flex-basis:calc((100% - 24px) / 3); }
  .codexcr-cols-d-4 .codexcr-wooslider__slide{ flex-basis:calc((100% - 36px) / 4); }
  .codexcr-cols-d-5 .codexcr-wooslider__slide{ flex-basis:calc((100% - 48px) / 5); }
  .codexcr-cols-d-6 .codexcr-wooslider__slide{ flex-basis:calc((100% - 60px) / 6); }
}

/* === Alinear CTA abajo (Bottom/Top) === */
.codexcr-wooslider__viewport{
  align-items: stretch; /* asegura misma altura de slides */
}

/* Para layouts Bottom y Top: estira y empuja el CTA al fondo */
.codexcr-content-bottom .codexcr-wooslider__slide,
.codexcr-content-top .codexcr-wooslider__slide{
  height: 100%;
}

.codexcr-content-bottom .codexcr-wooslider__card,
.codexcr-content-top .codexcr-wooslider__card{
  height: 100%;
}

.codexcr-content-bottom .codexcr-wooslider__content,
.codexcr-content-top .codexcr-wooslider__content{
  flex: 1; /* ocupa el alto extra */
}

/* Reserva también 2 líneas para el precio (ofertas suelen ocupar más) */
.codexcr-content-bottom .codexcr-wooslider__price,
.codexcr-content-top .codexcr-wooslider__price{
  line-height: 1.25;
  min-height: calc(1.25em * 2);
}

/* Empuja el botón al fondo del bloque de contenido */
.codexcr-content-bottom .codexcr-wooslider__cta,
.codexcr-content-top .codexcr-wooslider__cta{
  margin-top: auto;
}

/* Dots */
.codexcr-wooslider__dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:10px 0 0;
}
.codexcr-wooslider__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.25);
  background:transparent;
  cursor:pointer;
}
.codexcr-wooslider__dot[aria-current="true"]{
  background:rgba(0,0,0,.45);
}
.codexcr-wooslider__dot:focus-visible{
  outline:2px solid #2271b1;
  outline-offset:2px;
}
/* Suavidad + evita peleas entre animación y snap */
.codexcr-wooslider .codexcr-wooslider__viewport{
  scroll-behavior: smooth;            /* asegura suavidad */
  overscroll-behavior-x: contain;     /* evita “rebote” raro en algunos navegadores */
}

/* Cuando el plugin está animando (autoplay/flechas), desactiva snap para que no “salte” */
.codexcr-wooslider .codexcr-wooslider__viewport.is-animating{
  scroll-snap-type: none !important;
}

/* Cuando el usuario arrastra, también quitamos snap y smooth para control total */
.codexcr-wooslider .codexcr-wooslider__viewport.is-dragging{
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

/* Respeta accesibilidad: si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .codexcr-wooslider .codexcr-wooslider__viewport{
    scroll-behavior: auto !important;
  }
}