/* 1. EL CONTENEDOR: Evita que los botones se vuelvan locos */
.mmc-premium-filters-container .mmc-gender-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Los mantiene alineados a la izquierda */
    gap: 10px !important;
    width: 100% !important;
    margin: 20px 0px;
}

/* 2. EL BOTÓN: Prohibido estirarse (Para MUJER, HOMBRE, etc.) — estilo "pill": redondeado, sin borde */
.mmc-premium-filters-container .mmc-gender-tabs a.gender-btn,
.mmc-premium-filters-container .mmc-gender-tabs button.gender-btn {
    display: inline-flex !important; /* Evita que ocupe toda la fila */
    width: auto !important; /* El ancho lo define el texto, no la pantalla */
    max-width: fit-content !important;
    flex: 0 0 auto !important; /* Bloquea el crecimiento automático */

    height: 34px !important;
    padding: 0 16px !important;

    border: none !important;
    border-radius: 999px !important;
    background: #F1F3F5 !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    text-decoration: none !important;
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    white-space: nowrap !important; /* Evita que el texto salte de línea */
    cursor: pointer !important;
    transition: background .15s, color .15s !important;
}

/* 3. LA IMAGEN (Sea SVG o PNG): Tamaño fijo de icono */
.mmc-premium-filters-container .mmc-gender-tabs a.gender-btn img.gender-icon {
    height: 18px !important; /* Altura controlada */
    width: 20px !important; /* Ancho controlado */
    min-width: 20px !important;
    max-width: 20px !important;

    
    display: block !important;
    object-fit: contain !important; /* Evita que la imagen se deforme */
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Estado Activo y Hover */
.mmc-premium-filters-container .mmc-gender-tabs a.gender-btn.active,
.mmc-premium-filters-container .mmc-gender-tabs a.gender-btn:hover {
    background: #E6F0FF !important;
    color: #0B2572 !important;
}

.mmc-filter-bar { background: #F4F6F8; border: 1px solid #E1E5E9; border-radius: 4px; padding: 15px; position: relative; width: 100%; box-sizing: border-box; }
/* width/max-width/min-width explícitos: sin esto, en reposo (no pegajosa) esta fila podía crecer a
   su ancho de contenido en vez de quedar limitada a su contenedor, y entonces el navegador nunca
   reportaba desborde real (scrollWidth == clientWidth) — el JS de "More" nunca se disparaba y los
   pills que no entraban quedaban recortados/invisibles en vez de pasar al menú. */
.mmc-pills-row { display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; overflow: hidden; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
/* Nunca se comprimen — o entran a su tamaño natural, o el JS los manda al menú "More". Sin esto,
   el navegador los va achicando solo (flex-shrink) antes de que el JS alcance a medirlos, dando
   la sensación de "apretado" en vez de pasar limpio al overflow. */
.mmc-pills-row > .pill-btn,
.mmc-pills-row > .mmc-vista-toggle { flex-shrink: 0; white-space: nowrap; }

/* Barra de filtros pegajosa: al bajar lo suficiente, queda fija justo debajo del header (el "top"
   exacto lo calcula JS según la altura real del header, no un valor fijo) y ocupa todo el ancho de
   la pantalla. z-index bajo a propósito para quedar SIEMPRE por debajo del header y sus menús
   desplegables (si el header se abre, debe verse por encima de esta barra, no al revés). El spacer
   evita que el resto de la página "salte" cuando se activa. */
.mmc-filter-bar.mmc-is-sticky {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    z-index: 20 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* En reposo el contenido ya queda bien alineado con el resto de la página (hereda el ancho de su
   contenedor normal); pegajosa, la barra pasa a ancho completo de la pantalla, así que hay que
   centrar su contenido a mano con un ancho máximo — si en tu sitio el contenido normal usa otro
   ancho máximo, avísame el valor exacto y lo ajusto. */
.mmc-filter-bar.mmc-is-sticky .mmc-pills-row,
.mmc-filter-bar.mmc-is-sticky .mmc-dropdown-panels {
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
.mmc-filter-bar-spacer { display: none; }

/* Menú "More" (overflow de pills en escritorio) */
/* "left" real lo calcula JS según la posición del botón "More" al abrirlo — este 0 es solo un
   valor por defecto antes de esa primera apertura. */
.mmc-more-menu { position: absolute; top: 100%; left: 0; margin-top: 6px; background: #fff; border: 1px solid #E1E5E9; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.08); min-width: 160px; z-index: 60; padding: 6px 0; }
.mmc-more-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 16px; font-size: 13px; color: #333; cursor: pointer; }
.mmc-more-item:hover { background: #f4f6f8; }
@media (max-width: 768px) {
    .mmc-more-btn, .mmc-more-menu { display: none !important; }
}

/* Interruptor de vista global (vista frontal / vista lateral de toda la grilla a la vez). Vive
   normalmente en la fila de píldoras (.mmc-gender-tabs) — visible también en mobile, ya que
   .mmc-filter-bar se oculta en <=768px (ver css/mobile-filters.css) — y el JS lo muda dentro de
   .mmc-pills-row mientras la barra está pegajosa, para que no desaparezca al hacer scroll.
   Mismo contorno que los demás filtros (.pill-btn: borde 1px #ccc, radio 4px) — el activo/inactivo
   se distingue solo por opacidad (sin hover propio). */
.mmc-vista-toggle { display: flex !important; gap: 6px !important; margin-left: auto !important; flex: 0 0 auto !important; }
.mmc-vista-btn,
.mmc-vista-btn:hover,
.mmc-vista-btn:focus {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    opacity: 0.45 !important;
    transition: opacity .15s !important;
}
.mmc-vista-btn.active,
.mmc-vista-btn.active:hover { opacity: 1 !important; }
.mmc-vista-btn svg, .mmc-vista-btn img { width: 22px !important; height: 22px !important; object-fit: contain !important; display: block !important; pointer-events: none !important; }

/* Vista alterna: muestra la 2da imagen del producto sin necesidad de :hover */
#mmc-productos-grid-wrap.mmc-vista-alterna .mmc-catalogo-img-wrapper .hover-image { opacity: 1 !important; }
#mmc-productos-grid-wrap.mmc-vista-alterna .mmc-catalogo-img-wrapper > img:not(.hover-image) { opacity: 0 !important; }
.pill-btn { background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 8px 18px; cursor: pointer; font-weight: 600; font-size: 14px; color: #000 !important; }
.pill-btn::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 8px; vertical-align: middle; position: relative; top: -2px; transition: transform 0.2s ease; }
.pill-btn:hover, .pill-btn.active { border-color: #000; background: #fafafa; color: #000 !important; }
.pill-btn.active::after { transform: rotate(225deg); top: 2px; }

/* Solo los botones de la barra principal de filtros (Género, Forma, … Ofertas, More): esquinas
   de 13px y colores fijos. Kadence pinta los <button> enfocados/presionados con su color de acento
   (el fondo verde azulado que quedaba en "Género" después del clic) — se anula acá con !important
   en vez de cambiar el color en el tema, que afectaría a todos los botones del sitio.
   Normal/enfocado: fondo blanco, borde gris. Mouse encima o panel abierto: borde negro. */
.mmc-pills-row > .pill-btn,
.mmc-pills-row > .pill-btn:focus,
.mmc-pills-row > .pill-btn:focus-visible,
.mmc-pills-row > .pill-btn:active {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    outline: none !important;
}
.mmc-pills-row > .pill-btn:hover,
.mmc-pills-row > .pill-btn.active { border-color: #000 !important; }

/* PANELES DE DESGLOSE */
.filter-panel { display: none; padding-top: 20px; border-top: 1px solid #E1E5E9; margin-top: 15px; }
.filter-panel h4 { font-size: 13px; color: #666; text-transform: uppercase; text-align: left; margin-bottom: 15px; }
.shapes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; }
.shape-box { text-decoration: none; background: #fff; border: 1px solid #eee; color: #000 !important; padding: 15px; border-radius: 4px; text-align: center; transition: 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.shape-box:hover { border-color: #000; box-shadow: 0 4px 10px rgba(0,0,0,0.05); color: #000 !important; }
.shape-icon { width: 60px; height: 30px; margin: 0 auto 10px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.mmc-color-circle { display: inline-block; width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
#panel-color .shape-box { flex-direction: row; justify-content: flex-start; padding: 10px 15px; }

/* TUS CAMBIOS DE COLOR Y PESO PRESERVADOS */
.shape-name { display: inline-block; font-size: 12px; color: #6f6f6f !important; font-weight: 400; vertical-align: middle; }
.shape-name small { color: #666; font-weight: 400; }

/* TALLA GENERAL */
.mmc-section-title { font-size: 12px; color: #999; text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
.mmc-talla-general-grid { display: flex; gap: 10px; margin-bottom: 30px; }
.mmc-checkbox-box { cursor: pointer; min-width: 100px; }
.mmc-checkbox-box.active { border-color: #0B2572; background: #E6F0FF; color: #0B2572 !important; }
.mmc-checkbox-box.active .shape-name { color: #0B2572 !important; }

/* SLIDERS TÉCNICOS Y DE PRECIO */
.mmc-technical-sliders-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 30px; }
.mmc-slider-container { background: #fff; padding: 15px; border-radius: 4px; border: 1px solid #eee; }
.mmc-slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.mmc-slider-header span { font-weight: 700; font-size: 13px; color: #333; }
.mmc-header-icon { width: 50px; height: 25px; background-size: contain; background-repeat: no-repeat; background-position: right center; }
.mmc-tech-slider-ui { position: relative; height: 6px; background: #e1e5e9; border-radius: 3px; margin: 0 5px 15px 5px; }
.ui-slider-range { position: absolute; height: 100%; background: #00b0f0; border-radius: 3px; }
.ui-slider-handle { position: absolute; top: -7px; width: 20px; height: 20px; background: #fff; border: 1px solid #ddd; border-radius: 50%; cursor: ew-resize; margin-left: -10px; z-index: 2; outline: none; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ui-slider-handle::after { content: "|||"; color: #ddd; font-size: 8px; position: absolute; top: 4px; left: 6px; }
.mmc-slider-labels { display: flex; justify-content: space-between; font-size: 11px; color: #999; }

/* BOTÓN APLICAR */
.mmc-apply-btn { 
    display: block; 
    width: 100%; 
    max-width: 250px; 
    margin: 10px 0px; /* Alineado a la izquierda según tu última versión */
    background: #0B2572; 
    color: #fff; 
    border: none; 
    padding: 12px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: 700; 
    font-size: 14px; 
    transition: 0.2s; 
    text-align: center; 
}
.mmc-apply-btn:hover { background: #000; }

/* ESTADO ACTIVO de los pills de atributo (Forma/Marca/Color/Material/etc.) */
.shape-box.active { border-color: #0B2572; background: #E6F0FF; color: #0B2572 !important; }
.shape-box.active .shape-name { color: #0B2572 !important; }
.shape-box.active .shape-name small { color: #0B2572 !important; }

/* FILA DE FILTROS ACTIVOS ("chips") + Borrar todo */
.mmc-active-filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.mmc-active-filters-row:empty { display: none; margin-top: 0; }
.mmc-filter-chip { display: inline-flex; align-items: center; gap: 6px; background: #E6F0FF; color: #0B2572; border: 1px solid #0B2572; border-radius: 4px; padding: 6px 8px 6px 12px; font-size: 12px; font-weight: 600; }
.mmc-filter-chip-remove { background: none; border: none; color: #0B2572; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.mmc-filter-chip-remove:hover { color: #000; }
.mmc-clear-all-btn { background: none; border: none; color: #0B2572; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 6px 4px; }
.mmc-clear-all-btn:hover { color: #000; }

/* Transición suave al reemplazar la grilla vía AJAX */
#mmc-productos-grid-wrap { transition: opacity 0.2s ease; margin-top: 24px; clear: both; }
.mmc-active-filters-row { margin-bottom: 4px; }