/* =====================================================================
   card_moderna.css — aspecto moderno de las cards de producto
   (.cards-productos). COMPARTIDO por el home y la página de categorías.
   No depende de body.home-2026: aplica donde se cargue este archivo.
   ===================================================================== */
.cards-productos.card{
  border:1px solid #e9ecf1 !important;
  border-radius:16px !important;
  box-shadow:0 3px 14px rgba(20,25,40,.06) !important;
  overflow:hidden;background:#fff;
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.cards-productos.card:hover{
  box-shadow:0 12px 28px rgba(20,25,40,.14) !important;
  border-color:#ffcf9e !important;
  transform:translateY(-3px);
}
.cards-productos .card-custom-img{
  justify-content:center !important;
  padding:18px 14px 4px !important;
}
.cards-productos .card-custom-img img{
  max-height:160px;width:auto !important;object-fit:contain;
}
/* sacar las líneas duras y dar aire */
.cards-productos .row.border-top{border-top:none !important;}
.cards-productos .card-body{padding:4px 14px 14px !important;}

/* TÍTULO: mismo tamaño que las cards de "¿Qué estás buscando?" (1.95rem),
   pero SIN bold y con trazo fino (no ancho) */
.cards-productos .card-title.font-120{
  font-family:'Poppins',system-ui,sans-serif !important;
  font-size:1.75rem !important;
  font-weight:400 !important;          /* normal, sin bold ni letra ancha */
  line-height:1.2;color:#23262c;
}
/* CÓDIGO: tenue y sin bold */
.cards-productos .card-title:not(.font-120){
  font-size:.92rem !important;
  font-weight:400 !important;
  color:#9aa1ab !important;
  padding-top:2px !important;
}
/* precio */
.cards-productos .precio_prod{
  font-family:'Poppins',system-ui,sans-serif;
  font-size:1.45rem !important;color:#1f2127;
}
/* botón carrito redondo moderno */
.cards-productos .carrito_icono{
  background:#ff8000 !important;border-radius:50% !important;
  height:46px !important;width:46px !important;float:none !important;
  display:flex !important;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(255,128,0,.35);transition:.16s;
}
.cards-productos .carrito_icono span{color:#fff !important;margin-top:0 !important;font-size:1.1rem;}
.cards-productos .carrito_icono:hover{background:#e96f00 !important;}

/* =====================================================================
   Página de categorías en CELULAR (body.categoria-2026)
   La card va horizontal (foto izquierda + texto derecha). Por defecto la
   foto quedaba muy chica, el título enorme y sobraba espacio vacío.
   Acá se balancea: foto más grande y centrada, tipografía a escala mobile.
   No afecta al home (usa .hsj-cards-6) ni al escritorio.
   ===================================================================== */
@media (max-width:767.98px){
  /* Foto: ocupa ~42% del ancho y se centra verticalmente */
  body.categoria-2026 .cards-productos .card-custom-img{
    flex:0 0 42% !important;max-width:42% !important;
    padding:10px 6px !important;align-items:center !important;
  }
  body.categoria-2026 .cards-productos .card-custom-img img{
    max-height:130px !important;max-width:100% !important;width:auto !important;
  }
  /* Texto: ocupa el resto, con menos padding lateral */
  body.categoria-2026 .cards-productos .card-body{padding:6px 8px 8px !important;}
  body.categoria-2026 .cards-productos .card-title.font-120{
    font-size:1.34rem !important;line-height:1.2 !important;padding-top:4px !important;
  }
  body.categoria-2026 .cards-productos .card-title:not(.font-120){font-size:.8rem !important;}
  body.categoria-2026 .cards-productos .precio_prod{font-size:1.32rem !important;}
  body.categoria-2026 .cards-productos .carrito_icono{height:40px !important;width:40px !important;}
  body.categoria-2026 .cards-productos .badge{font-size:.62rem !important;}
  /* quitar filas vacías que estiraban la card */
  body.categoria-2026 .cards-productos .card-text:empty{display:none !important;}
}