/* 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.) */
.mmc-premium-filters-container .mmc-gender-tabs a.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 15px !important; 
    
    border: 1px solid #0B2572 !important; 
    border-radius: 4px !important; 
    background: #fff !important;
    
    align-items: center !important; 
    justify-content: center !important;
    gap: 8px !important; 
    
    text-decoration: none !important; 
    color: #000 !important; 
    font-weight: 700 !important; 
    font-size: 12px !important; 
    white-space: nowrap !important; /* Evita que el texto salte de línea */
}

/* 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: #000 !important; 
}

.mmc-filter-bar { background: #F4F6F8; border: 1px solid #E1E5E9; border-radius: 4px; padding: 15px; position: relative; }
.mmc-pills-row { display: flex; gap: 10px; flex-wrap: wrap; }
.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; }

/* 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; }