.elementor-12961 .elementor-element.elementor-element-3c4042a{--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;--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-12961 .elementor-element.elementor-element-e154edb{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:16px 16px;--row-gap:16px;--column-gap:16px;}.elementor-12961 .elementor-element.elementor-element-851d83e{--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;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E5E5E5;--border-color:#E5E5E5;--border-radius:8px 8px 8px 8px;--padding-top:16px;--padding-bottom:16px;--padding-left:16px;--padding-right:16px;}.elementor-12961 .elementor-element.elementor-element-851d83e:not(.elementor-motion-effects-element-type-background), .elementor-12961 .elementor-element.elementor-element-851d83e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-12961 .elementor-element.elementor-element-13dc46d{--display:flex;}.elementor-12961 .elementor-element.elementor-element-77cc600{--display:flex;}.elementor-12961 .elementor-element.elementor-element-657b687{--display:flex;}.elementor-12961 .elementor-element.elementor-element-e785c36{--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;--gap:16px 16px;--row-gap:16px;--column-gap:16px;}.elementor-12961 .elementor-element.elementor-element-e785c36.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-12961 .elementor-element.elementor-element-6289d38{--grid-columns:4;--grid-row-gap:12px;--grid-column-gap:12px;}.elementor-12961 .elementor-element.elementor-element-6289d38 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-12961 .elementor-element.elementor-element-6289d38 .e-loop-item > .elementor-section, .elementor-12961 .elementor-element.elementor-element-6289d38 .e-loop-item > .elementor-section > .elementor-container, .elementor-12961 .elementor-element.elementor-element-6289d38 .e-loop-item > .e-con, .elementor-12961 .elementor-element.elementor-element-6289d38 .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-12961 .elementor-element.elementor-element-6289d38 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-12961 .elementor-element.elementor-element-6289d38 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-12961 .elementor-element.elementor-element-6289d38 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-12961 .elementor-element.elementor-element-6289d38 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-12961 .elementor-element.elementor-element-6289d38 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}@media(min-width:768px){.elementor-12961 .elementor-element.elementor-element-3c4042a{--content-width:1440px;}.elementor-12961 .elementor-element.elementor-element-851d83e{--width:220px;}.elementor-12961 .elementor-element.elementor-element-e785c36{--width:50%;}}@media(max-width:1024px){.elementor-12961 .elementor-element.elementor-element-6289d38{--grid-columns:2;}}@media(max-width:767px){.elementor-12961 .elementor-element.elementor-element-6289d38{--grid-columns:2;}}/* Start custom CSS for container, class: .elementor-element-851d83e *//* Sidebar wrapper */
.filter-sidebar {
  background: #fff !important;
  border-radius: 8px !important;
  border: 1px solid #e5e5e5 !important;
  padding: 16px !important;
  position: sticky !important;
  top: 80px !important;
}

/* Título del sidebar */
.filter-title .elementor-heading-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  margin-bottom: 16px !important;
}

/* Cada bloque de filtro */
.filter-widget {
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.filter-widget:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Título de cada filtro (el que genera WooCommerce) */
.filter-widget .widget-title,
.filter-widget h2,
.filter-widget h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Links de categorías */
.filter-widget ul li a {
  font-size: 13px !important;
  color: #333 !important;
  text-decoration: none !important;
  line-height: 2 !important;
  display: block !important;
}
.filter-widget ul li a:hover {
  color: #3483fa !important;
}
.filter-widget ul li.current-cat > a {
  color: #3483fa !important;
  font-weight: 600 !important;
}

/* Contador de productos */
.filter-widget ul li .count {
  color: #999 !important;
  font-size: 11px !important;
}

/* Slider de precio */
.filter-widget .price_slider_wrapper .ui-slider {
  background: #e5e5e5 !important;
  border-radius: 4px !important;
  height: 4px !important;
}
.filter-widget .price_slider_wrapper .ui-slider-range {
  background: #3483fa !important;
}
.filter-widget .price_slider_wrapper .ui-slider-handle {
  background: #3483fa !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  top: -6px !important;
}
.filter-widget .price_slider_amount .button {
  background: #3483fa !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
}
.filter-widget .price_slider_amount .button:hover {
  background: #2968c8 !important;
}

/* Filtros activos */
.filter-active .woocommerce-widget-layered-nav-list li {
  display: inline-flex !important;
  align-items: center !important;
  background: #e8f0fe !important;
  color: #3483fa !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  margin: 2px !important;
}
.filter-active .woocommerce-widget-layered-nav-list li a {
  color: #3483fa !important;
  margin-left: 4px !important;
  font-weight: 700 !important;
}
```

---

## Clases que tenés que agregar manualmente

| Clase | Dónde |
|---|---|
| `filter-sidebar` | Container del sidebar (el de 220px) |
| `filter-title` | Widget Heading "Filtrar por" |
| `filter-widget` | Cada widget de filtro WooCommerce |
| `filter-active` | Widget Active Filters |

---

## Estructura final del sidebar
```
[Container sidebar — 220px — CSS Class: filter-sidebar]
  ├── Heading "Filtrar por"         → filter-title
  ├── WC Active Filters             → filter-active
  ├── WC Product Categories         → filter-widget
  ├── WC Filter by Price            → filter-widget
  ├── WC Filter by Attribute (x N)  → filter-widget
  └── WC Filter by Rating           → filter-widget/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e785c36 *//* Grid wrapper */
.e-con:has(.elementor-widget-loop-grid) {
  background: transparent !important;
}

/* Paginación estilo ML */
.elementor-pagination {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-top: 24px !important;
}
.elementor-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  color: #333 !important;
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.elementor-pagination .page-numbers:hover {
  background: #FC3333 !important;
  color: #fff !important;
  border-color: #FC3333 !important;
}
.elementor-pagination .page-numbers.current {
  background:#FC3333 !important;
  color: #fff !important;
  border-color: #FC3333 !important;
  font-weight: 600 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3c4042a *//* Fondo gris ML en toda la página de archivo */
.elementor-location-archive {
  background: #ededee !important;
  min-height: 100vh !important;
}

/* Título de categoría estilo ML */
.shop-title .elementor-heading-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 4px !important;
}

/* Descripción de categoría */
.shop-subtitle .elementor-widget-container {
  font-size: 13px !important;
  color: #666 !important;
  margin-bottom: 16px !important;
}
```

---

### Resumen visual de la estructura
```
[Container raíz — Boxed 1440px, bg #ededee]
  └── [Container Row — sidebar + contenido]
        ├── [Container — Sidebar filtros 220px]
        │     └── WooCommerce Filters / widgets
        └── [Container Column — Fill]
              ├── [Título + descripción categoría]
              ├── [Ordenar por / resultados]
              └── [Loop Grid — 4 col, 20 items]
                    └── [Paginación]/* End custom CSS */