/* ===== NOVEDADES EN GRID (sin slider) ===== */
.cj-novedades-wrap.cj-novedades--grid {
    max-width: 1200px;
    margin: 3rem auto;
}
/* GRID: 2 → 3 → 4 cols */
.cj-novedades--grid .cj-nov-grid-list{
  list-style:none; margin:8px 0 0; padding:0;
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){  .cj-novedades--grid .cj-nov-grid-list{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .cj-novedades--grid .cj-nov-grid-list{ grid-template-columns:repeat(4,1fr); } }

/* Card */
.cj-novedades--grid .cj-nov-link{
  display:flex; flex-direction:column; gap:6px;
  text-decoration:none; background:transparent; border-radius:12px; overflow:hidden;
  transition:transform .12s ease;
}
.cj-novedades--grid .cj-nov-link:hover{ transform:translateY(-2px); }

/* Imagen */
.cj-novedades--grid .cj-nov-figure{
  margin:0; background:transparent; display:flex; align-items:center; justify-content:center;
  min-height:160px; filter:drop-shadow(0 0 7px #c8c8c8);
}
.cj-novedades--grid .cj-nov-figure img{
  max-width:100%; max-height:190px; object-fit:contain; display:block;
}

/* Info compacta */
.cj-novedades--grid .cj-nov-info.camiseta-card{ padding:0 6px 6px; background:transparent; }
.cj-novedades--grid .cj-nov-info .title{
  font-size:.95rem; line-height:1.25; color:#002041; margin:6px 0 4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Rating */
.cj-novedades--grid .camiseta-card .card-rating{ display:flex; gap:5px; line-height:16px; margin:0 0 4px; padding-left:0; }
.cj-novedades--grid .card-rating .avg{ font-weight:700; font-size:12px; color:#0F2D4C; }
.cj-novedades--grid .card-rating .count{ font-size:12px; color:#8aa0b5; }
.cj-novedades--grid .card-rating .stars{ font-size:13px; color:#f1b400; letter-spacing:.5px; }

/* Precio */
.cj-novedades--grid .cj-nov-info .price{
  color:#000; display:flex; gap:6px; margin:0; padding:0; align-items:baseline; margin-top:-3px;
}
.cj-novedades--grid .cj-nov-info .price del span{ font-size:14px; color:#555; font-weight:600; text-decoration:line-through; display:flex; }
.cj-novedades--grid .cj-nov-info .price ins{ color:#002041; font-size:18px; font-weight:600; }

/* Limpiar restos del antiguo slider */
.cj-novedades--grid .cj-nov-scroller,
.cj-novedades--grid .cj-novedades-scroller{ overflow:visible; padding:0; margin:0; }
.cj-novedades--grid .cj-novedades-list:not(.cj-nov-grid-list){ display:block; }
.cj-novedades--grid .cj-nov-arrows{ display:none; }

/* Mostrar por tandas */
.cj-novedades--grid .cj-novedades-card.is-hidden{ display:none; }

/* Altura animada (Ver más/menos) */
.cj-novedades--grid .cj-nov-anim{ overflow:hidden; height:auto; will-change:height; }

/* Botón: solo flecha cambia (sin hover/estilos extra) */
.cj-novedades--grid .cj-nov-morewrap{ display:flex; justify-content:center; margin-top:12px; }
.cj-novedades--grid .cj-nov-morebtn{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid #ededed;
    padding: 0 23px;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.cj-novedades--grid .cj-nov-arrow{ width:16px; height:16px; display:inline-block; }
.cj-novedades--grid .cj-rot-90{ transform:rotate(90deg); }   /* flecha abajo */
.cj-novedades--grid .cj-rot--90{ transform:rotate(-90deg); } /* flecha arriba */

/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce){
  .cj-novedades--grid .cj-nov-link{ transition:none; }
  .cj-novedades--grid .cj-nov-anim{ transition:none; }
}
/* ===== OPTIMIZACIÓN MÓVIL (≤ 480px) ===== */
@media (max-width: 480px){
  /* 2 columnas firmes en móvil + huecos más compactos */
  .cj-nov-grid-list{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
  }

  /* Cabecera más compacta */
  .cj-novedades-head{
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 0 auto 6px;
  }
  .cj-novedades-title{
    font-size: clamp(18px, 5.5vw, 22px);
  }

  /* Tarjeta: menos padding y alturas más bajas para la imagen */
  .cj-nov-figure{
    min-height: 120px;
    filter: drop-shadow(0 0 5px #c8c8c8);
  }
  .cj-nov-figure img{
    max-height: 140px;
  }
  .cj-nov-info.camiseta-card{
    padding: 0 4px 8px;
  }

  /* Tipografías y espacios compactos */
  .cj-nov-info .title{
    font-size: .88rem;
    margin: 4px 0 3px;
  }
  .camiseta-card .card-rating{
    gap: 4px;
    margin: 0 0 3px 0;
  }
  .card-rating .avg,
  .card-rating .count{ font-size: 11px; }
  .card-rating .stars{ font-size: 12px; }

  .cj-nov-info .price{
    margin-top: -2px;
    gap: 5px;
  }
  .cj-nov-info .price ins{ font-size: 16px; }
  .cj-nov-info .price del span{ font-size: 12px; }

  /* Botón Ver más/Ver menos: área táctil mínima, sin cambiar estilo */
  .cj-nov-morewrap{ margin-top: 10px; }
  .cj-nov-morebtn{
    padding: 10px 12px; /* área 44px mínimo contando la línea */
    min-height: 44px;
  }
  .cj-nov-arrow{ width: 14px; height: 14px; }
}

/* Extra compacto en pantallas muy pequeñas (≤ 360px) */
@media (max-width: 360px){
  .cj-nov-figure{ min-height: 100px; }
  .cj-nov-figure img{ max-height: 120px; }
  .cj-nov-info .title{ font-size: .84rem; }
  .cj-nov-info .price ins{ font-size: 15px; }
}
/* === FIX: evitar tarjetas recortadas en 2 columnas (móvil y desktop estrecho) === */
.cj-nov-grid,
.cj-novedades-wrap { overflow: visible; }

.cj-nov-grid-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* 2 col base */
  gap: 14px;
}

/* 🔑 Permitir que las tarjetas encojan dentro de la columna */
.cj-novedades-card,
.cj-nov-link,
.cj-nov-figure,
.cj-nov-info { 
  min-width: 0; 
}

/* Asegurar que nada desborde horizontalmente */
.cj-nov-link { width: 100%; box-sizing: border-box; }
.cj-nov-figure, .cj-nov-figure img { max-width: 100%; }
.cj-nov-figure { overflow: visible; } /* el drop-shadow no corta el contenido */

/* Breakpoints: 3 y 4 columnas sin recortes */
@media (min-width: 640px){
  .cj-nov-grid-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .cj-nov-grid-list { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* (Opcional) Ajustar alturas para pantallas estrechas */
@media (max-width: 480px){
  .cj-nov-figure{ min-height: 120px; }
  .cj-nov-figure img{ max-height: 140px; }
}