/* CloudJersey – Related CSS */

/* ================= Vars ================= */
:root{
  --cj-card-bg: #f3f5f7;
  --cj-card-radius: 16px;
  --cj-card-shadow: 0 2px 10px rgba(0,0,0,.06);
  --cj-gap: 14px;
  --cj-track-pad: 4px;
  --cj-name: #0f172a;
  --cj-price: #0f172a;
  --cj-price-old: #6b7280;
  --cj-arrow-bg: #ffffff;
  --cj-arrow-border: #e5e7eb;
  --cj-arrow-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* ================= Bloque ================= */
.cj-rel{ margin-top: 45px; position: relative; }
.cj-rel-header{ display:flex; align-items:center; justify-content:flex-start; margin:0 0 10px; }
.cj-rel-header h2{ margin:0; font-size: clamp(1.05rem, 2vw, 1.2rem); font-weight: 700; color: #001a35; padding: 0 !important; border: none !important; }

/* ================= Carrusel ================= */
.cj-rel-viewport{
  position: relative !important;
  display: grid !important;
  grid-template-columns: 50px 1fr 50px !important; /* flecha – track – flecha */
  align-items: center !important;
  column-gap: 8px !important;
}

/* Track */
.cj-rel-track{
  grid-column: 2 !important;
  display: flex;
  gap: var(--cj-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--cj-track-pad);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-inline: 8px !important; /* aire para que las flechas no tapen bordes */
}
/* Ocultar barra de scroll (cross-browser) */
.cj-rel-track{ -ms-overflow-style: none !important; scrollbar-width: none !important; }
.cj-rel-track::-webkit-scrollbar{ display: none !important; }

/* ================= Card ================= */
.cj-rel-card{
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(180px, 22vw, 230px);
  text-decoration: none;
  color: inherit;
  background: #fbfbfb;
  border-radius: 10px;
  padding: 25px 0 10px;
  transition: .2s;
}
.cj-rel-card:hover{ background: #f7f7f7; }
.cj-rel-card:hover .cj-rel-img img{ transform: scale(1.02); transition: .2s; }

.cj-rel-img{ display:flex; justify-content:center; }
.cj-rel-img img{
    display: block;
    max-width: 195px;
    max-height: 220px;
    border-radius: 12px;
    background: transparent;
    filter: drop-shadow(0 0 13px #c3c3c3);
    transition: .2s;
    width: auto;
    height: auto;
}

.content-info{ margin-top:25px; border-top:1px solid #ededed; padding:0 15px; }
.cj-rel-name{
  font-size:.90rem; line-height:1; color:#002041; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:8px 0 0 0;
}

/* ===== Valoraciones ===== */
.cj-rel-stars.card{ line-height:12px; height:18px; display:flex; margin: 3px 0;}
.cj-stars.card{ align-items:baseline; }
.cj-rating.card{ font-size:12px; }
.cj-icons.card{ font-size:16px; line-height:15px; }
.cj-count.card{ margin:0 !important; font-size:13px !important; }

/* Precio */
.cj-rel-price{ font-weight:700; color:#002245; font-size:18px; line-height:16px; }
.cj-rel-price del{ opacity:.7; color:var(--cj-price-old); margin-left:8px; font-weight:400; font-size:15px; }

/* ================= Flechas ================= */

/* RESET: anula posicionamientos antiguos (absolute/top/left de temas previos) */
.cj-rel .cj-rel-arrow{
  position: static !important;
  left:auto !important; right:auto !important; top:auto !important;
  transform:none !important;
}

/* Ubicación en grid */
.cj-rel-viewport > .cj-rel-prev{ grid-column:1; justify-self:end; }
.cj-rel-viewport > .cj-rel-next{ grid-column:3; justify-self:start; }

/* Estética del botón */
.cj-rel-viewport > .cj-rel-arrow{
  width:50px !important; height:50px !important;
  border-radius:9px !important;
  border:1px solid var(--cj-arrow-border) !important;
  background:var(--cj-arrow-bg) !important;
  box-shadow:var(--cj-arrow-shadow) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important; z-index:2 !important;
  color:#002041 !important;           /* color del icono (currentColor) */
  line-height:1 !important;
  font-size:30px !important;          /* CLAVE: si el SVG viene en em, esto lo hace grande */
}

/* Oculta cualquier <i> legado */
.cj-rel-viewport > .cj-rel-arrow i{ display:none !important; }

/* Tamaño del SVG: cubrimos cualquier salida del helper cj_svg */
.cj-rel-viewport > .cj-rel-arrow .cj-ico,
.cj-rel-viewport > .cj-rel-arrow svg{
  width:1em !important;               /* 1em = 30px por la regla anterior */
  height:1em !important;
  min-width:1em !important;
  min-height:1em !important;
  display:block !important;
  overflow:visible !important;
  flex:0 0 auto !important;
}

/* Colorea aunque el archivo traiga fill="none" o sólo stroke */
.cj-rel-viewport > .cj-rel-arrow .cj-ico *,
.cj-rel-viewport > .cj-rel-arrow svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
}

/* Hover */
.cj-rel-viewport > .cj-rel-arrow:hover{ filter: brightness(0.97); }
.cj-rel-viewport > .cj-rel-arrow.is-disabled{ opacity:.35; pointer-events:none; }

/* ================= Perf ================= */
.cj-rel-card{ content-visibility:auto; contain-intrinsic-size:300px; }

/* ================= Responsive ================= */
@media (max-width: 640px){
  .cj-rel-viewport{
    grid-template-columns: 1fr !important;
  }
  .cj-rel-viewport > .cj-rel-prev{
    display:none !important;
  }
  .cj-rel-viewport > .cj-rel-track{ grid-column:1 !important; }
  
  .cj-rel-viewport > .cj-rel-arrow{
        width: 80px !important;
        height: 40px !important;
        border-radius: 9px !important;
        border: 1px solid #f7f7f7 !important;
        background: #f7f7f7 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 2 !important;
        color: #002041 !important;
        line-height: 1 !important;
        font-size: 30px !important;
        position: absolute !important;
        top: -50px !important;
        right: 10px !important;
        box-shadow: none !important;
    }
  
}