@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//itmarket.cl/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.4.1") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//itmarket.cl/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//itmarket.cl/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//itmarket.cl/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//itmarket.cl/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//itmarket.cl/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//itmarket.cl/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//itmarket.cl/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//itmarket.cl/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Metropolis", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 14px;
	--wd-title-font: "Metropolis", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Metropolis", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: var(--wd-text-font);
	--wd-widget-title-font: "Metropolis", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Metropolis", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(4,146,72);
	--wd-alternative-color: rgb(209,59,70);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(85,128,99);
	--btn-accented-bgcolor-hover: rgb(72,109,84);
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url(https://itmarket.cl/wp-content/uploads/2021/10/retail-2-popup.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(255,255,255);
	background-image: none;
}
.page :is(.wd-page-content, .whb-header) {
	background-color: rgb(242,242,242);
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #333;
--btn-accented-color-hover: #333;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 0px;
}



.wd-page-title {
background-color: rgb(255,255,255);
}

@font-face {
	font-family: "Metropolis";
	src: url("//itmarket.cl/wp-content/uploads/2021/10/Metropolis-Regular.woff2") format("woff2"), 
url("//itmarket.cl/wp-content/uploads/2021/10/Metropolis-Regular.woff") format("woff");
	font-weight: 400;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "Metropolis";
	src: url("//itmarket.cl/wp-content/uploads/2021/10/Metropolis-Bold.woff2") format("woff2"), 
url("//itmarket.cl/wp-content/uploads/2021/10/Metropolis-Bold.woff") format("woff");
	font-weight: 600;
	font-display:swap;
	font-style: normal;
}

.whb-header-bottom {
  background-color: #cd2b37;
}

.wd-tools-element > a{
	color: #fff;
}

.wd-tools-element {
  --wd-header-el-color-hover: #cd2b37;
}

.whb-color-dark:not(.whb-with-bg) {
    background: linear-gradient(0deg, #009146 50%, #fff 50%);
}

.wd-sticky-nav {
    padding-top: 150px;
}

.wd-sticky-nav:is(:hover,.wd-opened) {
    padding-top: 150px;
}

.wd-product.wd-hover-fw-button .wd-add-btn>a {
    background-color: #cd2b37;
}

.wd-product.wd-hover-fw-button .wd-add-btn>a:hover {
    background-color: #009146;
}

*, *:before, *:after {
.single_add_to_cart_button {
    background-color: #009146;
	}
}

/* 1. Forzar a que la fila contenedora del logo ignore los límites y use el 100% real */
.whb-main-header .whb-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. Hacer que la columna del logo tome todo el espacio disponible */
.whb-main-header .whb-column.whb-main-header-left {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 3. Asegurar que la imagen del logo o el bloque interno no tenga topes de ancho */
.site-logo, .site-logo a, .site-logo img {
    max-width: 100% !important;
    width: 100% !important;
    display: block;
}

.single_add_to_cart_button:hover {
    background-color: #cd2b37;
	}

/* ==========================================================================
   MENÚ DE ESCRITORIO (SUBMENÚS): EFECTO PREMIUM FLUIDO Y MODERNIZADO
   ========================================================================== */

/* 1. Contenedor del submenú: Efecto "Glassmorphism" con sombras suaves */
.wd-dropdown-menu,
.wd-dropdown,
.dropdown-inner,
.wd-sub-menu,
.wd-sub-menu ul,
.wd-dropdown-menu ul,
.wd-dropdown-category {
    background: rgba(0, 145, 70, 0.95) !important; /* Verde corporativo con sutil transparencia */
    backdrop-filter: blur(8px) !important;        /* Difumina lo que está detrás para un look moderno */
    border-radius: 12px !important;               /* Esquinas redondeadas premium */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important; /* Sombra profunda pero suave */
    padding: 8px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 2. Items del submenú individuales */
.wd-sub-menu li,
.wd-dropdown-menu li {
    padding: 2px 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* 3. Enlaces en estado normal: Texto limpio y estilizado */
.wd-sub-menu li a,
.wd-dropdown-menu li a,
.wd-dropdown-menu th,
.wd-dropdown-menu td {
    color: #ffffff !important;
    font-weight: 600 !important; 
    font-size: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px !important;
    width: 100% !important;
    border-radius: 8px !important; /* Redondeado interno para las celdas */
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

/* 4. Estado Hover: Cambio suave con micro-elevación visual */
.wd-sub-menu li:hover > a,
.wd-dropdown-menu li:hover > a,
.wd-sub-menu li a:hover,
.wd-dropdown-menu li a:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    transform: translateX(4px) !important; /* Desplazamiento sutil hacia la derecha al pasar el mouse */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Flechas indicadoras */
.wd-sub-menu li.menu-item-has-children > a:after,
.wd-dropdown-menu li.menu-item-has-children > a:after {
    color: #ffffff !important;
    transition: transform 0.2s ease !important;
}
.wd-sub-menu li.menu-item-has-children:hover > a:after,
.wd-dropdown-menu li.menu-item-has-children:hover > a:after {
    color: #000000 !important;
    transform: translateX(2px) !important;
}

/* ==========================================================================
   1. ELIMINAR CUALQUIER RUIDO, CATEGORÍA O ETIQUETA EN TARJETAS MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
    /* Ocultar de raíz categorías principales, secundarias, sub-categorías y comas sueltas */
    .product-grid-item .wd-product-cats,
    .products-grid .wd-product-cats,
    .wd-product-cats a,
    .product-grid-item .meta-categories,
    .wd-product-cats,
    .product-grid-item [class*="cat"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Grilla simétrica y alineación forzada */
    .products-element-holder, .products-grid {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .product-grid-item, .product-wrapper {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 100% !important;
        padding: 10px !important;
    }

    .product-element-bottom {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important; 
        justify-content: flex-start !important;
    }

    /* Ajuste del título para nombres largos (Evita superposiciones) */
    .wd-entities-title, .product-title, .product-title a {
        display: block !important;
        white-space: normal !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 48px !important; /* Mantiene base simétrica */
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-top: 5px !important;
        margin-bottom: 12px !important; /* Espacio de seguridad para el logo/precio */
        text-align: center !important;
    }

    /* Contenedor del precio abajo */
    .price-and-button, .wd-product-footer, .product-element-bottom .price {
        margin-top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   2. REPARACIÓN DEL MENÚ MÓVIL: FORZAR FONDO DESDE EL INICIO (EVITA TEXTO INVISIBLE)
   ========================================================================== */

/* Forzar el fondo translúcido a TODOS los estados del contenedor del menú móvil de WoodMart */
.wd-mobile-nav,
.mobile-menu-sidebar,
.mobile-menu-sidebar .wd-popup-inner,
.wd-mobile-nav .wd-nav-mobile,
.wd-mobile-nav-panel,
div[class*="mobile-nav"] {
    background: rgba(205, 43, 55, 0.7) !important; /* Verde corporativo firme con transparencia sutil */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

/* Garantizar que el buscador inicial sea visible y moderno */
.wd-mobile-nav .wd-search-form {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 30px !important;
    padding: 6px 14px !important;
    margin: 15px 10px !important;
}

.wd-mobile-nav .wd-search-form input[type="text"] {
    color: #ffffff !important;
}
.wd-mobile-nav .wd-search-form input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}
.wd-mobile-nav .wd-search-form .searchsubmit {
    color: #ffffff !important;
}

/* Asegurar que los botones superiores e ítems iniciales tengan contraste blanco */
.wd-mobile-nav .wd-nav-tabs li a {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
    border-radius: 30px !important;
}

.wd-mobile-nav .wd-nav-tabs li.wd-active a {
    background-color: #cd2b37 !important;
    box-shadow: 0 4px 12px rgba(205, 43, 55, 0.2) !important;
}

/* Todos los enlaces del menú móvil en blanco y negrita desde que abre */
.wd-nav-mobile li a, 
.wd-nav-mobile .wd-nav-link,
.wd-nav-mobile li a .nav-link-text {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

/* Color de las flechas del menú al inicio */
.wd-nav-mobile li .wd-key,
.wd-nav-mobile li [class*="icon"] {
    color: rgba(255, 255, 255, 0.8) !important;
}


/* --- ESTILO ESTILO PREMIUM PARA TARJETAS DE PRODUCTO --- */

/* 1. Estructura base de la tarjeta (Borde sutil y esquinas redondeadas) */
.product-grid-item,
.wd-product.wd-hover-fw-button,
.product-wrapper {
    border: 1px solid #eef0f2 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    background-color: #ffffff !important;
    transition: all 0.3s ease-in-out !important;
    box-sizing: border-box !important;
}

/* 2. Ajuste de la imagen del producto (Centrada y limpia) */
.product-element-top,
.wd-product-image {
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: #f7f7f7 !important; /* Fondo suave por si la foto tiene transparencia */
    margin-bottom: 15px !important;
}

.product-element-top img {
    padding: 10px !important; /* Espacio para que el producto respire dentro de la caja */
    mix-blend-mode: multiply; /* Fusiona fondos blancos con el gris claro */
}

/* 3. Efecto Hover (Elevación y cambio de borde al pasar el mouse) */
.product-grid-item:hover,
.wd-product.wd-hover-fw-button:hover {
    transform: translateY(-5px) !important; /* Levanta la tarjeta */
    border-color: #cd2b37 !important; /* Cambia el borde a tu rojo de marca (puedes usar #009146 si prefieres verde) */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important; /* Sombra suave difuminada */
}

/* 4. Tipografías y textos limpios */
.wd-entities-title,
.product-title {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #222222 !important;
    margin-bottom: 8px !important;
}

.sku, .wd-sku {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888888 !important;
}

/* 5. Precio destacado */
.price, .price inset {
    font-weight: 700 !important;
    color: #cd2b37 !important; /* Precio en color de marca */
    font-size: 15px !important;
}

/* 6. Botón de agregar al carrito estilo "Icono Limpio" en la esquina */
.wd-add-btn > a,
.wd-add-to-cart-icon > a {
    border-radius: 4px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

/* --- ALINEACIÓN INTERNA Y ALTURA HOMOGÉNEA --- */

/* 1. Forzar a que todas las tarjetas de la grilla tengan la misma altura máxima por fila */
.products-element-holder, 
.products-grid {
    display: flex !important;
    flex-wrap: wrap !important;
}

.product-grid-item,
.wd-product.wd-hover-fw-button,
.product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Empuja los elementos superiores arriba y los inferiores abajo */
    height: 100% !important; /* Obliga a la tarjeta a estirarse al alto de la más alta de su fila */
}

/* 2. Controlar el contenedor de la información (Título, SKU, Precio) */
.product-image-summary,
.wd-product-header,
.product-element-bottom {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* Hace que este bloque use todo el espacio disponible */
}

/* ==========================================================================
   OPTIMIZACIÓN DE TARJETAS: IMÁGENES MAXIMIZADAS Y BOTONES AL FONDO
   ========================================================================== */

/* 1. Ocultar los botones flotantes que se camuflan sobre la imagen */
.product-element-top .wd-buttons-struct,
.product-element-top .wd-buttons,
.product-grid-item .wd-buttons,
.wd-product-image .wd-buttons {
    display: none !important; /* Desaparecen por completo de encima de la foto */
}

/* 2. Maximizar el espacio de la imagen para que se vea mucho más grande */
.product-element-top, 
.wd-product-image {
    padding: 0 !important; /* Eliminamos márgenes internos que achican la foto */
    margin-bottom: 15px !important;
    width: 100% !important;
    background-color: #f7f7f7 !important; /* Fondo suave para destacar el EPP */
    border-radius: 6px !important;
    overflow: hidden !important;
}

.product-element-top img,
.wd-product-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 240px !important; /* Altura ideal en PC para que el producto luzca imponente */
    object-fit: contain !important; /* Asegura que el producto no se deforme ni se corte */
    transform: scale(1) !important;
    transition: transform 0.3s ease !important;
}

/* Efecto zoom suave en la foto al pasar el cursor */
.product-grid-item:hover .product-element-top img {
    transform: scale(1.04) !important;
}

/* 3. Estructura inferior: Reordenar los elementos en fila vertical limpia */
.product-item-footer,
.product-element-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centra textos, precios y botones */
    text-align: center !important;
}

/* ==========================================================================
   PARCHE CSS: CORRECCIÓN DE TÍTULOS CORTADOS DE FORMA VISUAL
   ========================================================================== */

/* Ajuste base de la caja del título para soportar el texto manual */
.wd-entities-title,
.product-title,
.product-title a {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    height: auto !important;
    min-height: 44px !important; /* Reserva el espacio simétrico para 2 líneas */
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    position: relative !important;
}

/* --- TRUCO PARA EL PRODUCTO 1: Alaska - Gran Capitán --- */
/* Buscamos la tarjeta por su enlace interno y alteramos el texto mocho */
.product-grid-item a[href*="alaska-gran-capitan"] .product-title a,
.product-grid-item a[href*="alaska-gran-capitan"] .wd-entities-title {
    font-size: 0 !important; /* Volvemos invisible el texto viejo "Alaska - Gran" */
}

.product-grid-item a[href*="alaska-gran-capitan"] .product-title a::after,
.product-grid-item a[href*="alaska-gran-capitan"] .wd-entities-title::after {
    content: "Alaska - Gran Capitán" !important; /* Inyectamos el nombre real completo */
    font-size: 16px !important; /* Le devolvemos el tamaño correcto a la letra */
    display: block !important;
    visibility: visible !important;
}

/* --- TRUCO PARA EL PRODUCTO 2: Alaska - Pitbull Brown --- */
.product-grid-item a[href*="alaska-pitbull"] .product-title a,
.product-grid-item a[href*="alaska-pitbull"] .wd-entities-title {
    font-size: 0 !important;
}

.product-grid-item a[href*="alaska-pitbull"] .product-title a::after,
.product-grid-item a[href*="alaska-pitbull"] .wd-entities-title::after {
    content: "Alaska - Pitbull Brown" !important;
    font-size: 16px !important;
    display: block !important;
    visibility: visible !important;
}


/* ==========================================================================
   4. BOTÓN DEL CARRITO Y ACCIONES AL FONDO
   ========================================================================== */
.wd-add-btn,
.wd-add-to-cart-icon,
.product-grid-item .wd-add-btn-replace {
    margin-top: auto !important; /* Empuja el botón al fondo real de la tarjeta */
    padding-top: 12px !important;
    width: 100% !important; 
    display: block !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.wd-add-btn a,
.wd-add-to-cart-icon a {
    background-color: #cd2b37 !important; /* Rojo corporativo */
    color: #ffffff !important;
    padding: 10px 15px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    transition: background-color 0.2s ease !important;
}

.wd-add-btn a:hover {
    background-color: #009146 !important; /* Cambia a verde corporativo en el hover */
}
/* --- TRUCO MAESTRO: RECONSTRUIR EL TEXTO DEBAJO DE LA IMAGEN --- */

/* 1. Volver invisible el texto flotante original que está encima de la foto */
.product-category.cat-design-default .wd-cat-header,
.cat-design-default .wd-cat-header,
.cat-design-default .wd-cat-header * {
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Forzar al contenedor de la categoría a comportarse como un bloque normal hacia abajo */
.product-category.cat-design-default,
.categories-style-center .product-category {
    display: block !important;
    position: relative !important;
    background-color: #ffffff !important;
    border: 1px solid #eef0f2 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    text-align: center !important;
    overflow: visible !important;
}

/* 3. Crear un NUEVO contenedor de texto abajo usando la propiedad "after" de la tarjeta */
.product-category.cat-design-default::after {
    /* Recuperamos dinámicamente el nombre de la categoría usando el atributo aria-label del enlace */
    content: attr(aria-label) !important; 
    
    /* Lo posicionamos como un texto normal debajo de la foto */
    display: block !important;
    position: relative !important;
    margin-top: 15px !important;
    
    /* Estilos idénticos a tus productos (Negrita y oscuro) */
    color: #222222 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    width: 100% !important;
}

/* 4. Efecto Hover para que combine con toda la tienda */
.product-category.cat-design-default:hover {
    transform: translateY(-3px) !important;
    border-color: #cd2b37 !important; /* Tu rojo de marca */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

/* Al pasar el mouse, el nuevo texto se ilumina en rojo */
.product-category.cat-design-default:hover::after {
    color: #cd2b37 !important;
}

/* 5. Asegurar que la imagen no se rompa y se centre correctamente */
.cat-design-default .wd-cat-thumb,
.cat-design-default img {
    margin: 0 auto !important;
    display: block !important;
    border-radius: 6px !important;
    max-width: 100% !important;
}

/* --- CAMBIAR SOLO EL COLOR DEL PRECIO A VERDE --- */
.price, 
.price .amount, 
.product-element-bottom .price .amount, 
.wd-price-summary .price {
    color: #009146 !important; /* Tu verde corporativo */
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* --- EFECTO LOGO DE PRECIO EXCLUSIVO (ESTILO CMR) --- */

/* 1. Preparar el contenedor del precio para albergar el logo arriba */
.product-element-bottom .price,
.wd-product .price {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important; /* Alinea el logo arriba y el monto abajo */
    align-items: left !important;    /* Mantiene todo centrado en la tarjeta */
    margin-top: auto !important;
}

/* 2. Inyectar dinámicamente tu icono corporativo sobre el precio */
.product-element-bottom .price::before,
.wd-product .price::before {
    content: "" !important;
    display: block !important;
    
    /* Ruta de tu icono */
    background-image: url('https://itmarket.cl/wp-content/uploads/2026/05/ico.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    /* Dimensiones del logo (Ajustadas estilo Falabella) */
    width: 55px !important;   /* Ancho ideal para que no tape los textos */
    height: 28px !important;  /* Altura proporcional */
    
    /* Separación interna */
    margin-bottom: 6px !important; /* Espacio entre el logo y el número del precio */
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Ajuste extra de seguridad para celulares */
@media (max-width: 768px) {
    .product-element-bottom .price::before,
    .wd-product .price::before {
        width: 48px !important;  /* Un pelín más chico en pantallas móviles */
        height: 25px !important;
        margin-bottom: 4px !important;
    }
}

/* ==========================================================================
   DISEÑO ULTRA LIMPIO PARA MÓVILES: CORRECCIÓN DEFINITIVA DE ESPACIOS
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. Ocultar las categorías por completo */
    .product-grid-item .wd-product-cats,
    .products-grid .wd-product-cats,
    .wd-product-cats a,
    .product-grid-item .meta-categories,
    .wd-product-cats {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Forzar cuadratura idéntica y limpia en las tarjetas de la misma fila */
    .products-element-holder, .products-grid {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .product-grid-item,
    .wd-product.wd-hover-fw-button,
    .product-wrapper {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; /* Empuja el bloque inferior al fondo real */
        height: 100% !important;
        padding: 12px 10px !important; /* Ajuste de aire interno */
        overflow: visible !important;
    }

    /* 3. Bloque del título: Forzar altura fluida y evitar CUALQUIER superposición */
    .product-element-bottom {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important; /* Absorbe las diferencias de tamaño de forma invisible */
        justify-content: flex-start !important;
        height: auto !important;
        max-height: none !important; /* Rompe restricciones del tema */
        overflow: visible !important;
    }

    .wd-entities-title,
    .product-title,
    .product-title a {
        display: block !important;
        position: relative !important;
        white-space: normal !important; /* Permite saltos de línea infinitos */
        overflow: visible !important;
        height: auto !important; /* Altura 100% fluida según el nombre */
        max-height: none !important; 
        min-height: 58px !important; /* Colchón mínimo para que los nombres cortos no descuadren */
        font-size: 13px !important;
        line-height: 1.3 !important; /* Interlineado perfecto para que no se junten las letras */
        margin-top: 6px !important;
        margin-bottom: 12px !important; /* ¡Espacio de seguridad crítico antes del precio! */
        text-align: center !important;
    }

    /* 4. Bloque inferior independiente: Logo corporativo + Precio en Verde */
    .price-and-button,
    .wd-product-footer,
    .product-element-bottom .price {
        margin-top: auto !important; /* Ancla magnéticamente este bloque abajo */
        padding-top: 8px !important;  /* Separación extra de seguridad */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Ajuste perfecto de tu logo 'ico.png' arriba del precio */
    .product-element-bottom .price::before,
    .wd-product .price::before {
        content: "" !important;
        width: 60px !important;
        height: 28px !important;
        margin-bottom: 4px !important;
        display: block !important;
    }

    .price, .price .amount {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
        color: #009146 !important;
    }

    /* 5. Botones de añadir al carrito alineados abajo */
    .wd-add-btn,
    .wd-add-to-cart-icon,
    .product-grid-item .wd-add-btn-replace {
        margin-top: auto !important;
        width: 100% !important;
    }

    .wd-add-btn a,
    .wd-add-to-cart-icon a {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================================
   CONVERTIR EL TEXTO DE CANTIDAD DE CATEGORÍAS EN UN BOTÓN "VER PRODUCTOS"
   ========================================================================== */

/* 1. Ocultar el texto original de "X productos" o "Producto 1" */
.products-grid .product-category .wd-products-count,
.products-grid .product-category .count,
.categories-style-center .product-category::after,
.product-category mark {
    font-size: 0 !important;
    color: transparent !important;
}

/* 2. Crear el botón interactivo "VER PRODUCTOS" debajo del nombre de la categoría */
.products-grid .product-category .wd-products-count::before,
.products-grid .product-category .count::before,
.categories-style-center .product-category::after {
    content: "VER PRODUCTOS ➔" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Estilos del botón estilo tienda premium */
    background-color: #009146 !important; /* Tu verde corporativo inicial */
    color: #ffffff !important;           /* Texto blanco brillante */
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    
    /* Dimensiones y márgenes */
    padding: 8px 16px !important;
    margin-top: 10px !important;
    border-radius: 4px !important;
    min-width: 140px !important;
    
    /* Animación suave */
    transition: all 0.2s ease-in-out !important;
    visibility: visible !important;
    cursor: pointer !important;
}

/* 3. Efecto Hover: Al pasar el mouse por la tarjeta, el botón se ilumina en tu rojo de marca */
.product-category:hover .wd-products-count::before,
.product-category:hover .count::before,
.product-category:hover::after {
    background-color: #cd2b37 !important; /* Tu rojo corporativo */
    box-shadow: 0 4px 12px rgba(205, 43, 55, 0.2) !important;
    transform: translateY(-1px) !important;
}@media (max-width: 576px) {
	/* ==========================================================================
   IGUALACIÓN MILIMÉTRICA DE PESTAÑAS: COMERCIALIZADORA, CONSTRUCTORA Y RECICLAJE
   ========================================================================== */

/* 1. Ocultar el texto original "Menu" de raíz */
.wd-nav-tab-menu > a > span,
.wd-header-mobile-nav .wd-tools-text,
.mobile-nav-icon .wd-tools-text {
    font-size: 0 !important;
    color: transparent !important;
}

/* 2. Forzar que las tres pestañas compartan EXACTAMENTE la misma estructura */
.wd-mobile-nav .wd-nav-tabs li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;            /* Altura fija idéntica para los tres */
    padding: 0 10px !important;          /* Margen interno uniforme */
    font-family: inherit !important;
    font-size: 12px !important;          /* Tamaño compacto idéntico para que quepa COMERCIALIZADORA */
    font-weight: 700 !important;         /* Misma negrita */
    text-transform: uppercase !important;/* Todo en mayúsculas */
    border-radius: 20px !important;      /* Mismo redondeado estilo píldora */
    box-sizing: border-box !important;
    text-align: center !important;
}

/* 3. Inyectar el texto con el tamaño y color exacto de los otros */
.wd-nav-tab-menu > a > span::before,
.wd-header-mobile-nav .wd-tools-text::before,
.mobile-nav-icon .wd-tools-text::before {
    content: "COMERCIALIZADORA" !important;
    font-size: 12px !important;          /* Ajustado milimétricamente igual al resto */
    color: #ffffff !important;           /* Blanco puro */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    visibility: visible !important;
    line-height: 1 !important;
}

/* 4. Sincronizar el color de fondo para que los tres se vean homogéneos */
/* (Ajusta estos colores si usas otra paleta en las pestañas pasivas/activas) */
.wd-mobile-nav .wd-nav-tabs li:not(.wd-active) a {
    background-color: rgba(0, 0, 0, 0.15) !important; /* Gris traslúcido pasivo */
    color: rgba(255, 255, 255, 0.8) !important;
}

.wd-mobile-nav .wd-nav-tabs li.wd-active a {
    background-color: rgba(0, 0, 0, 0.3) !important;  /* Gris más oscuro para el botón activo */
    color: #ffffff !important;
}

/* ==========================================================================
   BARRIDO ULTRA AGRESIVO: FLECHAS BLANCAS EN MENÚ ROJO (170206.JPG)
   ========================================================================= */

/* 1. Forzar color blanco a cualquier flecha o indicador dentro del menú móvil */
.wd-mobile-nav .wd-nav-mobile li .wd-nav-opener,
.wd-mobile-nav .wd-nav-mobile li .wd-key,
.wd-mobile-nav .wd-nav-mobile li a::after,
.wd-mobile-nav .wd-nav-mobile li [class*="arrow"],
.wd-mobile-nav .wd-nav-mobile li [class*="opener"] {
    color: #ffffff !important;
    border-color: #ffffff !important;
    opacity: 1 !important;
}

/* 2. Forzar blanco si la flecha es un icono SVG (líneas y rellenos) */
.wd-mobile-nav .wd-nav-mobile li [class*="opener"] svg,
.wd-mobile-nav .wd-nav-mobile li [class*="arrow"] svg,
.wd-mobile-nav .wd-nav-mobile li .wd-key svg,
.wd-mobile-nav .wd-nav-mobile li svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* 3. Evitar transparencias grises que hereda el tema en los contenedores de los botones */
.wd-nav-mobile .wd-nav-opener,
.wd-nav-mobile .wd-key {
    background: transparent !important;
    color: #ffffff !important;
}

/* ==========================================================================
   BARRIDO ABSOLUTO: BUSCADOR Y LUPA BLANCOS EN PANEL LATERAL
   ========================================================================== */

/* 1. Forzar el texto que escribe el usuario a blanco puro */
div[class*="mobile-nav"] .wd-search-form input[type="text"],
.wd-mobile-nav-panel .wd-search-form input[type="text"],
.mobile-menu-sidebar .wd-search-form input[type="text"],
.wd-search-form input.s {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* 2. Forzar el texto fantasma ("Buscar productos") a blanco traslúcido legible */
div[class*="mobile-nav"] .wd-search-form input[type="text"]::placeholder,
.wd-mobile-nav-panel .wd-search-form input[type="text"]::placeholder,
.mobile-menu-sidebar .wd-search-form input[type="text"]::placeholder,
.wd-search-form input.s::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
}

/* Parche de placeholder para navegadores móviles (Safari/Chrome Mobile) */
div[class*="mobile-nav"] .wd-search-form input[type="text"]::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.7) !important; opacity: 1 !important; }
div[class*="mobile-nav"] .wd-search-form input[type="text"]::-moz-placeholder { color: rgba(255, 255, 255, 0.7) !important; opacity: 1 !important; }

/* 3. Forzar el botón e icono de la LUPA a blanco brillante (SVG y Fuentes) */
div[class*="mobile-nav"] .wd-search-form [class*="submit"],
div[class*="mobile-nav"] .wd-search-form button,
.mobile-menu-sidebar [class*="search"] button,
.wd-search-form button[type="submit"] {
    color: #ffffff !important;
    opacity: 1 !important;
}

div[class*="mobile-nav"] .wd-search-form svg,
.mobile-menu-sidebar .wd-search-form svg,
.wd-search-form button[type="submit"] svg {
    fill: #ffffff !important;   /* Relleno del SVG en blanco */
    stroke: #ffffff !important; /* Línea del SVG en blanco */
    color: #ffffff !important;
    opacity: 1 !important;
}

}