/* ============================================================
   DON BARBERO — GRID DE PRODUCTOS SOLO EN .db-home-grid
   ============================================================ */

/* Fondo general de la sección */
.db-home-grid{
  background:#FFFFFF !important;
}

/* Lista de productos */
.db-home-grid .woocommerce ul.products{
  margin:0 !important;
  padding:0 !important;
}

/* Tarjeta de producto */
.db-home-grid .woocommerce ul.products li.product{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:hidden !important;
  position:relative !important;
}

/* Imagen base */
.db-home-grid .woocommerce ul.products li.product img{
  width:100% !important;
  height:auto !important;
  max-height:330px !important;
  object-fit:contain !important;
  background:transparent !important;
  display:block !important;
}

/* Contenidos inferiores (nombre + precio) */
.db-home-grid .woocommerce ul.products li.product .woocommerce-loop-product__title,
.db-home-grid .woocommerce ul.products li.product .price{
  padding:0 10px 4px !important;
  display:block !important;
  position:relative !important;
  z-index:5 !important;
  background:Transparent !important;
}

/* TÍTULO */
.db-home-grid .woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-weight:400 !important;
  margin:6px 0 2px !important;
  line-height:1.3 !important;
  min-height:34px !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}

/* ===== PRECIOS – DON BARBERO (.db-home-grid) ===== */

/* Contenedor del precio */
.db-home-grid .woocommerce ul.products li.product .price{
  margin-top:0 !important;
  padding:0 10px 6px !important;
  line-height:1.2 !important;
  min-height:18px !important;
}

/* Precio normal (sin descuento) y precio rebajado */
.db-home-grid .woocommerce ul.products li.product .price,
.db-home-grid .woocommerce ul.products li.product .price .woocommerce-Price-amount,
.db-home-grid .woocommerce ul.products li.product .price .amount,
.db-home-grid .woocommerce ul.products li.product .price bdi{
  font-weight:700 !important;
 
}

/* Precio tachado (cuando haya rebaja) */
.db-home-grid .woocommerce ul.products li.product .price del,
.db-home-grid .woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.db-home-grid .woocommerce ul.products li.product .price del .amount,
.db-home-grid .woocommerce ul.products li.product .price del bdi{
  margin-left:2px !important;
  margin-Right:6px !important;
  text-decoration:line-through !important;
}

/* Ocultar botones (Read more / Add to cart) SOLO aquí */
.db-home-grid .woocommerce ul.products li.product .button{
  display:none !important;
}

/* OCULTAR COMPLETAMENTE EL BADGE 'SALE' DE WOOCOMMERCE */
.db-home-grid .woocommerce span.onsale{
  display:none !important;
}

/* ===============================================
   BADGES ALINEADOS ESTILO MONOIC
   =============================================== */

/* Contenedor general (dentro de cada producto) */
.db-home-grid .woocommerce ul.products li.product{
  position:relative !important;
}

/* BADGE 'nuevo' (tag) */
.db-home-grid .woocommerce ul.products li.product.product_tag-nuevo::before{
  content:"NUEVO";
  position:absolute;
  top:1px;
  left:20px;
  color:#fff;
  background:transparent;
  padding:0;
  font-size:16px;
  font-weight:400;
  z-index:20;
  line-height:1;
  font-weight: Bold;
  	
}

/* BADGE % OFF (automático con snippet) */
.db-home-grid .db-sale-badge{
  position:absolute;
  top:1px;
  right:20px;
  background:#fff;
  color:#000;
  padding:4px 14px;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  z-index:20;
  border-radius:5px;
  line-height:1;
}

/* ============================================================
   FIX DEFINITIVO — tp-image-hover
   Centrar y igualar tamaño de la imagen hover
   ============================================================ */

/* Contenedor de la imagen hover */
.db-home-grid .woocommerce ul.products li.product .tp-image-hover{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
}

/* Imagen hover */
.db-home-grid .woocommerce ul.products li.product .tp-image-hover img{
  width:100% !important;
  height:100% !important;
  max-height:330px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}

/* ============================================================
   DON BARBERO — HOVER ESTILO MONOIC (FADE PURO)
   ============================================================ */

/* Contenedor del link como escenario */
.db-home-grid .woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.db-home-grid .woocommerce ul.products li.product a.woocommerce-loop-product__link{
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
  min-height:30px !important;
}

/* Imagen principal y hover: mismas dimensiones y apiladas */
.db-home-grid .woocommerce ul.products li.product img.wp-post-image,
.db-home-grid .woocommerce ul.products li.product .tp-image-hover{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:330px !important;
}

/* Imagen principal */
.db-home-grid .woocommerce ul.products li.product img.wp-post-image{
  object-fit:contain !important;
  object-position:center center !important;
  background:#fff !important;
  opacity:1 !important;
  transition:opacity .65s ease !important;
  z-index:2 !important;
}

/* Capa hover (tp-image-hover) */
.db-home-grid .woocommerce ul.products li.product .tp-image-hover{
  display:block !important;
  visibility:hidden !important;
  opacity:0 !important;
  transition:opacity .65s ease, visibility 0s linear .65s !important;
  z-index:3 !important;
}

/* Imagen dentro de tp-image-hover */
.db-home-grid .woocommerce ul.products li.product .tp-image-hover img{
  width:100% !important;
  height:330px !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Hover: cross-fade */
.db-home-grid .woocommerce ul.products li.product:hover img.wp-post-image{
  opacity:0 !important;
}

.db-home-grid .woocommerce ul.products li.product:hover .tp-image-hover{
  visibility:visible !important;
  opacity:1 !important;
  transition:opacity .65s ease, visibility 0s !important;
}



/* Imagen principal visible */
.db-home-grid .woocommerce ul.products li.product picture.tp-image{
  opacity:1;
  z-index:2;
  transition:opacity .5s ease;
}

/* Imagen hover oculta */
.db-home-grid .woocommerce ul.products li.product picture.tp-image-hover{
  opacity:0;
  z-index:3;
  transition:opacity .5s ease;
}

/* Hover */
.db-home-grid .woocommerce ul.products li.product:hover picture.tp-image{
  opacity:0;
}

.db-home-grid .woocommerce ul.products li.product:hover picture.tp-image-hover{
  opacity:1;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:767px){

  .db-home-grid .woocommerce ul.products li.product img{
    max-height:250px !important;
  }

  .db-home-grid .woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
  .db-home-grid .woocommerce ul.products li.product a.woocommerce-loop-product__link{
    min-height:250px !important;
  }

  .db-home-grid .woocommerce ul.products li.product img.wp-post-image,
  .db-home-grid .woocommerce ul.products li.product .tp-image-hover,
  .db-home-grid .woocommerce ul.products li.product .tp-image-hover img{
    height:250px !important;
  }

  .db-home-grid .woocommerce ul.products li.product .woocommerce-loop-product__title{
    line-height:1.35 !important;
    margin:8px 0 2px !important;
    min-height:32px !important;
    padding:0 8px 4px !important;
  }

  .db-home-grid .woocommerce ul.products li.product .price{
    padding:0 8px 8px !important;
    min-height:18px !important;
  }

  .db-home-grid .woocommerce ul.products li.product .price,
  .db-home-grid .woocommerce ul.products li.product .price .woocommerce-Price-amount,
  .db-home-grid .woocommerce ul.products li.product .price .amount,
  .db-home-grid .woocommerce ul.products li.product .price bdi{
  }

  .db-home-grid .woocommerce ul.products li.product.product_tag-nuevo::before{
    top:1px;
    left:12px;
    font-size:10px;
  }

  .db-home-grid .db-sale-badge{
    top:1px;
    right:20px;
    font-size:10px;
    padding:3px 8px;
  }
}

/* =========================================================
   DON BARBERO — HOVER FIX DEFINITIVO
   principal se oculta, secundaria reemplaza
   ========================================================= */

/* contenedor real */
.db-home-grid .woocommerce ul.products li.product .tp-image-wrapper{
  position:relative !important;
  overflow:hidden !important;
}

/* imagen principal */
.db-home-grid .woocommerce ul.products li.product .tp-image-wrapper > img.tp-image{
  position:relative !important;
  z-index:1 !important;
  opacity:1 !important;
  visibility:visible !important;
  transition:opacity .28s ease !important;
}

/* segunda imagen tipo picture */
.db-home-grid .woocommerce ul.products li.product picture.tp-image-hover{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .28s ease !important;
}

.db-home-grid .woocommerce ul.products li.product picture.tp-image-hover img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* segunda imagen cuando Woo imprime otra img dentro del wrapper */
.db-home-grid .woocommerce ul.products li.product .tp-image-wrapper > img + img{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .28s ease !important;
}

/* -------- CASO 1: hover image nativa -------- */
.db-home-grid .woocommerce ul.products li.product:hover picture.tp-image-hover ~ nothing{
}

/* ocultar principal solo si existe picture hover */
.db-home-grid .woocommerce ul.products li.product:has(picture.tp-image-hover):hover .tp-image-wrapper > img.tp-image{
  opacity:0 !important;
  visibility:hidden !important;
}

.db-home-grid .woocommerce ul.products li.product:has(picture.tp-image-hover):hover picture.tp-image-hover{
  opacity:1 !important;
  visibility:visible !important;
}

/* -------- CASO 2: segunda img real en galería -------- */
.db-home-grid .woocommerce ul.products li.product:has(.tp-image-wrapper > img.tp-image + img):hover .tp-image-wrapper > img.tp-image,
.db-home-grid .woocommerce ul.products li.product:has(.tp-image-wrapper > img + img):hover .tp-image-wrapper > img:first-child{
  opacity:0 !important;
  visibility:hidden !important;
}

.db-home-grid .woocommerce ul.products li.product:has(.tp-image-wrapper > img.tp-image + img):hover .tp-image-wrapper > img.tp-image + img,
.db-home-grid .woocommerce ul.products li.product:has(.tp-image-wrapper > img + img):hover .tp-image-wrapper > img + img{
  opacity:1 !important;
  visibility:visible !important;
}