/* eKomi HOME — slider 4-up with dots (no libs) */
.oo-ekomi-home { margin: 0; }
.oo-ekomi-home-slider{
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
}

/* viewport */
.oo-ekomi-home-viewport{
  overflow:hidden;
  width:100%;
}

/* track */
.oo-ekomi-home-track{
  display:flex;
  flex-wrap:nowrap;
  gap:18px;
  margin:0;
  padding:8px 4px;
  list-style:none;
  transition: transform .35s ease;
  will-change: transform;
}

/* card */
.oo-ekomi-home-card{
  flex: 0 0 calc((100% - 18px*2) / 3);
  background:#fff;
  border-radius:14px;
  padding:16px 16px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  min-height: 150px;
}
@media (max-width: 1200px){
  .oo-ekomi-home-card{ flex-basis: calc((100% - 18px*2) / 3); }
}
@media (max-width: 900px){
  .oo-ekomi-home-card{ flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 600px){
  .oo-ekomi-home-card{ flex-basis: 78vw; }
}

/* text */
.oo-ekomi-home-name{ display:block; font-weight:700; font-size:14px; margin-bottom:8px; }
.oo-ekomi-home-text{ margin-top:10px; font-size:14px; line-height:1.45; }
.oo-ekomi-home-date{ display:block; margin-top:12px; font-size:12px; opacity:.7; }

/* stars */
.oo-ekomi-home-rating{ display:flex; gap:2px; align-items:center; }
.oo-ekomi-home-star{ font-size:14px; line-height:1; }
.oo-ekomi-home-star.empty{ opacity:.25; }
.oo-ekomi-home-star.filled{ opacity:1; }

/* nav */
.oo-ekomi-home-nav{
  width:38px; height:38px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  user-select:none;
}
.oo-ekomi-home-nav[disabled]{ opacity:.35; cursor:default; }

/* dots */
.oo-ekomi-home-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}
.oo-ekomi-home-dot{
  width:24px;
  height:4px;
  border-radius:99px;
  background: rgba(0,0,0,.18);
  border:0;
  padding:0;
  cursor:pointer;
}
.oo-ekomi-home-dot.is-active{ background: rgba(0,0,0,.55); }


/* HOME tweaks */
.oo-ekomi-home { background: transparent !important; }

/* Card sin borde/sombra */
.oo-ekomi-home-card{
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important; /* si prefieres blanco, cambia a #fff */
}

/* Header nombre + fecha en línea */
.oo-ekomi-home-card .oo-ekomi-home-name{
  display: inline-block;
  margin: 0;
}

.oo-ekomi-home-card .oo-ekomi-home-date{
  display: inline-block;
  margin-left: 10px;
  margin-top: 0 !important;
  font-size: 12px;
  opacity: .7;
  vertical-align: middle;
}

/* Reduce espacios para que quede más compacto */
.oo-ekomi-home-text{ margin-top: 10px; }

/* TOP row: nombre izquierda, estrellas+fecha derecha */
.oo-ekomi-home-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.oo-ekomi-home-name{
  font-weight:700;
  font-size:14px;
  line-height:1.2;
}

.oo-ekomi-home-meta{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

/* estrellas naranja */
.oo-ekomi-home-rating{
  display:flex;
  gap:2px;
  align-items:center;
}

.oo-ekomi-home-star{
  font-size:14px;
  line-height:1;
}

.oo-ekomi-home-star.filled{
  color:#f29900;
  opacity:1;
}

.oo-ekomi-home-star.empty{
  color:#f29900;
  opacity:.25;
}

.oo-ekomi-home-date{
  font-size:12px;
  opacity:.75;
}

/* nombre arriba, meta debajo */
.oo-ekomi-home-top{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}

.oo-ekomi-home-name{
  font-weight:700;
  font-size:14px;
  line-height:1.25;
}

/* estrellas + fecha en la misma línea */
.oo-ekomi-home-meta{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

@media (max-width: 600px){
  .oo-ekomi-home-viewport{ overflow:hidden; }
  .oo-ekomi-home-track{ gap:12px; padding:0 8px; }
  .oo-ekomi-home-card{ flex:0 0 calc(100% - 16px); }
}

/* ===============================
   eKomi HOME: SOLO slider por transform (dots/flechas)
   (sin scroll horizontal nativo)
================================ */

.oo-ekomi-home-viewport{
  overflow: hidden !important;
}

.oo-ekomi-home-track{
  overflow: visible !important;        /* importante: NO scroll */
  scroll-snap-type: none !important;   /* por si algo lo añade */
  -webkit-overflow-scrolling: auto !important;
}

/* Evita “barra/scroll” horizontal si algún padre lo habilita */
.oo-ekomi-home-viewport,
.oo-ekomi-home-track{
  scrollbar-width: none;
}
.oo-ekomi-home-viewport::-webkit-scrollbar,
.oo-ekomi-home-track::-webkit-scrollbar{
  display: none !important;
}

/* En móvil, que el gesto horizontal NO intente scrollear */
@media (max-width: 600px){
  .oo-ekomi-home-viewport{
    touch-action: pan-y !important;  /* deja scroll vertical normal */
  }
}
/* ===============================
   eKomi HOME – MÓVIL
   Quitar flechas + dots y dejar scroll nativo
================================ */

@media (max-width: 600px){

  /* Ocultar navegación (flechas + rallitas) */
  .oo-ekomi-home-nav,
  .oo-ekomi-home-dots,
  [data-oo-ekomi-dots]{
    display: none !important;
  }

  /* Activar scroll nativo en el track */
  .oo-ekomi-home-viewport{
    overflow: hidden !important; /* el scroll lo hace el track */
  }

  .oo-ekomi-home-track{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    /* para que se sienta bien en móvil */
    touch-action: pan-x;
  }

  /* 1 tarjeta por “pantalla” (ajústalo si quieres más/menos ancho) */
  .oo-ekomi-home-card{
    scroll-snap-align: start;
    flex: 0 0 90vw;   /* antes 78vw; subimos para que no se vea tanta siguiente */
  }
}