/* =========================================================================
   Cards de producto editoriales — Venados Store
   Aplica a home (módulo products) y a páginas de categoría (.product-grid .product-thumb).
   Escritorio: card limpia + hover (Comprar, Vista rápida, 2ª foto).
   Móvil: card limpia sin hover.
   2026-07-23
   ========================================================================= */

/* ---- Centrar el grid de productos ----
   El grid del home se extendía a ~1841px (más ancho que el contenedor del
   sitio, 1540px) con padding asimétrico → se veía descuadrado en 16:9.
   Lo limitamos al ancho del sitio y centramos las columnas. */
.main-products.auto-grid{ justify-content:center !important; }
@media (min-width:992px){
  .module-products .auto-grid-items{
    max-width: var(--content-max-width, 1540px);
    padding-left:0 !important; padding-right:0 !important;
    justify-content:center !important;
  }
}

/* ------------------------------ Card ---------------------------------- */
.product-grid .product-thumb{
  position:relative;
  background:#FCFBFA;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(23,17,15,.05), 0 1px 3px rgba(23,17,15,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.product-grid .product-thumb:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(23,17,15,.13); }

/* Tile de imagen: blanco puro, foto grande centrada */
.product-grid .product-thumb .image-group,
.product-grid .product-thumb .image{ margin:0 !important; border:0 !important; background:#fff; position:relative; }
.product-grid .product-thumb .product-img{ display:block; background:#fff; }
.product-grid .product-thumb .product-img > div{ position:relative; aspect-ratio:4/5; }
.product-grid .product-thumb .product-img img{
  position:absolute; inset:0; width:100% !important; height:100% !important;
  object-fit:contain !important; padding:7% 9%;
}
/* 2ª foto (espalda) al hover donde exista */
.product-grid .product-thumb .product-img .img-second{ opacity:0; transition:opacity .45s ease; }
.product-grid .product-thumb:hover .product-img .img-second{ opacity:1; }
.product-grid .product-thumb .product-img.has-second-image:hover .img-first{ opacity:0; }

/* ------------------------------ Badges -------------------------------- */
/* Etiquetas demo/placeholder ("Custom Label", "Another Label"): idealmente
   quitarlas en el config de Journal; mientras, se ocultan con alta especificidad. */
html body .product-thumb .product-labels-outside .product-label-527,
html body .product-thumb .product-labels-outside .product-label-528{ display:none !important; }

/* Etiqueta real como pill compacta arriba-izquierda (no barra full-width). */
.product-grid .product-thumb .product-labels{ text-align:left !important; }
.product-grid .product-thumb .product-labels .product-label,
.product-grid .product-thumb .product-labels-outside .product-label{
  display:inline-block !important; width:auto !important; max-width:max-content !important;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
}
.product-grid .product-thumb .product-labels .product-label strong{ font-weight:700; }

/* Color de marca para el badge "Nuevo" (#29, hoy azul) → oscuro. Global. */
html body .product-thumb .product-labels .product-label-29{
  background:#171311 !important; color:#fff !important; border:0 !important; box-shadow:0 1px 4px rgba(0,0,0,.15);
}
html body .product-thumb .product-labels .product-label-29 strong{ color:#fff !important; background:transparent !important; }

/* Badge de descuento (listón "-25%", label-28) → esquina superior DERECHA,
   para que no choque con "Nuevo"/"Más Vendido" (arriba-izquierda). Global. */
html body .product-thumb .product-labels .product-label-28{
  left:auto !important; right:0 !important;
}

/* --------------------------- Quitar ruido ----------------------------- */
.product-grid .product-thumb .rating,
.product-grid .product-thumb .stats,
.product-grid .product-thumb .stepper,
.product-grid .product-thumb .stock,
.product-grid .product-thumb .description{ display:none !important; }

/* ------------------------------ Caption ------------------------------- */
.product-grid .product-thumb .caption{
  position:relative;
  text-align:left !important;
  padding:12px 13px 15px !important;
  background:#FCFBFA;
}
.product-grid .product-thumb .caption .name{ margin:0 0 6px !important; }
.product-grid .product-thumb .caption .name a{
  font-size:14px; font-weight:600; line-height:1.32; color:#17110F !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Precio limpio y fuerte */
.product-grid .product-thumb .price{ padding:0 !important; border:0 !important; margin:0 !important; }
.product-grid .product-thumb .price-normal,
.product-grid .product-thumb .price-new{
  font-size:16px; font-weight:800; letter-spacing:-.01em; color:#17110F !important;
  font-variant-numeric:tabular-nums;
}
.product-grid .product-thumb .price-old{ font-size:13px; color:#8A807A; font-weight:400; }
.product-grid .product-thumb .product-labels-price .product-label{
  background:transparent !important; color:#8A807A !important; padding:0 5px 0 0 !important;
  font-size:12px; font-weight:400;
}

/* ----------------- Botones (Journal los revela en hover) -------------- */
/* Reestilizado ligero, sin pelear la lógica de revelado de Journal. */
.product-grid .product-thumb .stepper{ display:none !important; }        /* sin selector de cantidad */
.product-grid .product-thumb .btn-cart{
  background:#171311 !important; color:#fff !important; border:0 !important;
  border-radius:9px; font-size:13px; font-weight:700; letter-spacing:.02em;
  padding:9px 14px; min-height:40px;
}
.product-grid .product-thumb .btn-cart:hover{ background:#D6112B !important; }
/* Favoritos como botón compacto */
.product-grid .product-thumb .btn-wishlist{
  background:rgba(23,17,15,.06) !important; color:#17110F !important; border:0 !important;
  border-radius:9px;
}
.product-grid .product-thumb .btn-wishlist:hover{ color:#D6112B !important; }

/* Contraste del carrito (Journal lo pinta gris) — GLOBAL, alta especificidad,
   para que el icono se vea bien en grid, lista o donde aparezca. */
html body .product-thumb .btn-cart{ background:#171311 !important; border:0 !important; }
html body .product-thumb .btn-cart,
html body .product-thumb .btn-cart *,
html body .product-thumb .btn-cart::before{ color:#fff !important; }
html body .product-thumb .btn-cart:hover{ background:#D6112B !important; }
html body .product-thumb .btn-cart:hover,
html body .product-thumb .btn-cart:hover *,
html body .product-thumb .btn-cart:hover::before{ color:#fff !important; }

/* ------------------------------ Móvil --------------------------------- */
@media (max-width:991px){
  .product-grid .product-thumb{ box-shadow:none; background:transparent; border-radius:0; }
  .product-grid .product-thumb:hover{ transform:none; box-shadow:none; }
  .product-grid .product-thumb .image-group,
  .product-grid .product-thumb .image,
  .product-grid .product-thumb .product-img{ border-radius:8px; overflow:hidden; }
  .product-grid .product-thumb .caption{ background:transparent; padding:8px 2px 0 !important; }
  /* En móvil: card limpia (imagen + nombre + precio + badge). Sin barra de
     botones ni vista rápida — se toca la card para abrir/comprar (el sistema
     de posicionado de botones de Journal no encaja limpio en táctil). */
  .product-grid .product-thumb .buttons-wrapper,
  .product-grid .product-thumb .quickview-button{ display:none !important; }
  .product-grid .product-thumb .product-img .img-second{ display:none; }   /* sin swap en táctil */
  /* Proporción cuadrada en móvil (fotos de producto son cuadradas) */
  .product-grid .product-thumb .product-img > div{ aspect-ratio:1/1; }
}