.elementor-128 .elementor-element.elementor-element-646f875{--display:flex;--min-height:50vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-646f875:not(.elementor-motion-effects-element-type-background), .elementor-128 .elementor-element.elementor-element-646f875 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://abctecnicacomercial.com/wp-content/uploads/2026/03/portada-abc-3-e1668036835567.png");background-position:center center;}.elementor-widget-theme-archive-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-128 .elementor-element.elementor-element-135ed71 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:var( --e-global-color-9cf585e );}.elementor-128 .elementor-element.elementor-element-616c79f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:5px 0px;--row-gap:5px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-0c14600{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-0a66c2f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-8979565{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-128 .elementor-element.elementor-element-9c62da7 .elementor-button{background-color:var( --e-global-color-primary );}.elementor-128 .elementor-element.elementor-element-eeb3129{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-30b70aa{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-0548e79{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-128 .elementor-element.elementor-element-4838658{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-128 .elementor-element.elementor-element-32b1421 .elementor-button{background-color:#242C64;}.elementor-128 .elementor-element.elementor-element-3ae35d4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:-10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-128 .elementor-element.elementor-element-17c895f{--grid-columns:4;--grid-row-gap:40px;--grid-column-gap:20px;}.elementor-128 .elementor-element.elementor-element-17c895f > .elementor-widget-container{margin:25px 0px 0px 0px;}.elementor-128 .elementor-element.elementor-element-17c895f .elementor-loop-container{grid-auto-rows:1fr;}.elementor-128 .elementor-element.elementor-element-17c895f .e-loop-item > .elementor-section, .elementor-128 .elementor-element.elementor-element-17c895f .e-loop-item > .elementor-section > .elementor-container, .elementor-128 .elementor-element.elementor-element-17c895f .e-loop-item > .e-con, .elementor-128 .elementor-element.elementor-element-17c895f .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}@media(max-width:1024px){.elementor-128 .elementor-element.elementor-element-17c895f{--grid-columns:2;}}@media(min-width:768px){.elementor-128 .elementor-element.elementor-element-646f875{--content-width:80%;}.elementor-128 .elementor-element.elementor-element-616c79f{--content-width:80%;}.elementor-128 .elementor-element.elementor-element-0a66c2f{--width:33%;}.elementor-128 .elementor-element.elementor-element-8979565{--width:33%;}.elementor-128 .elementor-element.elementor-element-30b70aa{--width:33%;}.elementor-128 .elementor-element.elementor-element-0548e79{--width:33%;}}@media(max-width:767px){.elementor-128 .elementor-element.elementor-element-616c79f{--padding-top:15px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-128 .elementor-element.elementor-element-17c895f{--grid-columns:1;width:100%;max-width:100%;}}/* Start custom CSS for wp-widget-woocommerce_product_categories, class: .elementor-element-99cef37 *//* 1. El contenedor LI ahora controla la fila */
h5{
    display: none;
}
.marcas-color ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.marcas-color li {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Manda el nombre a la izq y el número a la der */
    align-items: center !important; /* Centrado vertical */
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.3s ease;
}

/* 2. Estilo para el enlace (Nombre de la marca) */
.marcas-color li a {
    flex-grow: 1; /* El nombre ocupa todo el espacio disponible */
    padding: 12px;
    color: #444;
    text-decoration: none;
    display: block;
}

/* 3. Estilo profesional para el contador .count */
.marcas-color li span.count {
    background-color: #f2f2f2;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    margin-right: 12px; /* Separación del borde derecho */
    min-width: 35px;
    text-align: center;
    pointer-events: none; /* El clic pasa a través del número hacia el LI si fuera necesario */
}

/* 4. Efecto Hover en toda la fila */
.marcas-color li:hover {
    background-color: #f9f9f9;
}

.marcas-color li:hover a {
    color: #000;
    padding-left: 15px; /* Efecto sutil de movimiento */
    transition: all 0.3s ease;
}

.marcas-color li:hover span.count {
    background-color: #e0e0e0;
    color: #333;
}
/* 1. Reset total del contenedor de la lista */
.marcas-color ul.wc-brand-list-layered-nav-product_brand {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

/* 2. Reset del ítem de la lista */
.marcas-color li.wc-layered-nav-term {
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* 3. El ajuste clave en el enlace <a> */
.marcas-color li.wc-layered-nav-term a {
    padding-left: 0 !important; /* Aquí es donde suele sobrar espacio */
    margin-left: 0 !important;
    flex-grow: 1; /* Hace que el texto ocupe el espacio para empujar al número */
    text-align: left;
}

/* 4. Si quieres un pequeño margen solo para que no toque físicamente el borde del widget */
.marcas-color {
    padding-left: 5px; /* Ajusta este valor a tu gusto (0 para pegado total) */
}
/* Forzar la altura del contenedor principal de Select2 */
.elementor-128 .elementor-element.elementor-element-99cef37 .select2-container .select2-selection--single {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
}

/* Ajustar el alineado del texto interno */
.elementor-128 .elementor-element.elementor-element-99cef37 .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}

/* Ajustar la flecha para que quede centrada */
.elementor-128 .elementor-element.elementor-element-99cef37 .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}/* End custom CSS */
/* Start custom CSS for wp-widget-woocommerce_brand_nav, class: .elementor-element-dbdfd0c *//* 1. El contenedor LI ahora controla la fila */
h5{
    display: none;
}
.marcas-color ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.marcas-color li {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Manda el nombre a la izq y el número a la der */
    align-items: center !important; /* Centrado vertical */
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.3s ease;
}

/* 2. Estilo para el enlace (Nombre de la marca) */
.marcas-color li a {
    flex-grow: 1; /* El nombre ocupa todo el espacio disponible */
    padding: 12px;
    color: #444;
    text-decoration: none;
    display: block;
}

/* 3. Estilo profesional para el contador .count */
.marcas-color li span.count {
    background-color: #f2f2f2;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    margin-right: 12px; /* Separación del borde derecho */
    min-width: 35px;
    text-align: center;
    pointer-events: none; /* El clic pasa a través del número hacia el LI si fuera necesario */
}

/* 4. Efecto Hover en toda la fila */
.marcas-color li:hover {
    background-color: #f9f9f9;
}

.marcas-color li:hover a {
    color: #000;
    padding-left: 15px; /* Efecto sutil de movimiento */
    transition: all 0.3s ease;
}

.marcas-color li:hover span.count {
    background-color: #e0e0e0;
    color: #333;
}
/* 1. Reset total del contenedor de la lista */
.marcas-color ul.wc-brand-list-layered-nav-product_brand {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

/* 2. Reset del ítem de la lista */
.marcas-color li.wc-layered-nav-term {
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* 3. El ajuste clave en el enlace <a> */
.marcas-color li.wc-layered-nav-term a {
    padding-left: 0 !important; /* Aquí es donde suele sobrar espacio */
    margin-left: 0 !important;
    flex-grow: 1; /* Hace que el texto ocupe el espacio para empujar al número */
    text-align: left;
}

/* 4. Si quieres un pequeño margen solo para que no toque físicamente el borde del widget */
.marcas-color {
    padding-left: 5px; /* Ajusta este valor a tu gusto (0 para pegado total) */
}/* End custom CSS */
/* Start custom CSS for wp-widget-woocommerce_product_categories, class: .elementor-element-0a474f7 *//* 1. El contenedor LI ahora controla la fila */
h5{
    display: none;
}
.marcas-color ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.marcas-color li {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Manda el nombre a la izq y el número a la der */
    align-items: center !important; /* Centrado vertical */
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.3s ease;
}

/* 2. Estilo para el enlace (Nombre de la marca) */
.marcas-color li a {
    flex-grow: 1; /* El nombre ocupa todo el espacio disponible */
    padding: 12px;
    color: #444;
    text-decoration: none;
    display: block;
}

/* 3. Estilo profesional para el contador .count */
.marcas-color li span.count {
    background-color: #f2f2f2;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    margin-right: 12px; /* Separación del borde derecho */
    min-width: 35px;
    text-align: center;
    pointer-events: none; /* El clic pasa a través del número hacia el LI si fuera necesario */
}

/* 4. Efecto Hover en toda la fila */
.marcas-color li:hover {
    background-color: #f9f9f9;
}

.marcas-color li:hover a {
    color: #000;
    padding-left: 15px; /* Efecto sutil de movimiento */
    transition: all 0.3s ease;
}

.marcas-color li:hover span.count {
    background-color: #e0e0e0;
    color: #333;
}
/* 1. Reset total del contenedor de la lista */
.marcas-color ul.wc-brand-list-layered-nav-product_brand {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

/* 2. Reset del ítem de la lista */
.marcas-color li.wc-layered-nav-term {
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* 3. El ajuste clave en el enlace <a> */
.marcas-color li.wc-layered-nav-term a {
    padding-left: 0 !important; /* Aquí es donde suele sobrar espacio */
    margin-left: 0 !important;
    flex-grow: 1; /* Hace que el texto ocupe el espacio para empujar al número */
    text-align: left;
}

/* 4. Si quieres un pequeño margen solo para que no toque físicamente el borde del widget */
.marcas-color {
    padding-left: 5px; /* Ajusta este valor a tu gusto (0 para pegado total) */
}
/* Forzar la altura del contenedor principal de Select2 */
.elementor-128 .elementor-element.elementor-element-0a474f7 .select2-container .select2-selection--single {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
}

/* Ajustar el alineado del texto interno */
.elementor-128 .elementor-element.elementor-element-0a474f7 .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}

/* Ajustar la flecha para que quede centrada */
.elementor-128 .elementor-element.elementor-element-0a474f7 .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}
/* 1. Contenedor Principal: Ajuste de altura y bordes */
.elementor-128 .elementor-element.elementor-element-0a474f7 .select2-container--default .select2-selection--single {
    height: 42px !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important; /* Gris suave profesional */
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease;
}

/* 2. Efecto Focus: Para que resalte al hacer clic */
.elementor-128 .elementor-element.elementor-element-0a474f7 .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #1e2a4a !important; /* Tu azul oscuro */
    box-shadow: 0 0 0 2px rgba(30, 42, 74, 0.1) !important;
}

/* 3. Texto Interno (Placeholder y Selección) */
.elementor-128 .elementor-element.elementor-element-0a474f7 .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
    padding-left: 15px !important;
    color: #444 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* 4. Ajuste del Placeholder (el texto gris inicial) */
.elementor-128 .elementor-element.elementor-element-0a474f7 .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af !important;
}

/* 5. La Flecha (Arrow): Centrada y estilizada */
.elementor-128 .elementor-element.elementor-element-0a474f7 .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    width: 30px !important;
    top: 1px !important;
    right: 5px !important;
}

/* 6. Quitar bordes internos extra que a veces aparecen */
.elementor-128 .elementor-element.elementor-element-0a474f7 .select2-selection {
    outline: none !important;
}
/* Color de fondo y texto cuando pasas el mouse (Hover) o navegas con flechas */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #242C64 !important;
    color: #ffffff !important;
}

/* Opcional: Estilo para el item que ya está seleccionado dentro de la lista */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #e2e8f0 !important; /* Un gris muy suave para saber cuál está activo */
    color: #242C64 !important;
}

/* Ajuste de padding en los items para que se vean más espaciosos y profesionales */
.select2-results__option {
    padding: 10px 15px !important;
    font-size: 14px !important;
    transition: background 0.2s ease;
}/* End custom CSS */
/* Start custom CSS for wp-widget-woocommerce_brand_nav, class: .elementor-element-4838658 *//* 1. El contenedor LI ahora controla la fila */
h5{
    display: none;
}
.marcas-color ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.marcas-color li {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Manda el nombre a la izq y el número a la der */
    align-items: center !important; /* Centrado vertical */
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.3s ease;
}

/* 2. Estilo para el enlace (Nombre de la marca) */
.marcas-color li a {
    flex-grow: 1; /* El nombre ocupa todo el espacio disponible */
    padding: 12px;
    color: #444;
    text-decoration: none;
    display: block;
}

/* 3. Estilo profesional para el contador .count */
.marcas-color li span.count {
    background-color: #f2f2f2;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    margin-right: 12px; /* Separación del borde derecho */
    min-width: 35px;
    text-align: center;
    pointer-events: none; /* El clic pasa a través del número hacia el LI si fuera necesario */
}

/* 4. Efecto Hover en toda la fila */
.marcas-color li:hover {
    background-color: #f9f9f9;
}

.marcas-color li:hover a {
    color: #000;
    padding-left: 15px; /* Efecto sutil de movimiento */
    transition: all 0.3s ease;
}

.marcas-color li:hover span.count {
    background-color: #e0e0e0;
    color: #333;
}
/* 1. Reset total del contenedor de la lista */
.marcas-color ul.wc-brand-list-layered-nav-product_brand {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

/* 2. Reset del ítem de la lista */
.marcas-color li.wc-layered-nav-term {
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* 3. El ajuste clave en el enlace <a> */
.marcas-color li.wc-layered-nav-term a {
    padding-left: 0 !important; /* Aquí es donde suele sobrar espacio */
    margin-left: 0 !important;
    flex-grow: 1; /* Hace que el texto ocupe el espacio para empujar al número */
    text-align: left;
}

/* 4. Si quieres un pequeño margen solo para que no toque físicamente el borde del widget */
.marcas-color {
    padding-left: 5px; /* Ajusta este valor a tu gusto (0 para pegado total) */
}
/* Atacar directamente el select nativo de Marcas */
.wc-brand-dropdown-layered-nav-product_brand, 
select.wc-brand-dropdown-layered-nav-product_brand {
    height: 42px !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding-left: 12px !important;
    padding-right: 30px !important;
    color: #9ca3af  !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    appearance: none !important; /* Quita el estilo por defecto del navegador */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px top 50% !important;
    background-size: 10px auto !important;
    cursor: pointer !important;
    width: 100% !important;
}

/* Efecto focus para igualar a la de arriba */
.wc-brand-dropdown-layered-nav-product_brand:focus {
    border-color: #242C64 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(36, 44, 100, 0.1) !important;
}/* End custom CSS */
/* Start custom CSS *//* 1. Estilo unificado para ambos contenedores (Categorías y Marcas) */
.select2-container--default .select2-selection--single {
    height: 42px !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

/* 2. Ajuste del texto interno y padding */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
    padding-left: 12px !important;
    padding-right: 30px !important;
    color: #444 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* 3. Estilo de la flecha y el botón de "X" (limpiar selección) */
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__clear {
    height: 40px !important;
    top: 1px !important;
    display: flex !important;
    align-items: center !important;
}

/* 4. Efecto Focus cuando se hace clic */
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #242C64 !important;
    box-shadow: 0 0 0 2px rgba(36, 44, 100, 0.1) !important;
}

/* 5. Estilo de los items en la lista desplegable (Hover con tu azul #242C64) */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #242C64 !important;
    color: #ffffff !important;
}

/* Ajuste de espacio entre items en la lista */
.select2-results__option {
    padding: 8px 12px !important;
    font-size: 14px !important;
}/* End custom CSS */