/********************************************
 * TRILUZ · CSS MÍNIMO LIMPIO
 * Líneas marrones + WhatsApp + hover categorías
 ********************************************/

/********************************************
 * 1. LIMPIEZA FOOTER / LÍNEAS MARRONES
 ********************************************/

footer,
.ss-footer,
.site-footer {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background-color: #FFFFFF !important;
}

footer *,
.ss-footer *,
.site-footer * {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

[style*="#c3b9a7"],
[style*="#C3B9A7"],
[style*="rgb(195, 185, 167)"],
[style*="195, 185, 167"],
[style*="#c8bca9"],
[style*="#C8BCA9"],
[style*="rgb(200, 188, 169)"],
[style*="200, 188, 169"],
[style*="#b18d4f"],
[style*="#B18D4F"],
[style*="rgb(177, 141, 79)"],
[style*="177, 141, 79"] {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

footer::before,
footer::after,
.ss-footer::before,
.ss-footer::after,
.site-footer::before,
.site-footer::after {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  box-shadow: none !important;
}

/********************************************
 * 2. ANULAR BURBUJA BLANCA PERSONALIZADA
 * Deja visible solo el WhatsApp verde oficial
 ********************************************/

.ws-bubble,
.ws-bubble *,
.ws-icon,
.ws-sub {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/********************************************
 * 3. HOVER PARA IMÁGENES DE CATEGORÍAS
 ********************************************/

.categoria-producto {
  cursor: pointer !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
  border-radius: 8px !important;
}

/* Al pasar el mouse */
.categoria-producto:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
  filter: brightness(1.04) !important;
}

/* Al hacer clic: efecto hundido */
.categoria-producto:active {
  transform: translateY(2px) scale(0.98) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.14) !important;
}

/********************************************
 * 4. RESPONSIVE BÁSICO
 ********************************************/

@media (max-width: 768px) {
  .categoria-producto:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .categoria-producto:active {
    transform: scale(0.98) !important;
  }
/* CONTACTO - Reducir alto de mapa */
iframe,
iframe[src*="google"],
iframe[src*="maps"],
.google-map,
.map,
.mapa {
  height: 380px !important;
  max-height: 380px !important;
}
/* ================================
   TRILUZ - Botones verdes en tienda
   ================================ */

/* Botones principales: Comprar ahora / Agregar al carrito */
button,
input[type="submit"],
input[type="button"],
a[class*="button"],
[class*="btn"],
[class*="button"] {
  background-color: #7A977B !important;
  border-color: #7A977B !important;
  color: #ffffff !important;
}

/* Hover */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a[class*="button"]:hover,
[class*="btn"]:hover,
[class*="button"]:hover {
  background-color: #6B866C !important;
  border-color: #6B866C !important;
  color: #ffffff !important;
}

/* Botones redondos de producto: favoritos, WhatsApp, compartir */
[class*="favorite"],
[class*="wishlist"],
[class*="share"],
[class*="whatsapp"] {
  background-color: #7A977B !important;
  border-color: #7A977B !important;
  color: #ffffff !important;
}

/* Botones + y - de cantidad */
button[aria-label*="sumar"],
button[aria-label*="restar"],
button[aria-label*="increment"],
button[aria-label*="decrement"] {
  background-color: #7A977B !important;
  border-color: #7A977B !important;
  color: #ffffff !important;
}
/* TRILUZ - Fondo tienda igual que la Home */

.woocommerce-page,
.woocommerce-page body,
.woocommerce-page #content,
.woocommerce-page .site-content,
.woocommerce-page .content-area,
.woocommerce-page main,
.woocommerce-page .main-content {
    background-color: rgb(122, 151, 123) !important;
}

/* Mantener catálogo, filtros, buscador y tarjetas en blanco */
.woocommerce-page .products,
.woocommerce-page ul.products li.product,
.woocommerce-page .widget,
.woocommerce-page aside,
.woocommerce-page .sidebar,
.woocommerce-page form,
.woocommerce-page .woocommerce-ordering,
.woocommerce-page .woocommerce-result-count,
.woocommerce-page .woocommerce-product-search,
.woocommerce-page input,
.woocommerce-page select {
    background-color: #ffffff !important;
}

/* Títulos sobre fondo verde */
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page .page-title {
    color: #ffffff !important;
}

/* Imágenes de productos sin fondo gris */
.woocommerce-page ul.products li.product img,
.woocommerce-page ul.products li.product .woocommerce-placeholder {
    background-color: #ffffff !important;
    box-shadow: none !important;
}
/* TRILUZ - Forzar fondo verde en página de tienda */

body,
#page,
.site,
.site-content,
.content,
.main,
main,
section,
.container,
.page-content,
.entry-content {
    background-color: rgb(122, 151, 123) !important;
}

/* Mantener bloques internos blancos */
.woocommerce,
.woocommerce-page,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.product,
.products,
.widget,
.sidebar,
aside,
form,
input,
select,
.card,
.box {
    background-color: #ffffff !important;
}

/* Fondo blanco para imágenes y placeholders */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
.woocommerce-placeholder {
    background-color: #ffffff !important;
}

/* Títulos sobre fondo verde */
.page-title,
.entry-title,
h1,
h2 {
    color: #ffffff !important;
}
/* TRILUZ - Forzar fondo verde catálogo */

body #catalogPage,
body #catalogPage section.product-grids.section,
body main section.product-grids.section {
    background: rgb(122, 151, 123) !important;
}
/* TRILUZ - Forzar fondo verde en catálogo / tienda */

body main,
body main > section,
body main section,
body main div#catalogPage,
body main div#catalogPage > section,
body main div#catalogPage section.product-grids,
body main div#catalogPage section.product-grids.section,
#catalogPage,
#catalogPage .product-grids,
#catalogPage .product-grids.section,
.product-grids,
.product-grids.section {
    background: rgb(122, 151, 123) !important;
    background-color: rgb(122, 151, 123) !important;
}

/* Hacer transparentes las capas grandes internas */
#catalogPage .container,
#catalogPage .row,
#catalogPage .col,
#catalogPage [class*="container"],
#catalogPage [class*="wrapper"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Mantener blancos los bloques reales: filtros, buscador y tarjetas */
#catalogPage aside,
#catalogPage .sidebar,
#catalogPage .shop-sidebar,
#catalogPage .filter,
#catalogPage .filters,
#catalogPage .search,
#catalogPage .sort,
#catalogPage form,
#catalogPage input,
#catalogPage select,
#catalogPage .card,
#catalogPage .product,
#catalogPage .product-card,
#catalogPage .single-product,
#catalogPage [class*="product-card"],
#catalogPage [class*="single-product"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Imágenes y placeholders en blanco */
#catalogPage img,
#catalogPage .placeholder,
#catalogPage [class*="placeholder"],
#catalogPage [class*="image"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
}